Auto layout 2022 trên Figma
Auto Layout vs Constrain
- Auto Layout: thiết lập trên Parent
- Constrain: thiết lập frame con
- Vị trí
- Alignment (left-right, top-bottom)
- Kích thước
- width
- Space
- padding (left-right, top-bottom)
- space between
- Negative spacing
- • Absolute positioning
• Text baseline alignment
• Canvas controls
• And more!
Auto layout là tính năng tự sắp xếp các thành phần trong 1 frame
Tạo auto layout
- Frame các thành phần, Rclick > auto layout
- hoặc drag chọn rồi Rclick > auto layout trực tiếp lên các thành phần -- 1 frame sẽ tự động được tạo ra
auto layout align
jkl
auto layout distribute
jdhjgkf
di chuyển trong auto layout
Di chuyển bằng absolute position
Layout flow
Direction - Direction describes the way the auto layout frame will flow.
- Vertical: Add, remove, and reorder objects along the y-axis. For example: objects within a list, or posts within a newsfeed or timeline.
- Horizontal: Add, remove, and reorder objects along the x-axis. For example: a row of buttons, or icons in a mobile navigation menu.
- Wrap: Arrange objects in multiple rows and columns in a frame. Objects will flow horizontally and wrap to the next line. For example: photo galleries or a set of tags.
Nguồn: https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties
