Into Design Systems Weekly — Design Tokens & how to sync them

Intodesignsystems
4 min readNov 29, 2022

--

Hey Design System Friend, here are our latest favorites from the #DesignSystems🪐space:

The Design System Guide: What are Design Tokens?thedesignsystem.guide
Step-by-step Interactive Handbook

Intro to Design Tokens. Design Tokens are the missing link in the Atomic Design methodologybootcamp.uxdesign.cc
While haters will claim they’re not that different from CSS variables, the truth is they go far beyond that naive comparison and structure a solid Design philosophy. Atomic Design refers to…

How to Use Figma Constraints: The Simple Guideedwche.medium.com
The constraint feature in Figma lets you specify how an element should be positioned or sized within a frame. This way, you can position elements in a frame statically or dynamically. For instance…

Installing & Syncing Design Tokenssatellytes.com
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

Figma plugins that help with communication with engineers bootcamp.uxdesign.cc
Measure is a tool that visualizes the stats of any object in Figma. It directly displays on the screen of object’s name, variants, font, font size, width, height, opacity, spacing, etc. With this…

Design system breakdown: Buttons. Part 1 of a deep-dive series on specific design system componentsuxdesign.cc
I’ve been toying with the idea of more in-depth breakdowns of specific components in Castor for a while, and the humble Button seemed like as good a place to start as any. Here I break down some of…

One formula to rule them all: the ROI of a Design System uxdesign.cc
TL;DR: Design systems are a crucial success factor for digital businesses, and virtually every major player works with one. Still, they can sometimes be hard to sell to management. Here’s a…

Typography in Design Tokens for Figma and Codewww.marcandrew.me
In this post I share what I’ve learned working on the typography system for Cabana (a design system for Figma built on design tokens).

Figma UI Libraries:

🤗 Friendly UI kit | Figma Communitywww.figma.com
Welcome to Friendly UI kit! Friendly UI kit is a FREE UI kit and design system that can be used as a starter for any project. This kit comes with everything you need to build your next product : 🎨 Global styles / Design tokens❖ 10.000+ perfectly crafted components, variants & component properti…

Design System Videos:

Versioning Design Systems — Gijora Dammann Live — Into Design Systemswww.youtube.com

#DesignSystems #DesignSystem #DesignTokens

Design Systems Events:

Design Systems — Failure Stories by Into Design Systemswww.intodesignsystems.com
We’ll be live Dec 7th 2022. A virtual meetup to bring together the Design Systems Community.

Want to dive deeper Into Design Systems?

Are you ready to take your Design Systems skills to the next level? Our Design Systems conference was a huge success, but if you missed it, don’t worry! You can still get all 22 recordings of live presentations and Q&As — that’s 20 hours 📼 of top-quality content from over 20 industry experts, plus two workshops to help you dive deeper into the world of design systems.

Join us for a deep dive Into Design Systems ⚡️ with speakers from companies like Volkswagen, IKEA, PayPal and many more. You’ll learn from the best in the business and come away with new skills and insights that will help you take your career to the next level. 🚀

👋🏻

We hope you find these resources useful and that they help to inspire your own work in the Design Systems space.

As always, we’d love to hear your thoughts and feedback in the comments below.

Cheers from your Design Systems Friends

--

--

Intodesignsystems

🚀 We’ve Helped Thousands Become Better Design System Experts 👉🏻 Join our expert network: https://www.intodesignsystems.com