Working with Ant Design
Learn how to use Ant Design inside your design system.
Tagging an Ant Design element
To tag an Ant Design element:
-
Select the Ant Design element from your Figma file.
-
Choose the tag from the Locofy plugin. Available tags will be highlighted based on your selection.
![](/docs/image-46@2x.png)
- Select the tag and choose Ant Design as the UI library.
![](/docs/image-441@2x.png)
- Select a Variation: Choose the variation of the element you are using
![](/docs/image-3@2x.png)
- Edit Properties: You can further define how this element should work.
![](/docs/image-5@2x.png)
-
Check the interactive preview: Play with the interactive preview to verify your element is correctly set up
-
Click Done.
Locofy provides an interactive preview for you to visualize your element while tagging.
![](/docs/image-47@2x.png)
Any changes made to your properties settings will update and refresh the interactive preview.
Properties auto-detection
When tagging your Ant Design element, Locofy reads your Figma design to automatically populate properties for you.
![](/docs/image-30@2x.png)
Change or cancel Variation
You can switch to a different variation or cancel the variation by clicking the ‘Change’ or ‘Cancel’ button respectively.
![](/docs/image-451@2x.png)
Theming
Customizable theming support for Ant Design is coming soon.
Ant Design Version
Ant Design package will be imported as a dependency for the generated code base.
- antd: v4.17.4