It allows you to specify whether an element should 'Hug its contents' or 'Fill the container it's in' when resized.

This is commonly the source of the issue if your text wraps unexpectedly or elements are cut off unexpectedly. To ensure your components resize correctly when elements get assigned with real-world data, use Figma's 'Constraints' feature. Use 'Hug contents' and 'Fill container' to ensure components resize correctly 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. Clicking on this will allow you to upload your own. At the bottom of this menu, there is an Add fonts link. From here, you will see a dropdown menu of all the available fonts. If the variants don't have the same child elements, then Amplify Studio will not be able to import the component. Yes, you can add custom fonts to Figma To do so, simply click on the Text layer in the left sidebar and then click on the Aa icon in the top toolbar. The Figma variants are required to have the same component structure. Figma variants must have the same child elements For example, if you want to add a hover effect to a button, you need to override the component behavior in code instead of creating a hover variant in Figma. 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)Īmplify Studio currently doesn't support Figma to React code conversion of UI state. Think of Figma's Auto layout as 'Flexboxes' ( display: flex) in CSS. Try to use Figma Auto layout whenever possibleįigma 'Auto layout' can make a component significantly more responsive than using a fixed position for elements. Review the Adding Fonts documentation from the Create React App on how to configure this. To work around this, you can include the font like you would usually do yourself in your React app. If any text is using a font that you dont have access to, missing font warnings will appear in the file.

When youre in a Figma design file, Figma checks to see if you have access to the fonts being used in that file. 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īy default, Amplify Studio doesn't automatically export the font from the Figma file and download it as part of your src/ui-components/ folder. This includes default fonts provided by Figma, fonts installed on your computer or device, and shared fonts if youre part of a Figma organization. If you only have a Figma 'frame', Studio will ignore it because frames tend to be used to lay out a set of components. Make sure to mark frames as components in FigmaĪmplify Studio only converts Figma components. 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.

Figma custom fonts