FROM ME THIS WEEK
Room to Play
Room to play and experiment
Research is still where I come alive. Give me a new Figma feature to poke at and I'll lose hours happily.
Everything after that, I started optimizing for speed instead of joy. Somewhere around June, I noticed I couldn't remember the last time I opened Figma just to play, no deadline, no plan attached.
This video still got my full care. It's built to go beyond basics, useful whether you're new to auto layout or you've used it for years.
One more video left in this series. After that, I want to rebuild some space to just explore again.
LEARN DESIGN
Build a Responsive Reflowing Component
Learn to build a self-reflowing Figma component across breakpoints
thumbnail of responsive component design
🎁 Grab your starter file and follow along!
Video Tutorial is linked below.
Step 0 - Catch Up the Progress
If you are very new to auto layout or not familiar with how to work with grid layout (relatively new feature) in Figma, I highly recommend you read the previous issue first.
Read it here: Responsive Editorial Grid or Watch the video on YouTube
Step 1 - the Base & Component
Frame the section, add auto layout + a 3-col grid.
Offset the tag with absolute positioning (⌃+drag)
Use Suggest Auto Layout to draft the card.
Turn it into a component
Make the component flow
Step 2 – Lock the Width
Duplicate the component 8x, use "Replace content" for real data.
Set the grid gap to 48px
Lock a max width on the content frame at your breakpoint.
Center the section.
set max width to current width
Step 3 – Make the Grid Wrap
A 3-col grid can't wrap. A horizontal stack can.
Set a min width on the main component (cascades to every instance)
Switch the content frame to a wrapping horizontal stack. Now it collapses.
Responsive wrapping
Step 4 – Flip the Component’s Layout Direction
Find the exact viewport where it drops to 1 item per row.
Switch that inner container to horizontal, turn on wrap
Set the children's min width to (container width minus gap) ÷ 2
It circle back to vertical in a even smaller viewport
Step 6 – Tada!
Stretch the viewport from 1440 all the way down. The grid wraps, then the component itself flips layout direction on its own.
No manual breakpoints anywhere. This is what a truly responsive component actually looks like.
Final result
Watch on Youtube
Like and share the video.
Leave a comment if you got any questions!
WHAT’S COMING NEXT
Build a Responsive Website with a CMS
thumbnail of responsive cms site
One last thing before you head back to your desk.
Next up, we take this exact component and put it on a real website. I'm walking through Figma Sites: setting up a CMS so real content flows into the grid automatically, adding breakpoints that match what we built here, and fixing a layout bug that only shows up once the site is actually live.
It's the part where design stops being theoretical. See you there.
Thanks for reading and spending a bit of your day with me.
If you want to keep up with more behind-the-scenes thoughts or small design notes I don’t always send by email, feel free to connect with me on LinkedIn.
Would love to have you there:
See you in the next email.
MengChi