export const meta = {
title: `Figma to Code best practices`,
description: `Constraints of Amplify Studio's Figma to React capabilities`,
};
We're constantly improving Amplify Studio to make Figma to React code conversion better but there are some constraints that need to be taken into account.
## Make sure to mark frames as components in Figma
Amplify Studio only converts Figma components. If you only have a Figma "frame", Studio will ignore it because frames tend to be used to layout a set of components.
Learn more about how Figma components work and how to create them with the video below from the Figma team:
## Fonts aren't automatically integrated
By default, Amplify Studio doesn't automatically export the font from the Figma file and download it as part of your `src/ui-components/` folder. To workaround this, you can include the font like you'd usually do yourself in your React app.
Review the [Adding Fonts](https://create-react-app.dev/docs/adding-images-fonts-and-files/) documentation from the Create React App on how to configure this.
## Try to use Figma Auto layout whenever possible
Figma "Auto layout" can make a component significantly more responsive than used fixed position of elements. Think of Figma's Auto layout as "Flexboxes" (`display: flex`) in CSS.
Learn more about how Figma's Auto layout works with the video below from the Figma team:
## Represent UI element states in code (hover, active)
Amplify Studio currently doesn't support Figma to React code conversion of UI state. For example, if you want to add a hover effect to a button, you need to [override the component behavior in code](/console/uibuilder/override/#set-hover-states-on-icons) instead of creating a hover variant in Figma.
## Figma variants must have the same child elements
The Figma variants are required to have the same component structure. If the variants don't have the same child elements, then Amplify Studio will not be able to import the component.
In the example below the "base" variant has the same child elements as the "small variant". You can still make changes to each individual element.
## Use "Hug contents" and "Fill container" to ensure components resize correctly
To ensure your components resize correctly when elements get assigned with real-world data, use Figma's "Constraints" feature. This is commonly the source of the issue if your text wraps unexpectedly or elements are cut-off unexpectedly. It allows you to specify whether an element should "Hug its contents" or "Fill the container its in" when resized.
Learn more about how Figma's Constraints works with the video below from the Figma team: