Reusable design patterns
Build consistent, maintainable projects using components, design tokens, and clear naming.
Why reusability matters
Reusable design patterns reduce duplication and make changes easier to propagate. When a button design needs to update, a component-based project means you update the master once — not in 40 places. When a brand color changes, a token-based project means you change one token value instead of hunting through every fill.
The three tools for reusability
1. Components
Use components for recurring UI patterns:
- Buttons (primary, secondary, destructive)
- Form elements (inputs, checkboxes, selects)
- Cards, list items, badges
- Navigation elements
Create a component with ⌘⌥K, then copy and paste the master when you need linked instances. Update the master to propagate changes.
2. Design tokens
Use tokens for values that must stay consistent:
- Brand colors → Color tokens
- Typefaces and sizes → Font tokens
- Spacing and radius → Number tokens
Tokens are currently useful for centralizing and copying reusable values while direct layer binding is being rolled out.
3. Clear layer naming
Name layers and components semantically:
- Good:
Button/Primary/Default,Icon/16/Arrow-right,Card/Product - Avoid:
Rectangle 24,Group 7,Copy of Component
Clear naming makes layers searchable, makes handoffs readable, and makes future edits faster.
Building a reusable pattern: step by step
- Design the element — create one well-crafted version.
- Record token values — define the reusable colors, fonts, and spacing values you want to keep consistent.
- Name layers — give each child layer a descriptive name.
- Create a component — select the layer(s) and press ⌘⌥K.
- Use instances — copy and paste the master component wherever it is needed.
- Maintain the master — edit the master component when the pattern should change.
Tips
- Do not create a component for every one-off element. Reserve components for patterns that appear 3+ times or that are likely to change globally.
- Tokens and components work best together — tokens ensure the component's values are consistent; the component ensures the structure is consistent.
- Review your layer panel periodically to clean up unnamed layers before they accumulate.