Mark Icon Library

Use the plugin to tag icon libraries and achieve third-party icon library recognition in the D2C process.
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.
Marking icon libraries is similar to marking component libraries, but the difference is that icon marking supports marking all icons on a Figma page at once.


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
Open the Plugin

Step 2: Add Tags

After opening the plugin, select 【tag icon】. You can now implement the metaDataFactory method in the code editing area. All icon components will be processed through this method.
Add Tags
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

The metaDataFactory method is responsible for converting Figma component information into R&D-side API data. The returned value metaData is tagged to the Figma component node, and will be consumed during the D2C process.
The three items in metaData, packageName, componentName, and props, are static data. The value of what is being marked is what will be obtained during the D2C process.
The dynamicProps field 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 dynamicProps field.
For a more detailed introduction, see metaDataFactory Introduction.

Recognizing Icon Colors

Icon Layer Structure
In the layer structure of the icon, the color of the icon is determined by the Vector layer. 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 color API.
If you want to know how to tag with dynamicProps, see metaDataFactory Introduction.
  • Start
    • Introduction
    • Quick Start
    • Comparisons
    • Terms
    • FAQ
    • Changelog
  • Design to Code
    • Code Translation
    • Mark Component Library
    • Mark Icon Library
    • Mark Layer
    • Inspect
    • Transform plugin
    • Troubleshooting
    • Basic D2C logic
    • Supported Components
    • Global Settings
  • UI Kit
    • Import UI Kit
    • Create Variants
    • Design draft rules
    • Table Usage
    • Form Usage
    • Variant Update Notes
  • About
    • Contact Us
    • Road map
    • JSON Schema
    • Known issues