Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buttons with icons not exported correctly from Figma into Amplify Studio #745

Open
4 tasks done
olliethedev opened this issue Dec 1, 2022 · 5 comments
Open
4 tasks done
Labels
bug An issue which has been identified as a bug figma Issues related to figma import studio-ui An issue that needs to be tracked by Studio Console team

Comments

@olliethedev
Copy link

Before opening, please confirm:

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

@olliethedev olliethedev added the pending-triage An issue that is pending triage label Dec 1, 2022
@ajessu ajessu added the studio-ui An issue that needs to be tracked by Studio Console team label Dec 1, 2022
@Milan-Shah Milan-Shah added the figma Issues related to figma import label Dec 2, 2022
@ykethan
Copy link
Contributor

ykethan commented Dec 7, 2022

Hey @olliethedev, thank you for reaching out. The icon buttons from the AWS-Amplify-UI-Kit Figma project have been deprecated. We do not currently support importing buttons with icons for example svg inside a primitive. We will work on cleaning up the deprecated icons from the Figma UI kit. Thank you for reporting this.

@ykethan ykethan added the bug An issue which has been identified as a bug label Dec 7, 2022
@hein-j hein-j removed the pending-triage An issue that is pending triage label Dec 7, 2022
@noma6386-duplicate
Copy link

Wasted 3 days for this.
I think It needs it very much.
Most of mobile buttons with an icon or only an icon.

@JimW
Copy link

JimW commented May 2, 2023

Yea, I've wasted too much time on this as well. I think I'm done with all this..

@vtreanor
Copy link

Its now Jan 2024 and the comment from Dec 2022 "We will work on cleaning up the deprecated icons from the Figma UI kit" is still not implemented.
I too wasted time on this.

@MitchellNeill
Copy link

I've also found this confusing, any updates on when they will be removed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An issue which has been identified as a bug figma Issues related to figma import studio-ui An issue that needs to be tracked by Studio Console team
Projects
None yet
Development

No branches or pull requests

9 participants