Tokens, variables, and styles - Update: Introduction to design systems

Рет қаралды 110,538

Күн бұрын

Figma is free to use. Sign up here: bit.ly/3msp0OV
Habitz design system (with variables): www.figma.com/community/file/...
Previously in our Intro to Design Systems course, we followed Kai-a product designer at a habit-forming app called Habitz-on their journey to building their first design system in Figma. Kai has been learning about design tokens and believes this could be the next step in supporting scalability of the Habitz design system. Come along with us to learn more!
Introduction to design systems playlist: • Introduction to design...
Styles in Figma: help.figma.com/hc/en-us/artic...
Guide to variables in Figma: help.figma.com/hc/en-us/artic...
The difference between variables and styles: help.figma.com/hc/en-us/artic...
Components, styles, and shared library best practices: www.figma.com/best-practices/...
Chapters:
00:00 - Introduction
00:55 - Design tokens
01:12 - What are design tokens?
02:16 - Aliasing
03:49 - Token organization
04:22 - Primitive tokens
04:55 - Semantic tokens
05:37 - Component-specific tokens
06:34 - Token ordering
07:07 - Implement tokens in Figma
08:16 - Migrate tokens
8:40 - Creating primitive tokens
09:08 - Tip: color scoping and hide from publishing
09:31 - Creating tokens collection
10:39 - Dark mode and spacing tokens
11:26 - Spacing tokens
11:40 - Tips for naming tokens
12:36 - Wrap up
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

Пікірлер: 42

@camward957 8 ай бұрын

Amazing. Love that theres a section on migrating colour styles into variables and why that makes sense

@vindicator2385 8 ай бұрын

Great video, would love to see more content on managing multi-brand design systems.

@GeorgesBlog Ай бұрын

did you find anything for this?

@melboogiedown 2 ай бұрын

This is wonderful. Thank you so much for this detailed information!

@megaroeny 8 ай бұрын

Fantastic breakdown!

@MyDigitalHub 8 ай бұрын

Nice updates

@shipaleks 7 ай бұрын

Do you create yet another collection for component specific tokens, or after semantic token you should just arrange it to an elements?

@psddesignernet 8 ай бұрын

would love to use the numbers for font size , when is this feature coming ?

@pradyumnaux 6 ай бұрын

Woow Great info

@reyesdelpech 2 ай бұрын

Amazing video! Amazing course. I learned a lot! Wondering if the token system can be solve with a node-base interface? Thanks!

@REOsama 5 ай бұрын

This is great

@tim_sign 7 ай бұрын

Nice! The only thing i do not understand is why not to combine styles and variables, they kinda are for the same thing

@sqealerr 5 ай бұрын

7:35

@justinoneill2837 Ай бұрын

Really good overview! Curious if anyone has some ideas on how to merge Tailwind with something like this

@janniklas-design 8 ай бұрын

nice

@anoop4real115 Ай бұрын

Great content, do you have a tutorial where the habitz team is generating the client code out of this tokens? That’s what I am mostly interested. Please point to me to the right place if i missed it on the way

@brixencph 8 ай бұрын

How do you document what text color to use with primary/secondary/disabled buttons? It doesn't seem like that is covered in the overview: kzfaq.info/get/bejne/gN9zoMSUuN-oiWg.html

@kmylodarkstar2253 8 ай бұрын

what about exporting?

@Underhills 8 ай бұрын

Think there's plugins that creates JSON files that in turn can be imported into variable setups. I'm really confused why Figma didn't make this part of the Figma functionality. Right now every variable setup is in principle included in every Figma project, no matter what page or section your on. This messed up my files big time, cause it's not possible to scope the setup and define what pages to assign those variables. It's confusing.

@tomashudolin7197 3 ай бұрын

But variables are in paid version only, right?

@Atul_25 2 ай бұрын

Awesome

@user-dd6iq5tk5u 5 ай бұрын

@FerjanyMuhamedali الفيديو ده معمول عن طريق برامج ايه اللى عامله رسومات الجرافيك والمونتاك

@djashawe88923 8 ай бұрын

The video content is commendable, but I found it challenging to stay engaged because the audio sounded like someone was simply reading from a script.

@JeffMcKeand 7 ай бұрын

Because it's a robot. You can do better @Figma 🤖👎

@Captivateitmedia 5 ай бұрын

That’s because it IS computer generated..

@GarrettSaxon 2 ай бұрын

I find it easier to follow for that exact reason.

@user-jh4nu7zq4r 4 ай бұрын

Please, if you have more than 1 video in one playlist - change the music) I really TIRED SO MUCH AAAAAA listen same lofi hip hop more than 30 min( It's killing me and my desire to watch a new video with the same music! You have a great animation in your video, now please think about change the music. Thank you!)

@designthinkingwithgian 23 күн бұрын

Or no music would be fine too

@sams32111 Ай бұрын

Kai Habits scores again

@MrConway007 4 ай бұрын

I'm still not getting the value of design tokens, they seem to me like they are just a repackaged method of tagging global styles to components, but we could already do that with global swatches and type styles anyway 🤔

@jpell185 2 ай бұрын

Great stuff, mostly spot-on, but the inclusion of color names (blue, pink, etc.) in the semantic layer is a no-no, and this video communicates its a yes-yes.

@mhewson 8 ай бұрын

@Underhills 8 ай бұрын

Wish you could scope variables so it doesn't get assigned to ALL pages. It's no way of doing that. Once you made your variable setup your stuck with that on every single page in the Figma space. Can't break the link or exclude them to make another variable set for a different project etc. It's not very flexible or functional.

@user-lv2kb1qy8d 7 ай бұрын

😵‍💫

@fernwehtwl 8 ай бұрын

the habiz design system is too much haha

@20mindesigns 8 ай бұрын

Its exciting to see the adoption of Tokens and variables into design, however these elements should be managed outside of the design tool. tools such as Style dictionary and Theo have existed for the past 7 or more years, it would be great to see an integration that accommodated that as the single source of truth. Wish you could scope variables so it doesn't get assigned to ALL pages. It's no way of doing that. Once you made your variable setup your stuck with that on every single page in the Figma space. Can't break the link or exclude them to make another variable set for a different project etc. It's not very flexible or functional.