How to implement Figma component variants in AWS Amplify React application

Other Questions Figma
1

I’m working on a React project with AWS Amplify and trying to figure out how to properly use Figma variants. I successfully modified the HelpSection component from the Amplify UI library by overriding its properties following the standard documentation approach.

Now I want to take it further and create a custom variant of this HelpSection component directly in Figma, then use that variant in my React app. My goal is to understand the workflow for implementing Figma variants with Amplify.

Here’s what I did in Figma: I selected the HelpSection component and added a new variant by clicking the variant option. This created “Variant2” automatically. I modified the heading text in this new variant so it looks different from the original version.

After syncing my Figma design with the Amplify project and running the pull command, I tried using the variant in my React component like this:

import {HelpSection} from './ui-components'

function MyPage() {
  return (
    <div>
      <HelpSection variant="Variant2" />
    </div>
  )
}

The problem is that only the default variant shows up, not my custom one. What’s the proper way to reference and display Figma variants in an Amplify React project?

2

This happens because Amplify doesn’t create a generic ‘variant’ prop - it uses the actual property names from your Figma variants. Check your ui-components folder to see what props got generated. If you named your variant property ‘Type’ or ‘Style’ in Figma, that’s what you’ll use instead of ‘variant’. I ran into this exact thing - kept trying variant="primary" when it was actually type="primary" based on my Figma naming. Also, pull the latest changes after creating variants since the sync can take a bit to finish.

3

This happens because Amplify uses your Figma variant property name as the actual React prop name - not a generic ‘variant’ prop. Check your generated component file in the ui-components directory. Look at the TypeScript interface or PropTypes to see exactly what props are available. The prop name will match whatever you named the variant property in Figma’s variant panel. Make sure your Figma variant values match exactly what you’re passing as props, including capitalization. If Amplify generated different casing than you expected, you’ll need to use the exact string from the generated code. Figma’s automatic naming doesn’t always translate cleanly to React conventions.

4

check ur variant property name in figma. amplify creates props based on what u named the variant group - its not always just ‘variant’. if u named it ‘version’ or ‘state’, then that’s ur prop name. also, make sure ‘Variant2’ matches exactly - caps matter!

5

I encountered a similar issue with Figma variants in Amplify. The key is to ensure that the prop names in your React component match the names of the variant properties you defined in Figma. Instead of a generic ‘variant’ prop, Amplify uses the exact name you assigned. Be sure to select the whole component set when setting up your properties in Figma. After making changes, allow some time for the synchronization process before pulling the latest updates with Amplify. Precision is crucial; any discrepancies, including spacing or capitalization, can lead to the custom variant not appearing as expected.