TL;DR Give me a code!
Variants is an amazing new feature of Figma, which lets you combine variations of the same component — simplifying the asset panel and mapping components more closely to code.
We were waiting for their launch since the announcement and started the implementation of Variants support in react-figma right after the Figma API Version 1, Update 18 release. Figma API got several new APIs:
- Type ComponentSetNode — A component set contains the variants of a component.
- combineAsVariants method — Creates a new ComponentSetNode by combining all the nodes in nodes, which should all have type ComponentNode.
- importComponentSetByKeyAsync method.
ComponentSet
component
We added a new component for Figma Variants support: the ComponentSet
. It’s accepts a set of Component
nodes as the children
prop. We created an example with a button that has three variants: primary, dangerous, and secondary:
<ComponentSet name="Button">
<Component name="variant=Primary">
<PrimaryButton text="Primary" />
</Component>
<Component name="variant=Dangerous">
<DangerousButton text="Dangerous" />
</Component>
<Component name="variant=Secondary">
<SecondaryButton text="Secondary" />
</Component>
</ComponentSet>
(see complete code here)
You can try the result of the rendering here or watch a demo gif:
Conclusion
Variants are a really useful feature, especially for design systems creation. So, enjoy it with react-figma too!
Happy coding! 🙌
Thanks
- Yaroslav Losev @losyear - fact checking, editing
- Lera Lesik @Lera_Lesik - cover image
Links
-
react-figma - A React renderer into Figma
- Figma variants support release.
- Figma variants support Pull Request.
- Bridging design and code with Variants
- Use the Inspect panel
- Creating and organizing Variants
- React Renderers: an Overview
- Introduction - Figma Developers
Top comments (0)