Components save designers a lot of time. When it comes to prototyping, things are even easier with the advent of component states in Adobe XD and component variants in Figma. As it currently stands our converter is not able to convert Adobe XD states to Figma variants, but we've made sure that all components still stay in tact. Here's how it all works in detail:
First, let's establish what states are in Adobe XD and what component variants are in Figma.
What are XD components states?
XD has component states which are similar to Figma component variants. You can create one component that can have multiple states that respond to different inputs defined in XD’s Prototype Mode. For example, a button can have three states, default, hover and on-click.
Image source: https://www.toptal.com/
What are component variants in Figma?
Variants allow you to organize and group different versions of the same component. Usually, it's the same component with only changes in a value/property (e.g.: background color). In the example below, you can see a button that has 24 variants:
How are component states in Adobe XD converted to Figma?
All the different components states in Adobe XD are converted to individual components in Figma. At the moment, they are not converted as variants. Let's have an example to demonstrate how a typical conversion will work. Let's say we have an XD file with one component and two different states.
The component has a main (default state) and two other states, hover and toggle.
Go to xd2sketch.com
Upload this XD file and convert to Figma
Download the .fig file and import it into Figma
Here is how it turns out:
On the artboard where the component is used, it displays the default state.
The different states are converted as main components. They are available on the symbols page in Figma. Below is the "symbols" page in Figma with all the other states of this button component.
We are exploring solutions on how to add support for this. Ideally your component states in Adobe XD should become variants in Figma for easy prototyping.