Micro-Projects

Responsive design in Figma with Auto-Layout
18 Oct 2023

· Content fills available space in card
· Card has set maximum and minimum widths like breakpoints
· Maximum of 2 lines of pills will be shown, as space shrinks, pills are hidden
· Body text on card is set to show only 6 lines, end of paragraph is truncated

When these cards are combined with auto-layout, they can behave responsive to the width of the page they are on.
· cards will grow to their max width in order to fill the page width
· when cards reach their max width, but there is still more space to fill, they will re-align and shrink to min width

· cards will shrink to their min width in order to fit the page width
· when cards in a row reach their min width, they will re-align vertically and grow to max width