@mollyhellmuth.bsky.social
Teaching what I know about Figma & Design Systems Newsletter http://uiprep.com/newsletter Course https://maven.com/dive/design-system-bootcamp
Congrats Catt!!!
16.06.2025 17:08 β π 1 π 0 π¬ 1 π 0
The next cohort kicks off July 7th!
Special guests @brad_frost (Atomic Design) and Sukanya Bhattacharya (Uber) will join us for live Q&As.
To celebrate being featured by @Maven, the course is 20% off until Sunday.
Perfect time to level up for that new role or promotion πͺ
maven.com/ui-prep/des...
My bootcamp was just recognized (again!) as a top course on @Maven π
Itβs been the #1-rated course for Figma and/or Design Systems 3 years in a row..
..but what Iβm really proud of are the emails I get from students. Like this oneπ
Subscribe to my newsletter, Friday Five, to get tips like this directly in your inbox!
β¨ Join 25,000+ subscribers
β¨ Learn about Figma & Design Systems
β¨ Great tips, no fluff
www.uiprep.com/newsletter
..And makes a clear distinction for what components should be "hidden" from the published library.
13.06.2025 13:00 β π 0 π 0 π¬ 1 π 0
The advantage of this?
It keeps your other component pages clutter free..
These small "parts" are important for the building of other components, but are not meant to be used on their own.
13.06.2025 13:00 β π 0 π 0 π¬ 1 π 0
Copy @Atlassian and include a "parts" page in your Figma component library
On this page you can store all the small bits and bobs that make up your other, more complex, components.
Subscribe to my newsletter, Friday Five, to get tips like this directly in your inbox!
β¨ Join 25,000+ subscribers
β¨ Learn about Figma & Design Systems
β¨ Great tips, no fluff
www.uiprep.com/newsletter
The good news?
Adjusting weight is easy and supported by most fonts.
You can set different weights in Figma variables so your text automatically thickens when switching to dark mode.
Ideally, you'd adjust grade when switching themes. But..
1. Not all fonts support grade
2. Figma (currently) doesnβt have the proper variable support
So... most teams go with weight instead.
This can be done by adjusting the text weight or the text grade.
Text grade = subtle stroke thickness, same spacing & size.
Great for fine-tuning without breaking layout.
Text weight = heavier or lighter font style (e.g. Regular β Semibold)
More noticeable and affects spacing a bit.
Figma tip: Use thicker text in dark mode
Light text on a dark background appears thinnerβso adjusting the thickness helps maintain visual balance and legibility.
Subscribe to my newsletter, Friday Five, to get tips like this directly in your inbox!
β¨ Join 25,000+ subscribers
β¨ Learn about Figma & Design Systems
β¨ Great tips, no fluff
www.uiprep.com/newsletter
My favorite Auto Layout trick for headers: set the text layer to FILL.
It expands to take up all available space, pushing the close icon to the edgeβno extra frames, no absolute positioning needed
Subscribe to my newsletter, Friday Five, to get tips like this directly in your inbox!
β¨ Join 25,000+ subscribers
β¨ Learn about Figma & Design Systems
β¨ Great tips, no fluff
www.uiprep.com/newsletter
Now, you can just apply Grids to one frame!
1. Select a frame and apply Grids (adjust rows/columns if needed)
2. Add content to frame
Before, to make a list like this, you would need to..
1. Create three vertical auto layout lists
2. Place all three lists inside a larger horizontal auto layout
3. Make sure all the hug/fill settings are correct
π‘ Figma tip: Make better/easier lists with the new GRIDS feature
28.05.2025 13:00 β π 0 π 0 π¬ 1 π 0
@brad_frost and I had a ton of fun collaborating on this Figma design file that highlights examples from his new course, Subatomic.
Get a copy of the file by joining either of our courses!
designtokenscourse.com/
maven.com/ui-prep/des...
Which can then be shared across multiple brand modes in your tier 2 collection (aka the semantic collection).
02.05.2025 13:00 β π 1 π 0 π¬ 1 π 0
..and neutral, utility, and transparent colors.
02.05.2025 13:00 β π 0 π 0 π¬ 1 π 0
If your DS is supporting multiple brands.. reduce the tokens needed by letting the brands share some βcoreβ tokens for things like spacing numbers..
02.05.2025 13:00 β π 0 π 0 π¬ 1 π 0
Figma tip: Use "core tokens" across multiple brands
(Ideas Iβm stealing from @brad_frost new course, Subatomic! -- Part 1)
Get more details and register (free) here!
lu.ma/ryakj31q
Join me for a little adventure π₯Ύβ
Iβm hosting a Hike & Coffee the Tuesday morning before Config kicks off. Stretch your legs, meet some folks, take in those Bay views, and sip some espresso!
ps. Friday Five, the UI Prep newsletter, is back in your inboxes this weekβjust in time to get you hyped for Config25!
www.uiprep.com/newsletter
Back from sabbatical! π
I spent the past two months off the gridβchasing powder and eating my way through Japan, starting a garden, and getting my hands muddy in the pottery studio. Itβs been the fun and creative rest I was hoping for and Iβm excited to be back in the office with a few fresh ideas.
