We can take that up a notch through Design Tokens as JSON, but how can we do that from Figma? Using Figma Tokensįigma Tokens is a plugin by Jan Six that addresses how Design Tokens can be best managed in Figma. In most cases these Styles are documented somewhere and the dev team would translate them to CSS variables and possibly some mixins. In some projects made in Figma, some may have probably set some “Design Tokens" in the form Color Styles, Text Styles, and Effects Styles, which are styles that you can use for your components. But how do we exactly make Design Tokens from Figma? Same can be done with backgrounds: color-background-navbar, color-background-input, etc. A color-text-default token says that this is the default text color. In these examples, it’s very descriptive and you’ll immediately know where it’s used for: a color-text-button-error is the color of the text for a button with a state of error. They should be as descriptive as possible. This type of token is more specific and it’s name should reflect that. ![]() You may often see this now in modern web/app development frameworks and systems like in TailwindCSS, Material Design, Lightning Design System etc.Ĭontext Tokens however are entirely different. What happens if you suddenly have something lighter than your lighter-gray? Through a numeric scale naming convention, we can provide a range of colors from lightest to darkest without having to think so much about what name it should have. This avoids having to name Tokens in light-gray, lighter-gray, dark-gray etc. Discuss with your dev team what’s the best naming convention that works with your project.įor Core Tokens, I would usually go for a numeric scale naming convention. Initially, the team needs to standardize a naming convention for their tokens. Ideally, Context Tokens are what you apply to actual UI Components, not Core Tokens.īoth Token types have a strict naming convention It should communicate where the token it’s supposed to be used like color-background-navbar. A gray-1000 token can probably be used for texts, backgrounds, borders, and more, but I wouldn’t recommend using them for specific components.Ĭontext Tokens on the other hand references from Core Tokens and specifically made for it’s use case like a background or border colors of a component, text color of a header or paragraph, etc. Though they can be used as is, it doesn’t tell us where exactly it can used. These types come in different names, but I went with these names since they make sense within the projects I'm working on.Ĭore Tokens are like your base variables that takes a defined value, like gray-1000. To create Design Tokens in general, we need to understand what are Core Tokens and Context Tokens. This means that Design Tokens can be used as referenced for CSS Variables and can also be used in Android, IOS, CSS-in-JS, and wherever JSON is readable or convertible. It’s a separate file (JSON or YAML) that is agnostic and can be read by any codebase. … and more! So aren’t they just CSS variables? What you declare as a design token will depend how granular you want the tokens to be, which can vary from one project to another. As a developer, Instead of thinking what shade of gray you need for a text, you can just refer to a specific context token like color-text-header or color-text-body.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |