Variant Update Notes

Figma component library update & consumption instructions

When do I need to migrate?

If the old design draft is no longer iterated, no changes are required. Using the new Semi Variants will not affect the old designs.
If the new design draft is copied from the original design draft, it is necessary to replace the Semi components in the design draft with the new Semi Variants.

How to replace?

Swap library

Use the Figma swap library function to replace the component library referenced by the current file with the latest Semi component library.
  • Step1: Find the old component library used in the current file
  • Step2: Click the swap button in the lower right corner to replace the old component in the current file with the new component
This function needs to manually check whether the style of the swapped component in the current file is consistent with the original one, and only the same component name will be swapped.

Manual Replacement

Manually replace the old Semi component in the draft with the new variant.
  • Step1: Select the instance node
  • Step2: Switch the current instance to the instance corresponding to the latest Variants of Semi through Swap Instance on the right panel
This function requires a manual check to see if the replaced style is consistent with the original.


New Variants have some visually invisible redundant layers

These layers exist on the DOM level. When drawing on the Figma layer, these layers need to occupy space and have not been removed yet.

The popup layer component only has the default size?

In order to avoid too many variants, we have filtered some component expansion and non-default size variants, and these updates hardly affect the use.
  • 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