aws-amplify / aws-amplify/amplify-studio

Buttons with icons not exported correctly from Figma into Amplify Studio

Open
#745 5 comments 0 reactions 0 assignees View on GitHub
bug figma studio-ui
Dominant language
No language data
Stars
135
Forks
32
PR merge metrics
No merged PRs in 30d

Description

### Before opening, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-adminui/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-adminui/blob/main/CONTRIBUTING.md#bug-reports).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
- [X] I have removed any sensitive information from my code snippets and submission.

### App Id

d1eiid2wdqi1eb

### Region

us-east-1

### Environment name

staging

### Figma File Version (if applicable)

1.2.0

### Amplify CLI Version

10.5.1

### If applicable, what version of Node.js are you using?

v19.1.0

### What operating system are you using?

Mac

### Browser type?

Google Chrome

### Describe the bug

I am having issues with importing Figma designs with Buttons that have Icons defined.

Screen Shot 2022-11-30 at 1 20 22 PM
Screen Shot 2022-11-30 at 1 21 00 PM
If I use Icon variant built into the Button primitive, the Button is rendered in React but no children are present, and if I change the Icon primitive to my own svg in figma, then the component renders as

instead of Button.

### Expected behavior

Figma design should correctly import and a Element should render with correct component.

### Reproduction steps

1. Clone AWS-Amplify-UI-Kit Figma project.
2. In Figma create a button set the Button Icon to any Icon variant.
3. Import into Amplify Studio
4. The Icon will be missing if using Icon primitve.

===or====

1. Clone AWS-Amplify-UI-Kit Figma project.
2. In Figma create a button set the Button Icon to a custom SVG image.
3. Import into Amplify Studio
4. The button will be a

if using a custom svg for icon.

### Project Identifier

_No response_

### Additional information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue through the Amplify Studio Figma import flow using the AWS-Amplify-UI-Kit Figma project, testing both a built-in Icon variant and a custom SVG. Compare the generated React output with the expected Button and Icon elements; done means both icon cases import as a Button with the correct Icon component.

Written by the indexing model from the issue text.

Assessment

Tech stack
figma, react
Domain
design, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.