Let's take a look at the four types of colour styles you might build / encounter in your systems 🎨
• Raw values e.g. #CC8700
• Base tokens e.g. Yellow/400
• Global tokens e.g. Warning/Primary
• Component tokens e.g. Alert/Warning/Text
The last layer (component tokens) may be overkill for your needs, and you might not need to get that specific!
The "levels of abstraction" are down to how sophisticated your system might be, and you may not even need...any of the last three if you're okay with raw values😄
The way I have structured this, with the arrow inheritance, should indicate that you follow a path down from abstract raw value down to specific component token value
Each level introduces control – providing the systems team with a much stricter way of managing styles
Important! The naming conventions that I'm using here will almost certainly raise some eyebrows – people do things differently in different teams – it's more about the stack of inheritance that I'm trying to highlight 😅
Will come back to this later
Let's maybe look at how a base token would be converted into a global one
Assigning a more descriptive name, and taking the actual colour name out of it, means we are building for intent and not the look of the colour
This is the first layer of abstraction
Looking at a component example helps visualise the control we get from this abstraction (how many times can I say this word?)
Here we see the Warning/Primary global token being sliced up into two component tokens: text and icon
Hyper-specificity helps with that future-proofing
Again, that specificity but with a real component
This alert component's "component tokens" are associated with each child element
States (hover, focus) would make them more specific too
As I mentioned earlier, you might not need that component level, because it could be over-designed
In this case, we might rely on the previous "global token" level at all stages
Warning/Accent
Warning/Tertiary
Warning/Secondary
Global tokens become very useful for *new* ideas too
When designing, you likely won't be going deep on the component abstraction level, and just want to ideate on new things
This means we can use all global, descriptive, tokens to rapidly iterate
I mentioned naming conventions earlier and said they are done differently at different companies, which is great but means these things can be hard to learn
The more I talk to hiring managers and senior designers about what they are looking for in designers, the more I back up the theory that portfolios shouldn't be X, Y, Z case studies, but explorations of your obsession with details
Showing deep, deep examinations of your solutions AND what you didn't deliver is a really great way to show how you approach solving a problem
A slideshow of solutions doesn't show anything below the surface, just a public-facing polished mockup
But jumping incredibly deep into your rough work can show that you really do take the end to end product process into consideration when solving a problem
"this didn't work, because..." is a fascinating discussion that I know would be way more interesting than "here's a flow"
Been asked a lot over the past few days about how to get started with colour variables, so here are some pointers 🖍️
Hope this is useful!
As usual, before we get started here are some T&Cs:
• These are my opinions, take with a grain of salt!
• You will need more or less of these options, adjust to your team's workflow
• Tokens are opinionated, bring your microphone
• Tokens are angry, enter with care
The types I'll discuss are:
1️⃣ Bg = Background
2️⃣ Text = Text!
3️⃣ Border = Also known as strokes
4️⃣ Icon = This is a layer I'm personally adding on, will explain why
Here's another thread about managing Figma styles 🗂
It's pretty hard to know how far to push naming conventions on styles, and you can end up in some heavily nested folder structures if you're not careful
So let's take one component and work it out!
As usual, these are thoughts / ideas!
There's not necessarily a perfect right answer, but hopefully this sets you up with something to think about 💡
I've seen a lot of cool component props examples recently, but I think we're running into a world where component maintenance is being prioritised over usage
Taking a tweet component as an example, how could we structure it?
First things first, identify the component types
1️⃣ Tweet – single
2️⃣ Tweet – media
3️⃣ Tweet – threaded
Notes: Names are illustrative; media has many types and would require another thread in itself; there's probably more types!
We *could* go to town here and add component props to every single element, reducing our component down to just a single one
Here you can see the prop soup of our singular component in practice