You can control the spacing between elements in “Spacing between elements” in “Auto Layout” section on the sidebar. If you wrap multiple elements into an auto-layout frame, you can delegate auto-placement of elements to Figma. There’s a lot more to it, let me show you a little bit about what you can achieve with Auto Layout in Figma. This is pretty magical, and now I can carry on my UI designer journey. Time to duplicate the button instance and adjust the inner text. In my case, it is 10 20 that corresponds to 10px on the vertical axis and 20px on the horizontal one. Adding padding follows the same rules as the CSS paddin property. We can add a background colour and padding to it. The element is now wrapped in a fully customizable auto-layout frame. Let’s wrap it with an auto layout frame by clicking “Add auto layout” from the contextual menu or using keyboard shortcut ⇧ + A. 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. It lets you dynamically grow, shrink and reflow frames. Grow, shrink and reflow elements with Figma Auto Layoutįigma Auto Layout is a game-changer. Now my UI designer career is over, and I am going back to coding! 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. What just happened here?! After changing text, the rectangle didn’t adjust its size to reflect the text length. What’s the point of having a prototype with the same buttons? Let’s change the text inside them to reflect prototype requirements. Let’s group it using ⌘ + G keyboard shortcut and duplicate multiple times using ⌘ + D combination. One rectangle, a bit of text and the button is ready. Let’s build a quick prototype, literally just a few buttons.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |