Using Figma Variants with react-figma

The original post

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.

Figma Variants, source:

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:

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 name="variant=Dangerous">
<DangerousButton text="Dangerous" />
<Component name="variant=Secondary">
<SecondaryButton text="Secondary" />

(see complete code here)

You can try the result of the rendering here or watch a demo gif:

Demo Gif


Variants are a really useful feature, especially for design systems creation. So, enjoy it with react-figma too!

Happy coding! πŸ™Œ



Switching to Docusaurus

React Figma website has switched to using Docusaurus v2. Docusaurus has many advantages over GitBook that used previously:

  • Better perfomance
  • Working as a single page application
  • Customization abilities
  • Syntax highlighting through Prism.js
  • Light/dark theme switching 😎

Also, Docusaurus developing fast, has awesome community and users.

Selection event handlers

Selection event handlers has supported at react-figma.


Code example:

const [checked, setChecked] = React.useState(false);
<Frame style={styles.frame}>
label="select me"
onSelectionEnter={() => setChecked(true)}
onSelectionLeave={() => setChecked(false)}
<Text style={styles.text}>{checked ? 'Checkbox selected' : 'Checkbox not selected'}</Text>
<Text style={styles.text}>{`Counter: ${counter}`}</Text>