Thread by @ridd_design

Ready for a behind-the-scenes look at one of my favorite systems I've ever built in @figmadesign ?

Of course you are (it'll be fun) 👇

First, the context...

We're currently redesigning the landing pages that Maven provides instructors to promote their courses.

Goals:
• Create a starting template of sections
• Allow each section to be customized
• Prepare for a million future changes

👇

Once we finalized the outline of our starter template, I set to work creating a series of components for each individual "section" that we could combine to create our templates.

Each section has a column within a giant auto layout ✨

Part of that process was thinking through the responsive logic.

We use @tailwindcss so I wanted to map to their existing breakpoints and create a variant for each breakpoint

In order for my content to align well, each breakpoint variant needs consistent padding across sections.

That means that for each section, I ended up with a variants map that looks something like this:

• Standardized breakpoints
• Any customization needed

At the bottom of each section column I put a container to hold any subcomponents + relevant documentation for handoff.

Given the amount of instances I'll wind up with it's super important to minimize the amount of work to make changes.

Oh hey there @jackbutcher 👋

Below that is an optional To Do component from "Handoff Helpers".

• Helps me track easy to forget tasks
• Communicates to engineers what is missing/coming

[[Intermission]]

How you holding up? I know this is a long one... but it's about to get really fun so stick with me 😅

Up until this point we've talked about organizing the section components.

Now we're getting into the template system 👇

My starting point was creating a single "Main Template" component.

• This is simply an auto-layout of my section components according to the outline

That way, I can use this template stack to populate my designs at all other breakpoints.

Why not just start dropping section components into the relevant frames?

Well... this way I have a single auto layout that controls the section order of EVERY frame at EVERY breakpoint.

This isn't just beneficial because it's fun to move everything at once.

Now I can create variants from my initial template as we learn, test, and expand customization options!

So we can swap entire page orders in two clicks 💪

Last step: Create prototype starting points for each breakpoint so engineers (and anyone else) can quickly jump in and out of different device sizes to see how things respond 👍

LOVE this feature from @figmadesign 😍

I'll be covering more in-depth examples of how to set up a variant system like this as a part of @figmaacademy if you're interested in learning more!

Public beta opens the last week in August 😎

figma.academy

If you enjoy Figma inspiration here’s the first tweet to share ❤️

https://twitter.com/ridderingand/status/1424475522113753089