Oombla DocsMenuoombla.com

Setting Up Variants for Components

Follow this method to export multiple variations of an icon under one component

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:

  1. Follow the specific naming scheme, and
  2. set a default.

Naming Rules

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 Arrow.

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 Default.

Below is a summary screenshot that shows a complete example of component variants in use:

Boolean Props

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 />: ↑

Variant Types

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.