This feature is intended for frontend developers.
Scenes to be Used
- The team maintains their own Figma icon library and hopes that it can be recognized as the corresponding Icon component during the D2C process.
Step 1: Open the Plugin in the Figma Icon File
Icon marking can tag all icon components on a Figma page at once. Therefore, make sure all the icons are in the same file.
Open the plugin through the command method by entering "Semi" with a keyboard shortcut:
- Mac: ⌘ Command / or ⌘ Command P
- Windows: Control + / or Control + P
Step 2: Add Tags
After opening the plugin, select 【tag icon】. You can now implement the
metaDataFactorymethod in the code editing area. All icon components will be processed through this method.
After the code is finished editing, click "Start Marking". After marked all the icons, you will get the Icon component during the D2C process.
If you want to further recognize the color of the icon, see the content below.
Introduction to the MetaFactory Method
metaDataFactorymethod is responsible for converting Figma component information into R&D-side API data. The returned value
metaDatais tagged to the Figma component node, and will be consumed during the D2C process.
The three items in
props, are static data. The value of what is being marked is what will be obtained during the D2C process.
dynamicPropsfield is used to tag dynamic data, such as icon color. When using icons, the color of the icon is usually modified. However, at the time of tagging, it is impossible to determine the final color of the icon. Therefore, this part of information belongs to dynamic data. At this time, tagging needs to be done through the
For a more detailed introduction, see metaDataFactory Introduction.
Recognizing Icon Colors
In the layer structure of the icon, the color of the icon is determined by the
Vectorlayer. In the example code below, it is shown how to determine the color of the icon during the D2C process and copy it to the
If you want to know how to tag with
dynamicProps, see metaDataFactory Introduction.