Responsive Auto-Layout
Challenge
Design a card using Figma Auto-Layout so that it imitates responsive web functionality.
For the design, I looked for inspiration in booking platforms like Airbnb. I picked a location I've been (using my own photo), and threw some basic copy in as well as a few "features".
The order of steps I followed was crucial for working with Auto-Layout. In addition, some other nuances had to be accounted for to have this work properly.
-
Create CTA button, Info Block, and Feature Tags
-
Set each in its own auto-layout (putting tags into Wrap)​ (See 2a.)
-
Set all 3 blocks into another auto-layout
-
Create auto-layout and frame to encompass both image and 3-element layout block, add fill and corners and set to Wrap (See 4a.)
-
This kicks the design to landscape​
-
-
Add minimum and maximum width individually to the image and block. (See 5a.)
-
The care here is so when collapsing the card, it has boundaries, exactly like a responsive web design​
-
-
Drag back and forth and enjoy!​​
2a.
4a.
5a.
