AutoLayout dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. It behaves similar to Framer Stacks and the Anima Toolkit for Sketch. Creating a simple list 1. Wrap the list elements in a frame 2. Open the Auto Layout plugin, select the frame and enable the toggle ‘Layout frame’ 3. Change the direction to vertical and adjust spacing How to create an auto-reflowing To Do list 1. Create a text layer and a rectangle as checkbox next to it for the first todo item. 2. Wrap both elements in a frame ( ⌘ + ⌥ + G ) 3. Open AutoLayout and enable it for the frame. Set direction to horizontal and adjust padding/alignment to your liking. You can change the order by moving layers up and down in the layers sidebar. 4. With the frame selected, set Height to ‘Resize To Fit’ in AutoLayout which will automatically resize the frame when the text field gets longer 5. Duplicate the frame a few times below to create a list of todos 6. Wrap all todo items in a frame and enable AutoLayout, set the direction to vertical. You can adjust spacing between the items. 7. Try adding a linebreak in one of the todo items to make it larger. The items below will automatically move down to make room. The layout of the frame will update every second if either a child layer or the frame itself is selected. To update the layour, select a child layer or the frame while the plugin is open. AutoLayout is based on the Yoga implementation of Flexbox. Inspired by prior work from Scott Horsfall @scoh and Zachary Schiller @zacharyschiller
适用场景
AutoLayout 属于 开发 分类，适合希望用清晰结果驱动设计流程的团队。
关键信息
- 分类：开发
- 点赞：588
- 用户：39,380
- 定价模式：免费
发布者信息
创建者：Carlo Jörges。Figma 社区发布者：Carlo Jörges。
兼容性与支持
- 支持编辑器：design
- 发布时间：2024年11月25日
- 支持联系方式：carlo.joerges@gmail.com
安装前如何评估
查看 Figma 内最新更新说明，确认示例输出质量，并与下方相关插件做对比。