![]() ![]() If 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. android.path - Relative or absolute path to the main/res folder including it.- Images name style: camelCase or snake_case.- Name of the folder inside Assets.xcassets where images will be exported. ![]() - An array of icon names that will supports Preseve Vecotor Data.- Icon name style: camelCase or snake_case.- Name of the folder inside Assets.xcassets where icons will be exported.- Color name style: camelCase or snake_case.- Relative or absolute path to Color.swift file.- Name of the folder inside Assets.xcassets where colors will be exported.ios.xcassetsPath - Relative or absolute path to directory Assets.xcassets where to export colors, icons and images.figma.darkFileId - (Optional) Id of the file containing dark color palette and dark images.The file id will be present in the URL after the word file and before the file name. figma.lightFileId - Id of the file containing light color palette and dark images.The project id will be present in the URL after the word project and before the project name. To obtain a project id, navigate to a project page. The team id will be present in the URL after the word team and before your team name. To obtain a team id, navigate to a team page of a team you are a part of. If you use Fastlane just add the following line to fastlane/.env file Generate a personal Access Token through your user profile page or on Figma API documentation website. This token gives you access to the Figma API. You must provide Figma personal access token via environment variables. # Name of the folder inside Assets.xcassets where to place images (.imageset directories) assetsFolder: Illustrations # Image name style: camelCase or snake_case nameStyle: camelCase # Android export parameters android: ic24TabProfile # Parameters for exporting images images: # Name of the folder inside Assets.xcassets where to place icons (.imageset directories) assetsFolder: Icons # Icon name style: camelCase or snake_case nameStyle: camelCase # Enable Preserve Vector Data for specified icons preservesVectorRepresentation: UIColor.backgroundPrimary) colorSwift: "./Sources/Presentation/Common/Color.swift " # Color name style: camelCase or snake_case nameStyle: camelCase # Parameters for exporting icons icons: # Name of the folder inside Assets.xcassets where to place colors (.colorset directories) assetsFolder: Colors # Path to Color.swift file where to export colors for accessing colors from the code (e.g. # Path to the Assets.xcassets directory xcassetsPath: "./Resources/Assets.xcassets " # Parameters for exporting colors colors: # RegExp pattern for image name validation before exporting nameValidateRegexp: '^(img)_( )$ ' # RegExp pattern for: img_image_name # iOS export parameters ios: # RegExp pattern for icon name validation before exporting nameValidateRegexp: '^(ic)_(\d\d)_( )$ ' # RegExp pattern for: ic_24_icon_name, ic_24_icon images: ![]() # RegExp pattern for color name validation before exporting nameValidateRegexp: '^ $ ' # RegExp pattern for: background, background_primary, widget_primary_background icons: I gave my dark Navbar a value of "On", and my Dark variant a value of "Off"ĭone, now copy your component, and you will be able to switch variants immediately as you work on your design.TeamId: '717334107655123456 ' projectId: '3143123 ' lightFileId: shPilWnVdJfo10YFo12345 darkFileId: KfF6DnJTWHGZzC9Nm12345 # Common export parameters common: Figma auto generate value names, but it is a good practice to give proper names to your components. Next step is to select each one of my variants and give it a proper value. Each property can hold many values, hence many variants.įor our case, I only needed one property called Dark mode, So I renamed my property to dark mode. Now take your new variant and apply your design changes on it.įigma organizes the components using properties and values. This will generate a new variant of your main component. To add a variant to my component, Select it, then click on add a variant on the right bar of the screen. To illustrate this, I created a simple navigation component. If you prefer to use a component driven approach to your design projects, then you will like need to use variants and swap them across your design. Variants is one of the best features in Figma. ![]()
0 Comments
Leave a Reply. |