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) π
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
π
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 β¨
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.
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
β’ 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 π
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
β’ 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 π
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.
β’ 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.
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 πͺ
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 π
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
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
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
