Three Buckets

• Greys (Base to Constrast)
• Brand Colours (Primary & Accent)
• Semantics (Alert, Warning, Success)
• Bases, Mids and Contrasts
• Realistically, it needs variables

General Facts

• In Dark Theme/Light theme as the surface comes near you it becomes lighter in shade
• To change color dark to light you can select the object and colour box and press shift + up arrow/down arrow, its called nudge amount.
• Giving new name to a value is called abstraction and new name is known as TOKEN.

Colour Tokens

Components need values to be real

Colours, Type, Spacing, Borders

Shadows (Elevation)

You give easy to read names to values

Styles only cover one level..

Levels of Tokens

Root Value is the start

Global name (used across apps)

System/Alias can be within an app theme

Component specific

Colours have multiple but others might not

Token Naming

• There is no one way to do it
• Keep them shortest and simplest in beg.
• Reference from other systems
• Use Case (Greys/Brand/Semantics)
• Category (Colour/Type/Shadow/Space)
• Property (Surface/Fill)
• Component (Button/Input/Radio/Icon)
• State (Default/Hover/Disabled)

Token Name = Type + Tier

contentAccent = content + Accent

• Type tells me if it’s a colour/size/type
• Tier gives me context, which Tier is this
• The more narrow intended usage,
• the more precise the name
• Screencasts on Uber Design System
• My hex is accessed by a Primitive
• My Primitive is accessed via Token Name
• That’s why people say:
• Token = Name + Value
• My Name is Primitive
• My Value is Hex

To share All your styles from one file to another you need Libraries

Make Styles

1. Make Color pallete in your file
2. Short the colors as in same order as canvas using “shorter” plugin
3. Rename all the colors using batch renaming (Ctrl + R ) (Make sure to use “/” after name name if you want to make multiple layer naming)
4. e.g For all greys “Grey/”
5. Select base greys and batch rename again “and say $&(current name) and Base and wirte $n(numbers”
6. Do the same for Mids and Contrasts
7. Use “Styler” plugin and “generate styles” to save all the style at once
8. Similarly we can also make Text styles

Type Styles

Prefer Google Fonts

Figma doesn’t save colour

Limited sizes and two weights

Do not go below 12px

No rule for increments

Mobile and Web have different type systems

Plugins

Find and Replace - Allow to quickly replace a word all across the figma file

Ghost UX Writer - To add good dummy text to the figma file

SPELLL - Spell check for you silly spelling mistakes