aws-amplify / aws-amplify/amplify-studio
Buttons with icons not exported correctly from Figma into Amplify Studio
- 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.
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
### 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
### Project Identifier
_No response_
### Additional information
_No response_
Contributor 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