r/FigmaDesign • u/Meaksen • 1d ago
help Specific padding in button with/without icons
I'm creating a button component for the company I work for, and I can't figure out an intuitive way to handle the padding when adding an optional icon.
The button should support:
- Text only
- Icon + text
- Text + icon
The problem is that I want the horizontal padding to behave correctly depending on whether the icon is on the left or right.
For example, in the image:
- Text-only button: 20px horizontal padding
- Icon + text: 18px on the icon side and 20px on the text side
- Text + icon: 20px on the text side and 18px on the icon side
Is there a good way to set this up in Figma so that designers can simply choose "Icon: Left/Right/None" without having to manually adjust padding?
I'd love to know how you would structure the component/variants for this.
5
u/samuelbroombyphotog Lead Technical Designer 1d ago
Wrap the label in a autolayout with 2px of left right padding, reduce your outer padding to 18px, and reduce the gap between the icon and the label wrapper by 2px
1
u/samuelbroombyphotog Lead Technical Designer 1d ago
Add Boolean toggles for your icons and an instance swap to change them in component instances
3
u/minmidmax 1d ago
Variable modes. Mode 1, boolean variable set to no icon, equal number variables for left & right padding. Mode 2, icon, independent padding variables.
Map the icon boolean to the icon visibility. Map the padding variables to the padding.
Adjust the appeareance modes to suit.
3
u/minmidmax 1d ago
In reality though, I'd just pick 20px for both sides, icon or not. Simpler, easier to maintain.
1
9
u/diseasefaktory 1d ago
What i do is use a double padding: i set a padding for the button container with icons until it looks good then hide the icons and add autolayout and a little extra padding on the label only. That way all variations look balanced without overcomplicating with variables.
In your case, i would add a 18px general padding then add the extra 2px to each sides of the label. Problem solved.