I have a main component called “button” and the variants. The main component has horizontal layout icon on the right and left side and the text in the middle. i would like to create a variant with vertical layout where the icon is above or under the text.
Hey @Catalin_Andrei_Muresan , thank you for reaching out!
Have you tried creating the variant and then changing the direction from horizontal to vertical? The direction describes the way the auto layout frame will flow. You can find more information here: Layout Flow.
I created a small screen recording where I changed the layout direction of a component variant. I was able to create what you’ve requested “the icon is above or under the text”
Please let me know if this works for you. It this does not solve your issue, you can share your file with us and add support-share@figma.com as an editor (this won’t affect your billing at all) and I can take a look at it.
Thanks,
Gayani.
I’d make a content sub component with two layout options. This way I simplify my main component. Additionally you can expose nested sub component to make it easier to use.
As far as I can see it will make your button component to have 2 times less variants.