Design Token Setup! | Become a Figma Expert

Опубликовано: 17 Декабрь 2024
на канале: UI Collective

6,407

176

Want to take your design to the next level? Learn how to set up semantic design tokens like a pro! In this video, we'll dive into the world of design tokens and show you how to set them up efficiently, making your design process smoother and more scalable. From understanding the importance of semantic design tokens to implementing them in your workflow, we've got you covered. Get ready to elevate your design game and join the ranks of professional designers who know the secret to creating consistent and stunning designs.

*Please note that this is not the preferred approach to design token setup. Design tokens should ideally be a three-tiered approach, but this is a video request I get frequently! See below for link to building a three-tiered file.

** Also add all additional colour scales to the primitive collection, including reds, greens, etc. Sorry this was not clear in the video.

Ask UI Collective a question: https://uicollective.co/
Become UI Collective verified: https://uicollective.co/verified-expert
We build design systems: https://designsystemlabs.co/

Responsive design video: • Create RESPONSIVE Figma Designs!
Build a Design System (Three-tiered approach): • Build a Design System! Ep. 1: Figma T...
Buy me a coffee: https://buymeacoffee.com/uicollective
Purchase a three-tiered variable library: https://resources.uicollective.co/buy...

Our favourites:
Untitled UI: https://www.untitledui.com/?aff=bdzGd
Central Icon System: https://iconists.co/central?aff=bdzGd

0:00 An Introduction
0:26 Building a Color Scale
3:51 Building Primitive Color Library
19:35 Building Primitive Number Scale
24:26 Building Semantic Library
35:14 Semantic Widths & Radius
39:19 Responsive Collection Overview

#figma #uxdesign #uidesign