Multiple assets that belong to the same family can be exported as a single component with variants. At the moment Export Code’s variant functionality does not run off Figma’s official variant API, but an update to this feature to do so is planned soon. In the meantime, all it takes to set up variants is a specific layer-naming scheme.
There are two main steps to setting up variants:
- Follow the specific naming scheme, and
- set a default.
The assets that you want to group into a single component must first all have the same leading name. For example, if you have a collection of arrow icons that you would like to collect into a single
Arrow component the layer names of each asset should begin with
Next, this component name is followed by a forward slash
/ (I surround the forward slash with spaces for readability’s sake but these are not required) which serves as a separator signal for the plugin.
Now anything that follows that slash is considered a variant. However, the variant will only be counted if it’s in the format of key: value. So for our example of the Arrow, it could look something like this:
Direction: Left. (The variants are case insenstive — the props are converted to camelCase by the plugin and the prop values to kebab-case, so in the Figma file it’s more about readability.)
Multiple variants can be added by separating each one with a forward slash. So an asset with multiple variants would look like this:
Arrow / Direction: Right / Type: Triangle.
Set a Default
Lastly, choose an asset to represent the default state for the component (it can be a copy of another asset, or unique) and name this layer
Arrow / Default. The pattern is ComponentName followed by a forward slash and then the keyword
Below is a summary screenshot that shows a complete example of component variants in use:
If you would like to create a component where the props are passed as single keywords rather than string values you can set up the variant layer names with True and False:
Arrow / Right: True Arrow / Left: True Arrow / Up: True
This would then output the code in such a way that would allow you to use the component like so:
<Arrow right />: → <Arrow left />: ← <Arrow up />: ↑
Note that variant props must be of the same type — currently you cannot have mixed props types. For example setting
Arrow / Right: True and
Arrow / Right: "No" will produce an error in the final code output.