{"id":14981559,"url":"https://github.com/redmadrobot/figma-export","last_synced_at":"2025-05-15T01:08:58.793Z","repository":{"id":37422818,"uuid":"265837801","full_name":"RedMadRobot/figma-export","owner":"RedMadRobot","description":"Command line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project","archived":false,"fork":false,"pushed_at":"2025-01-25T12:01:59.000Z","size":45352,"stargazers_count":763,"open_issues_count":22,"forks_count":119,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-15T01:08:52.211Z","etag":null,"topics":["android","android-studio","design","figma","figma-api","figmaapi","ios","swift","swift-ui","swiftui","typography","xcode"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RedMadRobot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-21T12:03:23.000Z","updated_at":"2025-05-05T12:01:35.000Z","dependencies_parsed_at":"2025-02-07T12:06:38.351Z","dependency_job_id":"666968f3-f208-4bee-a801-2ddf794cbfd1","html_url":"https://github.com/RedMadRobot/figma-export","commit_stats":{"total_commits":280,"total_committers":36,"mean_commits":7.777777777777778,"dds":0.3142857142857143,"last_synced_commit":"5f2cf0766a04fed31a160b5d54ba3c763a46baa6"},"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Ffigma-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Ffigma-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Ffigma-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Ffigma-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RedMadRobot","download_url":"https://codeload.github.com/RedMadRobot/figma-export/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254042,"owners_count":22039792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-studio","design","figma","figma-api","figmaapi","ios","swift","swift-ui","swiftui","typography","xcode"],"created_at":"2024-09-24T14:03:49.917Z","updated_at":"2025-05-15T01:08:53.784Z","avatar_url":"https://github.com/RedMadRobot.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FigmaExport\n\n\u003cimg src=\"images/logo.png\"/\u003e\u003cbr/\u003e\n\n[![SPM compatible](https://img.shields.io/badge/spm-compatible-brightgreen.svg?style=flat)](https://swift.org/package-manager)\n[![GitHub license](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://github.com/RedMadRobot/Catbird/blob/master/LICENSE)\n[![CocoaPods Compatible](https://img.shields.io/cocoapods/v/FigmaExport.svg)](https://cocoapods.org/pods/FigmaExport)\n[![codebeat badge](https://codebeat.co/badges/6c346142-a942-4c13-ae6b-5517b4c50b1d)](https://codebeat.co/projects/github-com-redmadrobot-figma-export-master)\n[![Test](https://github.com/RedMadRobot/figma-export/actions/workflows/tests.yml/badge.svg)](https://github.com/RedMadRobot/figma-export/actions/workflows/tests.yml)\n\nCommand line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project.\n* color - Figma's color style\n* typography - Figma's text style\n* icon — Figma's component with small black/colorized vector image\n* image — Figma's components with colorized image (Light/Dark)\n\nThe utility supports Dark Mode, SwiftUI and Jetpack Compose.\n\nWhy we've developed this utility:\n* Figma doesn't support exporting colors and images to Xcode / Android Studio. Manual export takes a long time.\n* For easy sync of the component library with the code\n\nArticles:\n* [[habr.com] FigmaExport: как автоматизировать экспорт UI-Kit из Figma в Xcode и Android Studio проекты](http://habr.com/ru/company/redmadrobot/blog/514118/)\n\nTable of Contents:\n- [Features](#features)\n- [Result](#result)\n  - [iOS](#ios)\n  - [Android](#android)\n- [Installation](#installation)\n  - [Manual](#manual)\n  - [Homebrew](#homebrew)\n  - [CocoaPods + Fastlane](#cocoapods--fastlane)\n- [Usage](#usage)\n  - [Android](#android-1)\n  - [Arguments](#arguments)\n  - [Configuration](#configuration)\n  - [Exporting Typography](#exporting-typography)\n- [Design requirements](#design-requirements)\n  - [Colors](#for-colors)\n  - [Icons](#for-icons)\n  - [Images](#for-images)\n  - [Typography](#for-typography)\n- [Example project](#example-project)\n- [Contributing](#contributing)\n- [License](#license)\n- [Feedback](#feedback)\n- [Authors](#authors)\n\n## Features\n\n* Export light \u0026 dark color palette directly to Xcode / Android studio project\n* Export icons to Xcode / Android Studio project \n* Export images to Xcode / Android Studio project\n* Export text styles to Xcode / Android Studio project\n* Supports Dark Mode\n* Supports High contrast colors for Xcode\n* Supports SwiftUI and UIKit\n* Supports Objective-C\n* Supports RTL\n\n\u003e Exporting icons and images works only for Professional/Organisation Figma plan because FigmaExport use *Shareable team libraries*.\n\n## Result\n\n### iOS\n\n#### Colors\n\nWhen your execute `figma-export colors` command, `figma-export` exports colors from Figma directly to your Xcode project to the Assets.xcassets folder.\n\n| Figma light                                      | Figma dark                                            | Xcode                                     |\n|--------------------------------------------------|-------------------------------------------------------|-------------------------------------------|\n| \u003cimg src=\"images/figma_colors.png\" width=\"229\"/\u003e | \u003cimg src=\"images/figma_colors_dark.png\" width=\"229\"/\u003e | \u003cimg src=\"images/xcode.png\" width=\"500\"/\u003e |\n\nAdditionally, the following Swift file will be created to use colors from the code.\n\n```swift\n import UIKit\n \n extension UIColor {\n    static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }\n    static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }\n    static var backgroundVideo: UIColor { return UIColor(named: #function)! }\n    ...\n }\n\n```\n\nFor SwiftUI the following Swift file will be created to use colors from the code.\n\n```swift\n import SwiftUI\n \n extension Color {\n    static var backgroundSecondaryError: Color { return Color(#function) }\n    static var backgroundSecondarySuccess: Color { return Color(#function) }\n    static var backgroundVideo: Color { return Color(#function) }\n    ...\n }\n\n```\n\nIf you set option `useColorAssets: False` in the configuration file, then will be generated code like this:\n\nUIKit:\n\n```swift\nimport UIKit\n\nextension UIColor {\n    static var primaryText: UIColor {\n        if #available(iOS 13.0, *) {\n            return UIColor { traitCollection -\u003e UIColor in\n                if traitCollection.userInterfaceStyle == .dark {\n                    return UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1.000)\n                } else {\n                    return UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)\n                }\n            }\n        } else {\n            return UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)\n        }\n    }\n    static var backgroundVideo: UIColor {\n        return UIColor(red: 0.467, green: 0.012, blue: 1.000, alpha: 0.500)\n    }\n}\n```\n\nSwiftUI:\n\n```swift\nimport SwiftUI\n\npublic extension ShapeStyle where Self == Color {\n    static var primaryText: Color { Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) }\n}\n```\n\n#### Icons\n\nIcons will be exported as PDF or SVG files with `Template Image` render mode.\n\n\u003cimg src=\"images/icons.png\" width=\"500\"/\u003e\n\nAdditionally, the following Swift file will be created to use icons from the code.\n\n```swift\nimport UIKit\n\nextension UIImage {\n    static var ic16Notification: UIImage { return UIImage(named: #function)! }\n    static var ic24ArrowRight: UIImage { return UIImage(named: #function)! }\n    static var ic24Close: UIImage { return UIImage(named: #function)! }\n    static var ic24Dots: UIImage { return UIImage(named: #function)! }\n    ...\n}\n```\n\nFor SwiftUI the following Swift file will be created to use images from the code.\n\n```swift\nimport SwiftUI\n\nextension Image {\n    static var ic16Notification: Image { return Image(#function) }\n    static var ic24Close: Image { return Image(#function) }\n    static var ic24DropdownDown: Image { return Image(#function) }\n    static var ic24DropdownUp: Image { return Image(#function) }\n    ...\n}\n...\nVStack {\n  Image.ic24Close\n  Image.ic24DropdownDown\n}\n...\n```\n\n#### Images\n\nImages will be exported as PNG files the same way.\n\n\u003cimg src=\"images/images.png\" width=\"500\"/\u003e\n\nAdditionally, the following Swift file will be created to use images from the code.\n\n```swift\nimport UIKit\n\nextension UIImage {\n    static var illZeroEmpty: UIImage { return UIImage(named: #function)! }\n    static var illZeroNetworkError: UIImage { return UIImage(named: #function)! }\n    static var illZeroServerError: UIImage { return UIImage(named: #function)! }\n    ...\n}\n```\n\nFor SwiftUI a Swift file will be created to use images from the code.\n\n#### Images with multiple idiom\nIf name of an image contains idiom at the end (e.g. ~ipad), it will be exported like this:\n\n\u003cimg src=\"images/ios_image_idiom_xcode.png\" /\u003e\n\n#### Typography\n\nWhen your execute `figma-export typography` command `figma-export` generates 3 files:\n1. `UIFont+extension.swift` extension for UIFont that declares your custom fonts. Use these fonts like this `UIFont.header()`, `UIFont.caption1()`.\n2. `LabelStyle.swift` struct for generating attributes for NSAttributesString with custom lineHeight and tracking (letter spacing).\n3. `Label.swift` file that contains base Label class and class for each text style. E.g. HeaderLabel, BodyLabel, Caption1Label. Specify these classes in xib files on in code.\n\nExample of these files:\n- [./Examples/Example/UIComponents/Source/Typography/Label.swift](./Examples/Example/UIComponents/Source/Typography/Label.swift)\n- [./Examples/Example/UIComponents/Source/Typography/LabelStyle.swift](./Examples/Example/UIComponents/Source/Typography/LabelStyle.swift)\n- [./Examples/Example/UIComponents/Source/Typography/UIFont+extension.swift](./Examples/Example/UIComponents/Source/Typography/UIFont+extension.swift)\n\n### Android\n\nColors will be exported to `values/colors.xml` and `values-night/colors.xml` files.\nFor Jetpack Compose, following code will be generated, if configured:\n```kotlin\npackage com.redmadrobot.androidcomposeexample.ui.figmaexport\n\nimport ...\n\nobject Colors\n\n@Composable\n@ReadOnlyComposable\nfun Colors.backgroundPrimary(): Color = colorResource(id = R.color.background_primary)\n```\n\nIcons will be exported to `drawable` directory as vector xml files. For Jetpack Compose, following code will be generated, if configured:\n```kotlin\npackage com.redmadrobot.androidcomposeexample.ui.figmaexport\n\nimport ...\n\nobject Icons\n\n@Composable\nfun Icons.Ic24DropdownDown(\n    contentDescription: String?,\n    modifier: Modifier = Modifier,\n    tint: Color = Color.Unspecified\n) {\n    Icon(\n        painter = painterResource(id = R.drawable.ic_24_dropdown_down),\n        contentDescription = contentDescription,\n        modifier = modifier,\n        tint = tint\n    )\n}\n```\n\nVector images will be exported to `drawable` and `drawable-night` directories as vector `xml` files.\nRaster images will be exported to `drawable-???dpi` and `drawable-night-???dpi` directories as `png` or `webp` files.\n\nTypography will be exported to `values/typography.xml`. For Jetpack Compose, following code will be generated, if configured:\n```kotlin\npackage com.redmadrobot.androidcomposeexample.ui.figmaexport\n\nimport ...\n\nobject Typography {\n\n    val body = TextStyle(\n        fontFamily = FontFamily(Font(R.font.ptsans_regular)),\n        fontSize = 16.0.sp,\n        letterSpacing = 0.0.sp,\n        lineHeight = 24.0.sp,\n    )\n}\n```\n\n## Installation\n\n Before installation you must provide Figma personal access token via environment variables.\n\n ```export FIGMA_PERSONAL_TOKEN=value```\n\n This token gives you access to the Figma API. Generate a personal Access Token through your user profile page or on [Figma API documentation website](https://www.figma.com/developers/api#access-tokens). If you use Fastlane just add the following line to `fastlane/.env` file\n\n ```FIGMA_PERSONAL_TOKEN=value```\n\n### Manual\n[Download](https://github.com/RedMadRobot/figma-export/releases) the latest release and read [Usage](#usage)\n\n### Homebrew\n```\nbrew install RedMadRobot/formulae/figma-export\n```\nIf you want to export raster images in WebP format install [cwebp](https://developers.google.com/speed/webp/docs/using) command line utility.\n```\nbrew install webp\n```\n\n### CocoaPods + Fastlane\nAdd the following line to your Podfile:\n```ruby\npod 'FigmaExport'\n```\n\nThis will download the FigmaExport binaries and dependencies in `Pods/` during your next\n`pod install` execution and will allow you to invoke it via `Pods/FigmaExport/Release/figma-export` in your Fastfile.\n\nAdd the following line to your Fastfile:\n```ruby\nlane :sync_colors do\n  Dir.chdir(\"../\") do\n    sh \"Pods/FigmaExport/Release/figma-export colors .\"\n  end\nend\n```\n\nDon't forget to place figma-export.yaml file at the root of the project directory.\n\nRun `fastlane sync_colors` to run FigmaExport.\n\n## Usage\n1. Open `Terminal.app`\n2. Go (cd) to the folder with `figma-export` binary file\n3. Run `figma-export`\n  \n   To export colors use `colors` argument:\n\n   `./figma-export colors -i figma-export.yaml`\n\n   To export icons use `icons` argument:\n\n   `./figma-export icons -i figma-export.yaml`\n   \n   To export images use `images` argument:\n\n   `./figma-export images -i figma-export.yaml`\n\n   To export typography use `typography` argument:\n\n   `./figma-export typography -i figma-export.yaml`\n\n### Android\n\nIn the `figma-export.yaml` file you must specify the following properties:\n- `android.mainRes`\n- `android.resourcePackage` if you want to generate Jetpack Compose code\n- `android.mainSrc` if you want to generate Jetpack Compose code\n- `android.icons.output` if you want to export icons\n- `android.images.output` if you want to export images\n\nWhen you execute `figma-export icons` command, FigmaExport clears the `{android.mainRes}/{android.icons.output}` directory before exporting all the icons.\n\nWhen you execute `figma-export images` command, FigmaExport clears the `{android.mainRes}/{android.images.output}` directory before exporting all the images.\n\nExample folder structure:\n```\nmain/\n  res/\n    figma-export-icons/\n      drawable/\n      drawable-night/\n    figma-export-images/\n      drawable/\n      drawable-night/\n```\n\nBefore first running `figma-export` you must add path to these directories in the app‘s `build.gradle` file.\n\n```\n...\nandroid {\n  ...\n  sourceSets {\n    main {\n      res.srcDirs += \"src/main/res/figma-export-icons\"\n      res.srcDirs += \"src/main/res/figma-export-images\"\n    }\n  }\n}\n```\n\n#### Jetpack Compose\nFor Typography, Colors and Icons you can enable code generation for the use with Jetpack Compose in your [config file](CONFIG.md):\n1. Configure `android.mainSrc`\n2. Configure `android.[typography|colors|icons].composePackageName`\n\n### Arguments\n\nIf you want to export specific colors/icons/images you can list their names in the last argument like this:\n\n`./figma-export icons \"ic/24/edit\"` — Exports only one icon.\n\n`./figma-export icons \"ic/24/edit, ic/16/notification\"` — Exports two icons\n\n`./figma-export icons \"ic/24/videoplayer/*\"` — Exports all icons which names starts with `ic/24/videoplayer/`\n\n`./figma-export colors \"common/*\"` — Exports all the colors which names starts with `common`\n\n`./figma-export colors` — Exports all the colors.\n\n⚠️ Wildcard doesn't work on Linux.\n\nArgument `-i` or `-input` specifies path to FigmaExport configuration file `figma-export.yaml`.\n\n### Configuration\n\nAll available configuration options described in the [CONFIG.md](CONFIG.md) file.\n\nExample of `figma-export.yaml` file for iOS project — [Examples/Example/figma-export.yaml](./Examples/Example/figma-export.yaml)\n\nExample of `figma-export.yaml` file for Android project — [Examples/AndroidExample/figma-export.yaml](./Examples/AndroidExample/figma-export.yaml)\n\nGenerate `figma-export.yaml` config file using one of the following command:\n```\nfigma-export init --platform android\nfigma-export init --platform ios\n```\nIt will generate config file in the current directory.\n\n#### Custom templates\n\nFigmaExport uses [Stencil](https://stencil.fuller.li/en/latest/) and [StencilSwiftKit](https://github.com/SwiftGen/StencilSwiftKit) to generate code.\n\n##### iOS\nIf you want to modify structure of the generated `*.swift` files you should specify a directory (`ios.templatesPath`) where Stencil templates are located. If `ios.templatesPath` not specified default templates will be used.\n\nDefault Stencil templates for iOS located here: `./Sources/XcodeExport/Resources`\nCustom Stencil templates for colors and images must have the following names:\n- UIColor+extension.swift.stencil for UIKit colors\n- Color+extension.swift.stencil for SwiftUI colors\n- UIImage+extension.swift.stencil for UIKit images\n- Image+extension.swift.stencil for SwiftUI images\n\nCustom Stencil templates for typography must have the following names:\n- Label.swift.stencil,\n- LabelStyle.swift.stencil,\n- LabelStyle+extension.swift.stencil,\n- UIFont+extension.swift.stencil\n- Font+extension.swift.stencil.stencil\n\n##### Android\n\nIf you want to modify structure of the generated `.xml`, `.kt` files you should specify a directory (`android.templatesPath`) where Stencil templates are located. If `android.templatesPath` not specified default templates will be used.\n\nDefaul Stencil templates for Android located here: `./Sources/AndroidExport/Resources`\nCustom Stencil templates must have the following names:\n- colors.xml.stencil\n- Colors.kt.stencil\n- Icons.kt.stencil\n- typography.xml.stencil\n- Typography.kt.stencil\n\n### Exporting Typography\n\n#### iOS\n1. Add a custom font to the Xcode project. Drag \u0026 drop font file to the Xcode project, set target membership, and add font file name in the Info.plist file. [See developer documentation for more info.](https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app)\u003cbr\u003e\u003cimg src=\"images/fonts.png\" width=\"400\" /\u003e\n2. Run `figma-export typography` to export text styles\n3. Use generated fonts and labels in your code. E.g. `button.titleLabel?.font = UIFont.body()`, `let label = HeaderLabel()`.\n\n#### Android\n1. Place font file under the `res` directory of your module\n2. Run `figma-export typography` to export text styles\n3. Create a top level style as a parent for the generated styles. For example: \n```\n\u003cstyle name=\"FigmaExport.TextAppearance\" parent=\"Widget.AppCompat\"\u003e\n\u003c/style\u003e\n```\n4. Use the generated styles in your code\n\n## Design requirements\n\nIf a color, icon or image is unique for iOS or Android platform, it should contains \"ios\" or \"android\" word in the description field in the properties. If a color, icon or image is used only by the designer, and it should not be exported, the word \"none\" should be specified in the description field.\n\nIf an icon supports RTL, it should contains \"rtl\" word in the description field in the properties.\n\n**Styles and Components must be published to a Team Library.**\n\n### For colors\n\nFor `figma-export colors`\n\nBy default, if you support dark mode your Figma project must contains two files. One should contains a dark color palette, and the another light color palette. If you would like to specify light and dark colors in the same file, you can do so with the `useSingleFile` configuration option. You can then denote dark mode colors by adding a suffix like `_dark`. The suffix is also configurable. See [CONFIG.md](CONFIG.md) for more information in the colors section.\n\nIf you support high contrast mode without dark mode your Figma project must contains two files. One should contains a high contrast color palette, and the another light color palette. If you would like to specify light and high contrast colors in the same file, you can do so with the `useSingleFile` configuration option. You can then denote high contrast mode colors by adding a suffix like `_lightHC`. The suffix is also configurable. See [CONFIG.md](CONFIG.md) for more information in the colors section.\n\nIf you support high contrast mode with dark mode your Figma project must contains four files. Should be like this: light, dark, high contrast light, high contrast dark. If you would like to specify colors in the same file, you can do so with the `useSingleFile` configuration option. You can then denote high contrast mode colors by adding a suffix like `_lightHC` for light and `_darkHC` for dark high contrast colors. The suffix is also configurable. See [CONFIG.md](CONFIG.md) for more information in the colors section.\n\nThe light color palette may contain more colors than the dark or high light color palette wherein the dark color palette may contain more colors than the high dark color palette. If a light-only color is present, it will be considered as universal color for the iOS color palette. Names of the dark, high light and high dark colors must match the light colors.\n\nExample\n\n| File                                       | Styles                                       |\n|--------------------------------------------|----------------------------------------------|\n| \u003cimg src=\"images/dark.png\" width=\"352\" /\u003e  | \u003cimg src=\"images/dark_c.png\" width=\"200\" /\u003e  |\n| \u003cimg src=\"images/light.png\" width=\"352\" /\u003e | \u003cimg src=\"images/light_c.png\" width=\"200\" /\u003e |\n\n### For variables\n\nFor `figma-export colors`\n\n**Important, the [API](https://www.figma.com/developers/api#variables) for working with color variables in Figma is still in `Beta` stage, so something may break at any time.**\n\n**Important, in [figma-export.yaml](CONFIG.md) use either `colors` or `variablesColors`.**\n\nWith the introduction of color variables in Figma, you can use it instead of color styles. Color variables can be used in figma-export, for this in [figma-export.yaml](CONFIG.md) you need to use the `variablesColors` option instead of `colors`.\n\nThe value of variables can be either the final color value or another variable. For example, the `Primary` variable can contain the value `#FFFFFF`, and the `Secondary` variable can contain the value `Pand/90`. Figma-export can work with any depth of variable nesting. You can specify the `primitivesModeName` parameter to indicate the mode for the final table with your primitives, if the parameter is not specified, the default value will be used.\n\nExample:\n\n\u003cimg src=\"images/figma_colors_tokens.png\" width=\"1024\" /\u003e\n\n1. tokensCollectionName - the name of the variable collection\n2. lightModeName - the name of the color variable column for the light theme\n3. darkModeName - the name of the color variable column for the dark theme\n4. lightHCModeName - the name of the color variable column for the light theme with high contrast\n5. darkHCModeName - the name of the color variable column for the dark theme with high contrast\n6. A variable that has a local value\n7. A variable that refers to another variable in a different file\n\n\u003cimg src=\"images/figma_colors_primitives.png\" width=\"352\" /\u003e\n\n1. primitivesModeName - the name of the variable column, if the value in [figma-export.yaml](CONFIG.md) is not specified, the default value will be used\n2. A variable that has a local value\n\nSee [CONFIG.md](CONFIG.md) for more information in the `variablesColors` section.\n\n### For icons\n\nFor `figma-export icons`\n\nBy default, your Figma file should contains a frame with `Icons` name which contains components for each icon. You may change a frame name in a [CONFIG.md](CONFIG.md) file by setting `common.icons.figmaFrameName` property.\nIf you support dark mode and want separate icons for dark mode, Figma project must contains two files. One should contains a dark icons, and another light icons. If you would like to have light and dark icons in the same file, you can do so with the `useSingleFile` configuration option. You can then denote dark mode icons by adding a suffix like `_dark`. The suffix is also configurable. See [CONFIG.md](CONFIG.md) for more information in the icons section.\n\n### For images\n\nFor `figma-export images`\n\nYour Figma file should contains a frame with `Illustrations` name which contains components for each illustration. You may change a frame name in a [CONFIG.md](CONFIG.md) file by setting `common.images.figmaFrameName` property.\n\nIf you support dark mode you must have two Figma files. The rules for these two files follow the same rules as described above for colors. But If you would like to specify light and dark illustrations in the same file, you can do so with the `useSingleFile` configuration option. You can then denote dark mode illustrations by adding a suffix like `_dark`. The suffix is also configurable. See [CONFIG.md](CONFIG.md) for more information in the illustrations section.\n\nIf you want to specify image variants for different devices (iPhone, iPad, Mac etc.), add an extra `~` mark with idiom name. For example add `~ipad` postfix:\n\n\u003cimg src=\"images/ios_image_idiom_figma.png\"/\u003e\n\n### For typography\n\nFor `figma-export typography`.\n\nYour Figma file must contains Text Styles.\n\n#### Dynamic Type\nIt is recommended to support [Dynamic Type](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/#dynamic-type-sizes). Dynamic Type provides additional flexibility by letting readers choose their preferred text size.\n\nIf you want to support Dynamic Type you should specify iOS native text style for your custom text styles in the description field of Text Style. Available iOS native text styles you can find on Human Interface Guidlines page in [Typography/Dynamic Type Sizes](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/#dynamic-type-sizes).\n\nFor example: You have `header` text style with 20 pt font size. Native iOS text style that matches is \"Title 3\". In the description field of your `header` text style you should specify \"Title 3\".\n\nAdvice: Font in Tab Bar and standard Navigation Bar must not support Dynamic Type.\n\n## Example project\n\nExample iOS projects, Android projects and example Figma files see in the [Examples folder](./Examples)\n\n## Contributing\n\nWe'd love to accept your pull requests to this project.\n\n## License\n\nfigma-export is released under the MIT license. [See LICENSE](./LICENSE) for details.\n\n## Feedback\n\nIf you have any issues with the FigmaExport or you want some new features feel free to [create an issue](https://github.com/RedMadRobot/figma-export/issues/new), [open a discussion](https://github.com/RedMadRobot/figma-export/discussions/new) or contact me.\n\n## Authors\n\nDaniil Subbotin - mail@subdan.ru\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredmadrobot%2Ffigma-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredmadrobot%2Ffigma-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredmadrobot%2Ffigma-export/lists"}