Into Design Systems Weekly - Design Tokens & how to sync them
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 methodology — bootcamp.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 Guide — edwche.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 Tokens — satellytes.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 components — uxdesign.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 Code — www.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 Community — www.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 Systems — www.youtube.com
#DesignSystems #DesignSystem #DesignTokens
Design Systems Events:
Design Systems - Failure Stories by Into Design Systems — www.intodesignsystems.com We'll be live Dec 7th 2022. A virtual meetup to bring together the Design Systems Community.
Thanks for reading! 🙌
Enjoy your day and hope to see you soon.
Cheers from your Design System Friends