Hi Friends!
We’re back with the 22nd issue of Friday Five, a twice-monthly email with our best design tips. Each one picked to help you level up your design skills.
🚀 🚀 🚀 UI PREP 5.0 LAUNCH DATE! The latest version of the UI Prep design system UI kit will be launched on JANUARY 5TH. Check out tips #3, #4, and #5 for a little sneak peek!
DESIGN SYSTEM TIP
Creating a new design system? Start with an interface inventory
Tip from Brad Frost
Before your start building a new design system or overhauling an existing one, take inventory of your existing UI (every type of button, input, tab, card, etc). This will help your team view the product on an atomic level, weed out inconsistencies, and plan for the new system.
How to conduct an interface inventory
Open your project/product/website
Take screenshots of every UI element type/variant
Categorize screenshots and place them on a frame or slide
Present findings to your team/boss/client/organization
Other benefits of an interface inventory include convincing decision-makers that a design system IS needed, ensuring all UI components are accounted for, and responsive retrofitting.
DESIGN SYSTEM TIP
Pass ideas quickly between designers and developers like a “hot potato”
Tip from Dan Mall
Ideas should be passed between designers and developers quickly like a “hot potato”. Rather than the designer dumping a large amount of work on the developer like a “waterfall”. Using the “hot potato” method allows for greater collaboration, understanding of processes, and faster progress.
How to “pass” the hot potato
Sit together: Designers and developers can learn a LOT just by seeing how the other works.
Hangout on Zoom together: Leave a zoom chat open for a few hours every day to simulate being in an office together.
Send asynchronous recording: Bridge time zone gaps by sending videos of your questions, comments, and processes.
FIGMA TIP
Use base components with large variant sets
Tip from UI Prep
Make creating and editing large variant sets easier by nesting a base component inside of each one. For example, create a base component for each button type (eg. icon placement, size, resizing behavior). Then nest an instance of the base inside of each variant and apply overrides to create unique versions. This keeps everything consistent and allows for bulk editing.
Base component best practices
Place a “.” before the base name to keep it from being published in the team library.
Keep layer names consistent (eg. “icon”, “text”) so their overrides are persistent while designing.
FIGMA TIP
Get specific with color styles
Tip from UI Prep
Create distinct color styles for key use-cases (background, text, outline). Even if their colors are similar or the same. This is especially relevant for different black/white/gray colors which are prone to misuse. The specific names will make choosing colors while designing easy. And the specific use-cases will make editing colors much more flexible.
General colors
Primary/accent/feedback: 50 - 900
Specific colors
Background: 100-Primary, 200-Secondary, 300-Tertiary
Text: 100-Primary, 200-Secondary, 300-Disabled
Other: 100-Outline, 200-Division, 300-Select, 400-Hover
FIGMA TIP
Combine (some) icons as variants
Tip from UI Prep
Combine related icons together as variants. This makes designing with them easier because you can use the variant dropdown or on/off switch to switch between versions. It also allows you to make the components interactive for faster prototyping.
Icons that should be combined as variants
Checkboxes
Radio buttons
Arrows
Visibility
Bookmark
Flag
Ect..
Happy New Year!!! 🎉
Molly & Jake at UI Prep
0 comments