Tokens
Tokens are styles that contain a single value. We have tokens for colour, radius, spacing, and typography. These are the smallest things we can make in design and deliver in code.
Components
Components use tokens to build very simple interfaces. For instance, a button uses a radius token, spacing token, colour token (style in Figma) and typography token to collectively make the component.
Components can’t be broken apart.
🎒 Backpack Components
Let’s look at what we mean when we say 'Backpack components'. These exist as two things:
- In code
- As Figma designs
Figma Components
‘Component' is also the technical term Figma uses for a reusable design. The Backpack team encourages you to make your own reusable components as it can help to speed up your workflow, knowing they’ll eventually become a code component — or as we call it — a Backpack Component.
Patterns
A pattern is a collection of 🎒 Bpk Components and/or 🎒 Bpk Tokens (Typography, Spacing, Colours etc) arranged together into a design.
If a pattern is made agnostic of all verticals, it could easily become a 🎒 Bpk Component. See our Card List or Snippet as good examples.
Libraries
Figma Libraries are where we publish Tokens, Components, and Patterns. We’ve written a guide to how our Library structure works.
Who owns what?
🎒 Backpack Tokens and Components
- Design owned by Adam / Giles
- Code maintained by Koala Squad
- Collectively this is referred to as Backpack
⚡️ Agreed Patterns
- Design owned by Adam / Giles, and jointly owned by anyone in Product Design
- Code isn’t owned by Koala Squad (this might have joint owners)
- Code lives in different databases
- If it exists in the live product, it can live in Agreed Patterns, e.g Global Navigation and Global Footer
- If it’s a cross-product design we’re all working towards, it can also live here, e.g Inventory Cards
New pattern libraries
There are two new libraries in Backpack Core Libraries.
⚡️ Agreed Patterns
See above ☝️
👴🏻 Legacy Patterns
Anything that pre-dates Agreed Patterns lives here. You can find all the old Inventory Cards or Search Controls here.
Other considerations
When is something Legacy vs Agreed?
We currently have two sets of Search Controls live that look very different. If the intention is to move away from something or it doesn’t have a designer working on it, it's Legacy.