YOUR STARTING POINT, NOT ANOTHER TO-DO LIST
Set up your design toolbox.
A small, dependable stack. Not a hundred browser tabs. Five useful steps, the right resources, and a little momentum. Go at your own pace.
Want full lessons and exercises? Try Build your first UX case study.
- STEP 01 / Figma
Explore a component library
A focused set of global styles, basic components, and page examples. The larger PRO library is separate.
Untitled UI — Free edition - STEP 02 / SVG
Choose one consistent icon family
Clean, consistent outline icons with adjustable strokes. A dependable starting point for everyday interfaces.
Lucide Icons - STEP 03 / Fonts
Set a clear type hierarchy
A meticulously crafted interface typeface with variable weights and useful OpenType features.
Inter - STEP 04 / Tool
Check contrast early
Check foreground and background colors against contrast criteria before handing off your design.
WebAIM Contrast Checker - STEP 05 / SVG
Present the work simply
An editable desktop-and-mobile frame for presenting your UI. Import the SVG into Figma and add your screens.
Clean device presentation frame
YOU DON’T HAVE TO DO THIS ALONE
A little feedback can go a long way.
Bring your work, your questions, or just the thing you’re stuck on.