FROM ME THIS WEEK
Not an Ending
Not an ending
For months, finishing a video felt like relief, not pride. That was the red flag. Deciding to pause felt like the opposite. Lighter. Like being a kid again, knowing tomorrow is the field trip.
This isn't an ending. It's permission to be myself again, without a schedule attached. I don't know when I'll be back, but when I am, it'll be with something genuinely good.
That also means the Torn paper effect video remake I promised is on hold. I'll get to it when I have the bandwidth.
This last video is also about making something real: turning a Figma file into a live website. Thanks for being here. See you when there's something worth sharing.
LEARN DESIGN
Build a Responsive Website with a CMS
Learn how to bring a design into Figma Sites, and publish a real website.
thumbnail of responsive cms site
🎁 Grab your starter file and follow along!
Video Tutorial is linked below.
Step 0 - Catch up the progress
This week’s issue is a sequel of a previous one, if you are here new.
Read previous issue here: Responsive component design or Watch it on YouTube
Step 1 - Build a Phone Variant
Add second variant to the component for phone breakpoint
On that variant, strip every min width and switch back to a plain vertical stack
Make a vertical stacked phone variant
Step 2 – Set Up a Real CMS
Open Figma Sites, click the CMS icon, create a collection
Add fields matching your component: category, image, title.
Import data as CSV, or type it in by hand
upload cms
Step 3 – Connect It Live
Paste your design into a Sites page
Click connect on the collection, then click your component to link it
Set the collection frame to fill and wrap
Watch real content flow automatically
Mapping the collection
Step 4 – Custom Breakpoints
Figma Sites gives you desktop and mobile. Real sites need more.
Add a custom breakpoint at your grid's 2-column threshold
Name your tiers: lg, md, sm, xs
Map the breakpoint
Step 5 – Fix the Bug
9 items in a 2-col grid leaves 1 orphaned. So add a placeholder item to your CMS.
Set a limit on the collection, then set it to unlimited only on that breakpoint.
Set the placeholder's opacity to 0%.
turn the placeholder item opacity to 0%
Step 6 – Tada!
Publish it. Stretch the browser from 1440px down to phone width.
3 columns to 2 to 1 to a full mobile layout. No broken grids, no orphaned cards, no manual fixes.
This is what "responsive" actually means when it's live.
Final result
Watch on Youtube
Like and share the video.
Leave a comment if you got any questions!
WHAT’S COMING NEXT
In the Meantime…
This newsletter is tied to the tutorials, so it goes quiet too. No fixed date for either one to come back.
Go build something with this series while it's fresh. Try the responsive component on a real project, not just the starter file. That's where it actually sticks.
I'll still be around. I'll share bits of whatever I'm exploring on social from time to time, no schedule, just whenever something feels worth showing.
See you when there's more to share.
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