Newly created Figma primitive button with variants are not loaded into Amplify Studio when synced with Figma URL

[kodimalarsakthivel]

Which Specific Feature is your question related to?

AWS Amplify Studio Sync UI Library with Figma components

Question

Newly created Figma primitive button with variants are not loaded into Amplify Studio when synced with Figma URL

Steps:

1. New set of buttons are created in Figma Primitives with multiple variants.

2. Created a new component X and used 2 variants of the newly created button

3. Sync Figma URL with AWS Amplify Studio in

4. The newly created component X is loaded in Amplify Studio.

Issue: The component X is having only the default version of the button on the Amplify, but we used different variants of the button.

At the same time, when I used the default Amplify Figma Kit (https://www.figma.com/file/hjRuNEMVN5zpJBwTlBqB5p/AWS-Amplify-UI-Kit-(Community)?node-id=588%3A617&t=yoriXQSR6unDoezL-0) , I have created a new component and used different variant buttons. When I sync this with Amplify studio its able to load the button with correct variant.

[scottyoung]

Hi @kodimalarsakthivel,

Thank you for reaching out with this issue. Can you try to run amplify pull for Newcomponent and load it in your browser? I'd like to see if the variants show up correctly in your React code. Thank you.

[kodimalarsakthivel]

Hello @scottyoung ,

Yes its working, the different variants are rendered when I use the component from Amplify on my react code base. But the text on the button is not rendered as it is from the figma file.

In the above screen I have Save and Cancel, but its always rendering Button, Button! this issue is still there!

[scottyoung]

Hi @kodimalarsakthivel,

Please make sure your variant property names match those listed in the Amplify Primitive section of the Figma UI Kit. For example, your variant property names can be variant, size, type, hasIcon. We currently don't support text override from Figma so we recommend creating a variant of type with variants like Save and Cancel that have the different button texts you are looking to render.

[ykethan]

Closing for now, we have made some improvements on it. Do reach out if you are still experiencing this issue.

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.