Auto Layout Tips & Hacks Free Figma Template

Auto Layout Tips & Hacks - Free Figma Template

Exploring Auto Layout possibilities in Figma. Like and duplicate to check some interesting examples, remix if you have your own ideas to share!

Share this file: https://figma.fun/nlzApu

Contents

 Button, button with icon, button with underline, button with min-width (minimum width)

 Simple menu tabs

Resizable floating tooltips with arrows in all directions

 Input fields in Material Design style with label and transparent opening in the input outline for this label

 Explanation of the 0x0 frame trick

Crossed out and strikethrough text

Cards with various absolute-positioned elements

 A couple of hacks for complex stretchable card design

 Simple stretchable card similar to the one demonstrated by Figma on the new Auto Layout feature launch (Feb. 6)

Skewed shape buttons using SkewDat plugin

45 square, circle and oval shapes that change size based on the contents

Custom shape buttons with editable shapes on all four sides and two sides

 3D extruded button with stroke

Bidirectional hugging list where elements fit to size but also resize the container

How to create zero-frames correctly: https://youtu.be/hnPIpkvDxjc?t=75

, Auto Layout , , : https://www.youtube.com/watch?v=R4Wq-YVWEvc

This freebie Auto Layout Tips & Hacks was originally shared by Gleb on this url.

The category for this freebie is Uncategorized. Tools used to create this freebie are Figma and Adobe XD.

Helpful hint: If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Before using it for a commerical project, you can ask Gleb nicely and they will probably allow you to use it.