This article represents an in-depth guide to creating a scalable and efficient naming convention for design tokens, implemented and tested in several world-leading cybersecurity companies. This…
Color tokens are a type of design token that represents colors. They are typically used in design systems to make it easier to manage and reuse colors across different projects. Color tokens are…
Design systems are essential for maintaining consistency, efficiency, and scalability. Central to these systems are design tokens — the fundamental units that encapsulate visual design decisions such…
Joey shares techniques, frameworks, and tips for organizing Figma variables within components and libraries, offering insights to streamline your workflow.
In design systems, hover and pressed states are essential for signaling interaction, enhancing the user experience, and guiding behavior. They offer immediate feedback when users interact with…
This article explores Henry Daggett’s approach to design tokens, offering a clear methodology for creating and implementing these essential components in a design system. Inspired by his masterclass…
Disaster is rare, but design systems often fail to meet the needs of the teams they’re meant to help. Here are 11 reasons why, and what to do to address them.
This is a quick tip on how to set up the variables for the Design System, mapping the breakpoint tokens we already have defined. With this setup, designers who need to work on responsive projects…
Defining and naming tokens, we ensure that our design decisions are consistent across the board, making life easier for the designer & developer
Learn how to best set up your design tokens from a technical perspective. We discuss versioning, source of truth and more.
Discover how design tokens, the building blocks of design systems, hold the key to enhanced user experiences. In this article, we’ll delve into the multi-layered world of design tokens, exploring…
It can be pretty frustrating managing token design systems and ensuring parity between designs and developed templates. Making updates can often feel like a chore, so I’ve created a little WordPress…
The improved interface and new tools in Tokens Studio 2.0 make a big difference. Learn how these updates affect user workflow Compare the new and old versions, and assess their differences. Switch to…
Translating designs into products is hard! Learn how design tokens make building products easier for both designers and developers.
In the dynamic world of UX/UI design, design systems are evolving beyond aesthetics to focus on meaning and intention. This semantic shift is transforming how designers and developers create…
Learn about the different types, benefits, and practical applications of design tokens to create cohesive and scalable design systems for designers.
A guide to streamlining design systems and enhancing scalability
Implementation of design tokens could be a real pain in sizeable products. In this article, you'll find a helpful guide on how to do that with low effort.
A complete guide on creating Design Tokens in the most efficient, scalable, and consistent way. You have to use the Tokens Studio plugin to use your Design Tokens inside Figma, in your Designs…
Maintaining consistency and efficiency across projects is a significant challenge in the rapidly evolving world of product design. Design systems have emerged as a crucial solution to this problem…
I know…this starts off sounding like it might be click-bait or being deliberately contrary, but let me explain. As a community, we’ve largely accepted that the 3-tier model for design tokens kind of…
The implementation of Design Tokens presents both opportunities and challenges for design teams. While they offer a systematic approach to managing design properties and promoting consistency across projects, their effectiveness relies heavily on thoughtful planning and execution.
Not sure if you should switch to Figma variables for your design system? We walk through 5 compelling reasons why you should get started now.
Learn what Figma variables, modes, and collections are and how to use them with your design system.
In the ever-evolving landscape of design systems, maintaining consistency and efficiency across design and development workflows is paramount. Design tokens have emerged as a foundational concept…
In this article I will tell a bit about the naming structure of Trygs Design System Anchor and show how we built an airtable to help us name our tokens more consistent. I will assume you know what a…
Yesterday, I announced the release of the Theme Machine, a tool for generating custom palettes as CSS custom properties. I hope this tool proves useful for many developers, but it’s really only the first step in managing color in CSS. I think it’s worth stepping back and looking at the bigger picture of custom property management in general.
The brief and technical definition of design tokens is that they are units of value, data, or information used in various contexts to represent something significant. Instead of hard-coding static…
Design tokens are the smallest pieces of a design system and they help to provide consistent visuals and experiences. Here’s how to use them strategically.
Discover how information architects can help design system teams overcome complex challenges with design tokens, documentations, and more!
In today’s fast-paced digital landscape, where user experience sits at the forefront, design systems emerge as the unsung heroes behind seamless digital products. These structured frameworks ensure…
Explore key principles for building a scalable design system: automation, clear communication, feedback, and contributions. Enhance efficiency and collaboration for a design system that evolves with your needs.
Uncover the essential role of design tokens and learn to document them effectively using Supernova.
They both serve as symbolic references to specific values but have different scopes.
Design systems have become a buzzword in many UX job postings lately. While the concept has roots in various fields like architecture and graphic design, understanding it within the context of…
Note: I’ve spent the past few months interviewing design, product and engineering leaders about design systems and how they connect them to business outcomes. I will be hosting a series of webinars…
I am used to working with design systems on a daily basis, but apart from that, I have had the opportunity to do a bootcamp and improve my skills. In this project, in pairs, we developed a design…
Design systems are revolutionizing how companies design and build digital products. They help create consistency and efficiency, which leads to a better user experience and real business impact…
Let's talk design tokens and the lessons we learned! In our quest for a stellar design system, we embarked on the exciting journey of implementing them –– and
Design Tokens can be challenging; do you feel overwhelmed about where to even start? Do you spend a lot of time trying to find the right approach or names? What are Design Tokens? We sat down with…
The research and insights I've collected over the last 6 months provide the foundations for a new approach to naming design tokens based on the current tools and technologies available to us.
PostCSS plugin to convert design tokens to CSS custom properties and utility classes. - saneef/postcss-design-token-utils
Design tokens and systems occupy a collaborative space between design and engineering
Dive into the key takeaways from Supernova's expert panel on the state of design tokens in 2024. Explore insightful discussions on collaboration, token management, layout theming, and more.
Explore the exciting world of tokens in design systems with guest writer Tiago. Learn about best practices, personal insights, and strategies for effective design token creation.
This is an excerpt from a course I am making with Newline, called “The newline Guide to React Component Design Systems with Figmagic”. You might also be interested in my article “How To Automate…
The panel delved into the findings of Supernova's latest report on the status of design tokens in 2024, featuring prominent figures in design systems: Donnie...
Placement in mode, the practical application of form following function.
I'm sharing what I know about font weight and font family acting like a "pair" in Figma and how I work around that in Tokens Studio to avoid frustrating errors.
Discover how to build a scalable token architecture for your design system, from analyzing your business context to leveraging automation tools for continuous improvement.
In the realm of design systems, where cohesion and consistency reign supreme, the importance of meticulous attention to detail cannot be overstated. One crucial aspect of design systems that often…
Design tokens are now safe to consider a common, basic practice among design systems teams. And although the names of these types can vary, we generally group them into three major buckets: Each of…
We create design systems, web-based applications, and premium user experiences by partnering with modern organizations and digital teams.
Alyona Kulish, UX/UI designer at Revend Group, spoke about using variables and design tokens in Figma at a recent presentation. In this article, we want to share with you the key conclusions and…
Welcome to the exciting world of Design Tokens magic! By understanding their role, applications, and practicalities in UI/UX design, you’ll be able to take your designs to the next level. Design…
The value of design tokens is in their ability to simplify things. Deciding how detailed to make the abstraction is a balance between control and simplicity.
Design tokens have been in use for quite some time, many design systems have been using them as the foundation of their operation for quite some time. In the world of frontend development, their…
Global tokens are the basic building blocks of our design language, identified by context-agnostic names and raw value. Our color scheme, motion effects, typesetting, and size dimensions are…
Design systems have rapidly become essential in product design, mainly due to their efficiency-enhancing capabilities. A well-structured design system bridges the gap between design and development…
Design tokens act as reusable pieces of code that describe colors, typefaces, spacing, and other visual elements in a design system. Choosing the proper names for your design tokens is critical for…
Not all design systems are created equal; they should be tailored to meet the specific needs of each organization. The requirements of a startup differ significantly from those of a large company or…
Discover why bundling multiple properties in one token challenges the core principle of "one token, one value".
One of the initial and often perplexing steps in building a design system is defining your color palette. In my previous article about Atomic methodology for building design systems, I emphasized how…
Understanding what problems Facebook faced with CSS will help us understand more about the design decisions behind StyleX. Three years ago, the folks behind Facebook design systems components were…
💛 What are the tokens of your design system? 💛. For those of you who do not have the luck to speak Portuguese and access some poems, I share here what inspires me..
Over two days, the Clarity 2023 design systems conference brought together presentations on a variety of topics, including why we should leverage browser standards (1, 2) and invest in accessibility…
Over two days, the Clarity 2023 design systems conference brought together presentations on a variety of topics, including why we should leverage browser standards (1, 2) and invest in accessibility…
Figma variables is a powerful tool to help simplify and streamline design systems. Announced this year at the annual Config conference, variables enables you to store essential values — such as…
Design tokens are a method of abstracting and organizing the design elements of a system into usable and uniform values. By utilizing CSS variables, these tokens promote a more modular and manageable…
Explore the essential differences between Figma variables and design tokens in our latest article. Find out what the benefits are and if you should make the jump just yet.
You are probably thinking why I titled this “Design tokens 102”, but it’s because there’s an article titled “Design tokens 101” and I just wanted to keep the tradition. What are design tokens you may…
Take your Figma Variables to the next level. Learn how to manage, document, and deliver your Figma Variables with Supernova.
Let us not throw this term around and pin down what it means precisely.
This is the next chapter of our blog series on variables and design systems. In this one, we’re talking about strategy, architecture, and planning that underpin the creation of flexible variables…
Depuis l’arrivée des variables dans figma, les équipes s’intéressent de plus en plus aux Design Tokens, ce qui est une excellente chose. En effet, lorsque l’on conçoit un Design System, les design…
Establishing semantic naming conventions for color tokens is a crucial step. However, it’s equally important to assess their usability and gather feedback through user testing. The process of…
Summer of 2023, Figma announced Figma variables: an internal feature that mirrors the functionality of Tokens within Figma, along with REST API support for developers. Figma variables is currently…
In the realm of design systems, there’s a powerful concept that goes by the name of “Design Tokens.” These abstract elements serve as the backbone of design consistency, offering a unified approach…
If you’re considering the integration of design tokens, you’ve likely encountered the enigmatic challenge of naming conventions for semantic tokens.
Learn how to use variables and modes in Figma to reduce component complexity and make it easier for your designers to use your design tokens.
D̶e̶s̶i̶g̶n̶ Tokens will revolutionize the future of brand identities by providing a consistent foundation for visual design across all digital platforms and incorporating various attributes such as…
This is part of design system series, in this 3rd part, we’ll delve into how to use these global, alias, and component tokens in figma. Previously, we have created color tokens at the component…
This is part of design system series, in this 2nd part, we’ll delve into the making global, alias, and component tokens in figma. check part 1 here Figma currently supports four variable types…
This is going to be series of 3 blogs which are part of design system series, in this 1st part, we’ll delve into the world of design tokens, specifically global, alias, and component tokens. Design…
Maintaining consistency across various platforms and applications is a critical challenge. Design tokens, as the fundamental units of visual styling, are the backbone to delivering cohesive user…
Should tokens change across different screens?
This article will focus on Design Tokens, one of the core elements of a design system. The hope is that if you're not familiar with the concept, you'll walk away with a better understanding of what they are and how they can be used.
Design Tokens play a pivotal role within design systems, ensuring consistency in design elements, enhancing collaborative efficiency, and simplifying communication between cross-platform design and…
Design tokens serve as a potent asset for design system teams, empowering them to attain uniformity, scalability, collaboration, and flexibility, all while simplifying the design-to-development…
設計稿擔任著設計與工程之間溝通的橋樑，時常遇到的問題是工程需要將設計稿的樣式在 codebase 中重新建構出來，而當設計更動時，工程端就會需要進行二次確認，並做出對應調整。其中的溝通和理解成本取決於設計稿的完整度，以及設計師與工程師之間的默契。 近期相當熱門的 UI 設計工具 — Figma 的 community 推出了一個 Tokens studio for Figma (又稱 Figma…
Figma launched their Variables at Config this year and I have now played a bit around with them. I have mainly focused on using them as 1:1 to design tokens. So nothing about making better…
É sempre delicado falar sobre nomenclaturas para design systems (seja de design tokens ou de componentes). Se mesmo dentro de um time de pequena escala é comum existir diferentes opiniões e…
How to organize colors in your design system? Today design systems became integral part of product development and this is not unexpected. Consistency, scalability, increased efficiency of development and implementation allow to businesses reach…
In the dynamic realm of design systems, a robust and accessible colour palette stands as a pivotal cornerstone that profoundly shapes a product’s identity and user experience. Within the following…
Designers Care Deeply about visual aesthetics, developers are focused on implementation. Design tokens serve as a common language that both can understand.
Supporting your design system with Figma Variables.
This article covers how we evolved our tokens at Intuit to create a flexible taxonomy for a small but powerful set of semantic tokens. Intuit is the parent company for some well-known products such…
Explore how design tokens can provide your product with more stability, scalability, and flexibility. Learn why they are the most valuable artifact that any design system can offer to help you build better products.
Your text and color styles, shadows, etc. can be represented as design tokens. The important part is to share design tokens between all parts of the product team. The goal is for design and…
Design tokens are a hot subject right now. As system designers and developers, we talk in tokens all the time. But what are they?
I’ve been working on building from scratch a design-system and tokenization has been quite hard to grasp. After trying some structures — i.e. Material Design or Atlassian Design System — , I decided…
Making sense of several solutions for design decisions aimed to help our community.
Over the last decade, design systems have become a mainstay in many product development teams, and... Tagged with webdev, designsystem, productivity, css.
Ollie explores the concept of design tokens and the push for standardization in their usage.
Design tokens, glorified variables that are platform-agnostic, have gained popularity in large companies for maintaining design consistency across multiple codebases and design tools.
With the aim of making design tokens more interoperable, the Design Token Community Group (DTCG) was established to develop a standardized approach for writing and translating design tokens.
Discover the power of design tokens in streamlining your design and development processes. Learn how utilizing design tokens can enhance consistency, reduce errors, and improve efficiency in creating and maintaining cohesive user interfaces.
Design Tokens Generator is a powerful tool that aims to simplify the management of design tokens for designers and web developers. The goal of the app is to make design tokens more approachable and…
Before June 2023, it's safe to assume that most designers hadn't even considered the word "semantic" within their work.
Design tokens are the basis of every Design System. It’s with design tokens that you should start. I studied the concept of design tokens a lot before starting to create a Design System. I noticed…
As a product designer, I used to think of design systems as a buzzword without fully appreciating their power. But since working on the design system at Double Good, I’ve seen firsthand how it can…
There are lots of resources for learning what design tokens are, how to use them, and their benefits to design systems. This is not that article. This article is intended to provide some practical…
Design tokens solve product problems, but they also create them. Here's our experience at GR8 Tech: how we use tokens and why we created the Token Master plugin. Design tokens store style values…
I remember auditing a company’s product once, a decently sized web and mobile application, only to learn that a certain “expand” button was not only using multiple shades of the primary color, but…
You may need a subscription to Medium to read this article
Aren’t you tired of having to manually update every element of your UI design? Don’t you find it hard to maintain consistency across your designs? Wouldn’t you wish to insert your changes on the…
Design tokens store design decisions in platform agnostic way. Design Tokens bring flexibility and modularity in design systems. Read More →
This template provides a lot of best practices and tips for creating effective and extensible design token systems. It covers best practices around the use of option, semantic and component token…
Learn how to create multi-themed products using the three-tiered design tokens.
Demo for automating design token integration with code components and documentation
When you read 10 articles about buttons, you get 10 slightly different answers. Is a CTA a button? Is a primary button a CTA? Are secondary and tertiary buttons also CTAs — or do they call too…
At the end of February 2023, I finally made public a tool that has helped me and my team to develop and mantain components and Design System: the Figma Token Engine I write this Quick Start to show…
Some strategic tips for versioning design tokens the right way.
In my last article, I talked about how to do the roundtrip of one single design token from Figma to code and back — and why this is so significant in the design-development-process and the goal of a…
Looking at what design tokens are, how to theme with tokens, and what their standards are as well as how to manage tokens using Knapsack.
One of the goals of multi-national companies like NN is ensuring brand consistency, so that their customers recognise and trust their brand no matter what country they are in or what device they are…
Design tokens have been embraced across the industry as a simple yet powerful way to align design, engineering, and product teams on core brand styling.
This article discusses developing and implementing design system components using Tokens Studio (formerly Figma Tokens), and how to expose tokens to design system consumers so they can use them as well.
Design spacing tokens semantically
As companies like Kimberly-Clark continue to expand and evolve, the need for a streamlined and efficient design process becomes increasingly important. With brands in 175 countries, maintaining a…
A design system is a collection of reusable design components, guidelines, and design tokens that are used to create a consistent look and feel across a website or application. Implementing a design…
In this blog post I am going to talk about how you can use Style Dictionary to manage colours across a SwiftUI and Web project.
Are you struggling to keep your design system organized and consistent? Chat GPT can help you create design tokens quickly and easily. This guide will teach you how to use Chat GPT to create organized, consistent tokens for your design system.
You may need a subscription to Medium to read this article
An organization can use design tokens to ensure consistency and coherence across all of its design decisions, not just those related to the user interface (UI). As we’ll see in this post, design…
You may need a subscription to Medium to read this article
Design tokens are a foundational technology that supports the present and future. They are platform agnostic; regardless of what tools we use, they can be utilised. It’s a reusable baseline, enabling…
Learn how to implement dark mode from triggering it, to setting up design tokens to get automatic dark mode for all components.
You may need a subscription to Medium to read this article
The World Wide Web Consortium (W3C) is an international community¹. It’s led by Tim Berners-Lee² and Jeffrey Jaffe. Together with organizations, a full-time staff, and individual developers they…
You may need a subscription to Medium to read this article
Design tokens are essentially design decisions that form the building blocks of design systems. They ensure uniformity and ease of development for product design.
We all have heard about design systems. Some of us have built, others used, and others have just seen one. Design Systems do not obey a specific method, recipe, or structure. Instead, they adapt to…
Design token dreams have turned to reality across most design systems. Yet some teams now see a years-old inventory as out of step with how naming design tokens has evolved. Others lack alignment…
Although they receive less attention when talking about Design Tokens, icon tokens can be very powerful. Like any other type of token, icon tokens must be of level 1 and level 2, with level 3 being…
In the last days, I was studying how I could create a good design system for a personal project and how I could understand better the design system and Figma as a frontend developer. In this article…
Define a design token in code, create a repository on GitHub, install VS Code, NVM, Node.js, NPM packages, use Terminal, push, pull and merge changes in GitHub, sync design tokens between Figma and a web page
Design tokens are relatively new. You might be asking at this point ‘what is a design token’, and I’m going to lay that out for you. I’m also going to help walk through the creation of a basic token…
Design tokens refer to special variables that store design decisions. From a technical standpoint, they are pieces of information that are associated, at a minimum, with a name-value pair. Design…
After spending the last five years or so working intimately with enterprise design systems, I thought it would be a good time to go back in time and start a new journey in a dedicated role with some…
Here is a look at the state of design tokens in the industry, how they currently manifest in FAST (part 2), and how that might evolve for improved and unified support in the future (part 3 coming…
Design-Tokens is a hot topic in the Design and Development community. In this article, you will learn about the anatomy of a Design-Token and how to structure them.
How to use CSS-only Type Grinding to allow your design tokens written in your CSS to be transformed into any other values without relying on JavaScript!
In part 1 we looked at what design tokens are, touched briefly on how the concept has evolved through different toolsets, and looked at some of the benefits they bring, as well as some areas of…
How to set up design tokens and where to use them?
Here we explore the life of a simple design token; why they exist, what you can do with them until they're no longer needed
Through this case study, I hope to improve the overall understanding of design tokens for the readers. There are other articles, youtube videos on this topic out there too, but I always have found…
Design tokens are a common language and design decisions that form a system — in the form of UI characteristics. This might include things like colors, spacing, typography, radii, even animation…
No meu último post falei sobre o desafio de manter a consistência nas decisões de design mantendo o ritmo de crescimento de um produto digital. Quando criamos a nova versão do nosso design system, o…
In this presentation, Sam Solomon from Salesloft discusses the issue of accessibility and how it can be improved using design tokens.
They highlight the challenges faced by colorblind users and the impact it has on their experience.
By implementing design tokens and enabling theming, Salesloft aims to address these accessibility issues and provide a more inclusive user experience.
Defining design tokens is not just about representing a visual identity from a digital point of view; it is a whole new way for brands to get to know themselves fully.
As a designer, I create UI styles in Figma. Once I decided to update a colour value from one to another, I can only change the value in Figma. After I have done the update, I will go to Slack and…
When delivering a design system, design tokens ensure the style synchronization between design and development. A primary color in Figma is linked to color-primary in code. Same thing happens in text…
What makes a designer different from an artist? While an artist can step away and enjoy themselves in satisfaction from having created a great visual piece, a designer would know that this is where…
How to best use design tokens in your React components across pages and applications
A Design System’s strength comes from knowing how and when to apply options (like purple-40 or color-warning) correctly to contexts (like backgrounds or typography). This grounds the option as a…
Create Design Tokens from Figma, convert them to JSON, and how to set them up for multiple themes with Figma Tokens.
Leverage type-safety while working with a custom design token system in Styled Components
In this article I will break down some of the things I have learned over the years of working with design systems and some tooling you can use to help build your own.
What are design tokens, how do tools use them and how will the W3C spec change things?
Though the Design-to-code tools are being used widely by devs, the current mainstream design delivery in internet companies still relies on different tech teams (iOS, Android, H5, etc.) to implement…
This is a proposal to use CSS utility classes for common layout needs and access to site-specific standardized design tokens set in theme.json. Doing so will allow WordPress “core”, themes, and plugins to have access to a valuable shared CSS toolkit. The result is a WordPress landscape where WordPress markup and styles are easier to extend, site content is more portable, and themes and plugins are more interoperable.
One of the most common traits of a successful application is the consistency in the use of colours, shapes, and patterns that leads to brand identification. At Dream11, we aim to standardise our…
How to use tokens, such as brand colors and fonts, across multiple After Effects projects by storing them in a JSX file.
Design systems help standardize design language, create coherent digital products and maintain consistency.
When handing over designs to development, design tokens (in addition to the typical user-flows and prototype designs) can be the ultimate solution to eliminate the miscommunications that often arise in a typical design-to-development collaboration.
Figma is great. It's focus on design systems has allowed teams to collaborate better than ever before. One area that Figma lacks in though, is design tokens. Figma has Color Styles, but lack the ability to create semantic references. It has Text Styles, but it lacks the ability to define their values as atomic design decisions such as a common font family or font size scales.
Hi Folks, it's been a while since the last blog post. I had some holidays breaks and then a lot of things happened that didn't let me the time to post here. Now I'm back on the rails and it's time for me to introduce you a fantastic tool that I'm using for my project called Style-Dictionary.
Imagine a seguinte situação: uma engenheira e um designer estão construindo uma aplicação juntos. A desenvolvedora pergunta: Basicamente é isso que vai acontecer se não utilizarem algum nome que…
Let's see why a design tokens pipeline is an improvement that interests the developers, designers, and business stakeholders.
Design systems have become a popular topic of discussion lately. The consistency, efficiency, and organization they bring can help perpetuate the mission and feel that a product is trying to convey…
Design Tokens are indivisible pieces of an interface like colors, font-sizes, spaces, animations, etc… They allow product teams to better collaborate and ensure brand consistency across any platform.
In a recent project, I helped implement design tokens in an established design system. One of the more challenging parts of this work was updating the components to use design tokens. I learned a couple of things that might help speed up the process for others. Before we talk about…
Uno de los temas más comentados sobre Sistemas de Diseño son los famosos Design Tokens pero, ¿para qué sirven exactamente? En el equipo de Bnext estamos trabajando con ellos y los hemos aplicado en…
If you’ve been researching design systems, you’ve probably come across the term “design tokens.” Even if you’ve heard the term, you might…
You may need a subscription to Medium to read this article
We all strive for consistency. Having to manage different styles for different brands across different platforms and devices is overwhelming. The key to success: a shared understanding of decisions…
You may know what design tokens are and what benefits they can bring. But you may wonder how exactly to start using them and how you can integrate them into your workflow. I this article you will…
More and more companies are investing in design systems. Design systems help to create a single source of truth for teams to design, develop and realize
Prepare your design system in Figma for development with design tokens. Learn where to store Figma design tokens, create naming conventions, and design token tools for management.
Design tokens simplify brand support across different platforms by providing a single collection of variable objects for designing web, iPhone, Android, and other products.
While there is no standardized approach, efforts are being made to define best practices, led by a W3C working group and various individuals, startups, and companies.
Design tokens exist in a pre-processed state and lose most of their meta information when compiled and transformed, making their original state unrecognizable and limiting their transformability between platforms.
Design tokens are used to keep a consistent look across an entire system. How do you name them semantically if they have to make sense everywhere but also respond to the inner logic of individual components which are independently developed?
Design tokens have provided a visual foundation of many design systems since Salesforce pioneered the concept in 2014. I wrote an impassioned article on design tokens in 2016, and my energy on the…
I wrote the first 1.0 version of the plugin as MVP. That’s why the plugin was written in vanilla JS and plain HTML and it was pretty hard to refactor it. When I started to write it, I’ve encountered…
Recently I have come across a tool, called Style Dictionary, developed by Danny Banks at Amazon, that allows you to manage design tokens (or “style properties”) for a design system. I’ve used it to…
Unicyclist. Artist. Developer.
In this article I will show you how to build a Visual Studio Code color theme extension using Style Dictionary. Throughout the process I will try to explain concepts about VSCode theme development so you can apply them when you are creating a theme even if you don't use Style Dictionary.
In this article I will show you all the cool things people are doing to document design tokens. Hopefully, you will learn something new you can take back to your design system. Before we get started, a few quick notes.
A seemingly-straightforward digital project, like a website redesign or brand update, takes longer than expected and you’re not quite sure why? I think most of us working in tech have been there…
A couple of days ago made a free UI Kit in Figma of a nonexistent online magazine Wunderzine. I made it for a demonstration. And today I want to share with you how to maintain frontend works —…
In a recent code review, my passions stirred as I walked through a Pill component’s style with a designer teammate. “Look. Yes, it’s code, but look closely at those tokens. You know what this looks…
Slides I used for the Human talks in Nantes to introduce the design tokens: visual design attributes that are stored, organised, centralised and propagated, with the aim of improving the communication, the consistency and the maintainability of a web project.
When building a design system there is always a set of global, shared properties that become the basis of everything that gets built. This is part of the atom level of the "Atomic Design" principle – the font sizes, weights, line heights, colours, borders, background, spacing, sizing and z-indexes that are the very core of every single piece of Interface in your UI library.
