← Portfolio Case study 06 / 06 · UX · Figma

One design system for the whole product

A guide page and shared components kept a growing product consistent.

ScopeWhole product
PagesGuide · screens · email
PartsNav · profile · icons · status
GoalReuse before redraw
Problem

Every new feature added screens, and each one drifted a little from the last.

How I solved it

A guide page and shared Figma components, so one change updates the whole product.

Page Guide Rules + usage
→
Page Components Nav, profile, icons, status
→
Page Screens Grouped by feature
→
Page Email Transactional templates
Fig 1How the Figma file is organised. Developers read the guide before the screens.
Avatar
Profile menu
Status
Fig 2Shared parts: avatar, profile menu, status dropdown and an icon set planned for dark mode.
Button
Type=Primary, State=Default Add AI system
Type=Primary, State=Hover Add AI system
Type=Primary, State=Disabled Add AI system
Type=Secondary, State=Default Add AI system
Type=Secondary, State=Hover Add AI system
Type=Secondary, State=Disabled Add AI system
ComponentsOne component set holds every variant. Screens use instances, so a change to the set updates them all.
Local variables
NameLightDark
◐bg/canvas #FFFFFF #000000
◐bg/surface #F4F4F4 #070708
◐text/primary #1A1B1E #F3F3F5
◐text/muted #55575F #8B8B94
◐line/default #E6E6E8 #1C1C20
◐accent/primary #9747FF #4D7CFF
◐prototype/wire #0D99FF #0D99FF
VariablesColours live as variables with a Light and a Dark mode. These are the real tokens behind this website’s theme switch.
Guide firstRules before screens
Change onceUpdates every screen
Dark modePlanned from the icon set up