One of Figma's most powerful feature is Components. Components are the foundation of Design Systems and help designers stay organized. Our converter supports converting Components/Symbols from Adobe XD to Figma. In some cases it gets a bit tricky since Adobe XD allows users overwrite elements in ways that aren't possible in Figma. In this article we will explain why Components might not have been converted in your file.

Let’s say we have an XD file we want to convert to Figma that includes a Component with multiple elements:

Instances of the Component in the screenshot above will convert flawlessly if only the text and background color of the rectangle are changed (overridden).

Figma allows you to override the following properties of Component Instances:

  • Text properties, including font, weight, size, line height, letter spacing, and resizing

  • Fill or stroke of any layers, including the fill type, value, and opacity

  • Add, adjust, or remove any shadow or blur effects

  • Add, adjust, or remove layout grids

  • Swap nested instances of other Components, like icons

You can’t override:

  • The order, or z-index, of any layers within the Component Instance

  • Position of any layers within the Component, including items in an Auto Layout

  • Any constraints applied to the layers

  • The bounds of any text layers, but you can still change a text layer's resizing properties

You can however do all these overrides in XD. Having those differences in the designs tools is what makes it sometimes impossible to convert Component Instances from Adobe XD to Figma.

Here are some detailed examples:

Let’s say for the same Component we change the layout a bit and make the title text go behind the rectangle. See the screenshot below:

The z-index of the title text and position of the image has been overridden in this instance. Bear it in mind that Figma does not support overrides for these properties like XD does. I’ll go ahead and convert this file to show you how it turns out in Figma

You can see that the Component instance in XD that had z-index and position overrides becomes a group instead of remaining linked as a Component. The other Component remains linked since it was not overridden in invalid ways for Figma.

How can you fix this?

In some cases you may have to create new Components in XD. If the changes in the Component Instance are minimal then you might want to consider simply resetting the Component to its Main State. Component Instances that are in the Main State always get carried over when converting to Figma. After the conversion, you can make the Component overrides in Figma. To reset a component to it’s main state, simply right click the component and choose “Reset to Main State”

The nuances for supported and unsupported overrides for all design tools will be too much to outline here. A simple Google search will lead you to the documentation on how Components are handled in Adobe XD, Figma and Sketch.

One more thing... If you want to slightly adjust your design file and get it re-converted simply reach out to us over our Support Chat or refer to our help article here: https://help.magicul.io/en/articles/5578678-want-to-re-convert-an-updated-file

Did this answer your question?