Using Figma Variants from React Amplify project

Question

I was able to override props of FAQItem component present in AWS Amplify UI Kit as per amplify documentation

I now wish to create a variant of FAQItem in Figma and use it in my amplify app. The intent is to learn how to use figma variants from amplify. To achieve this -

I created a variant of FAQItem in Figma by clicking on "Add new Variant". A new variant with name "Variant2" was created. I changed the Title of variant2 FAQItem so that it visually appears different from the Default variant.

I synced the Figma file with my amplify project followed by amplify pull. Below snippet shows shows how the FAQItem variant was used in React app.

import {FAQItem} from './ui-components'
...
...                
<FAQItem  property1= "Variant2" />

However this is not working and it renders the default variant.
What would be the correct way to render FAQItem variant ?

Answer 1

Hello The same is happening to me, I tested with the default HeroLayout1 because the variant came with the figma template but is only displaying the default variant (Light) instead of the dark one.

import { withAuthenticator } from "@aws-amplify/ui-react";
import Amplify from 'aws-amplify';
import { AmplifyProvider } from "@aws-amplify/ui-react";
import awsconfig from '../src/aws-exports';
import "@aws-amplify/ui-react/styles.css";

Amplify.configure(awsconfig);

//Custom UI Components
import { HeroLayout1 } from '../src/ui-components';

function Home() {
  return (
    <AmplifyProvider>
      <HeroLayout1 mode='Dark' />
    </AmplifyProvider>
  )
}

export default withAuthenticator(Home);