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

[button] in Figma when adding a text button with icon, the alignment is off #408

Open
amyfourie opened this issue Oct 23, 2024 · 5 comments
Assignees
Labels
bug 🐛 Something doesn't work component: button This is the name of the generic UI component, not the React module! figma

Comments

@amyfourie
Copy link

amyfourie commented Oct 23, 2024

Steps to reproduce

Link to live example:

Steps:

  1. Add button to file
  2. Choose text variant
  3. Change to small and add icon (either way round)

Current behavior

image

Expected behavior

image

Context

I'm trying to use the latest version of the figma library to add a button to my design, it works in the previous version I was using.

Your environment

Software Version
Design file version v5.17.0
Design tool Figma
etc.

Search keywords: text button figma

@amyfourie amyfourie added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 23, 2024
@zannager zannager added the component: button This is the name of the generic UI component, not the React module! label Oct 23, 2024
@adrianmanea
Copy link
Collaborator

Hi, you are correct, the left icon seems to be a little off. Attaching a video on how to fix this in 30 seconds.

MUIF_5_17_BUTTON_BUG.mov

@amyfourie
Copy link
Author

amyfourie commented Oct 25, 2024 via email

@perchristian
Copy link

perchristian commented Nov 4, 2024

Not all icons are selected at multi edit because they are named differently: "Icon Left" VS "ChevronLeftFilled".
So if you first find and select all objects named "ChevronLeftFilled", rename them (Command + R) to "Icon Left", and then do the multi edit in the video, you should be fine.

(NB: The same procedure must be done to the right icons as well)

@amyfourie
Copy link
Author

Thank you, that is fixed now :)

@github-actions github-actions bot removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 4, 2024
@adrianmanea adrianmanea reopened this Nov 7, 2024
@adrianmanea adrianmanea added figma bug 🐛 Something doesn't work labels Nov 7, 2024
@mutlumehmet
Copy link

Just a cavia

Not all icons are selected at multi edit because they are named differently: "Icon Left" VS "ChevronLeftFilled". So if you first find and select all objects named "ChevronLeftFilled", rename them (Command + R) to "Icon Left", and then do the multi edit in the video, you should be fine.

(NB: The same procedure must be done to the right icons as well)

Thanks for that really helped, but there is just a caveat the renamed elements lost their instance swap properties. I had to reapply them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: button This is the name of the generic UI component, not the React module! figma
Projects
None yet
Development

No branches or pull requests

6 participants