Grow, shrink and reflow elements with Figma Auto Layout
source link: https://pawelgrzybek.com/grow-shrink-and-reflow-elements-with-figma-auto-layout/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Grow, shrink and reflow elements with Figma Auto Layout
Published: 2020.12.22 | 2 minutes read
Let’s build a quick prototype, literally just a few buttons. One rectangle, a bit of text and the button is ready. Easy-peasy!
Let’s group it using ⌘ + G keyboard shortcut and duplicate multiple times using ⌘ + D combination. Let’s go!
What’s the point of having a prototype with the same buttons? Let’s change the text inside them to reflect prototype requirements.
What just happened here?! After changing text, the rectangle didn’t adjust its size to reflect the text length. There’s no chance that I’m going to do it manually! That seems like a tedious task for a few buttons, so imagine doing this with hundreds of them.
Now my UI designer career is over, and I am going back to coding!
Wait a sec bro! There is hope.
Grow, shrink and reflow elements with Figma Auto Layout #
Figma Auto Layout is a game-changer. It lets you dynamically grow, shrink and reflow frames. Adjust the size of a button based on a text length — no problem! Reflow elements when new items are added to the list — easy! Let’s recreate my prototype using this feature.
Text is all we need for now. Let’s wrap it with an auto layout frame by clicking “Add auto layout” from the contextual menu or using keyboard shortcut ⇧ + A. The element is now wrapped in a fully customizable auto-layout frame. We can add a background colour and padding to it. Adding padding follows the same rules as the CSS paddin
property. In my case, it is 10 20
that corresponds to 10px on the vertical axis and 20px on the horizontal one. Nice!
Time to duplicate the button instance and adjust the inner text. Look!
This is pretty magical, and now I can carry on my UI designer journey. There’s a lot more to it, let me show you a little bit about what you can achieve with Auto Layout in Figma.
Auto-placement and reflow #
If you wrap multiple elements into an auto-layout frame, you can delegate auto-placement of elements to Figma. You can control the spacing between elements in “Spacing between elements” in “Auto Layout” section on the sidebar. You can also control the direction of auto-placement. The most mind-blowing feature is the ability to reorder elements using drag & drop or using arrows on the keyboard.
That’s it for today. If you think this isn’t cool, I don’t know what is. Hopefully, you found it helpful and exciting. Until next time, stay creative 👋
If you liked this article, please share it on Twitter.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK