Master Figma Tokens & Variables: Ultimate Guide to Advanced Naming and Set Up

Подписаться 8 тыс.

Просмотров 22 тыс.

50% 1

Unlock the secrets to @Figma token and Figma variable mastery in this tutorial on naming conventions associated with different variable collections, and then how to setup these tokens in @TokensStudio and then sync with Figma variables.
Join the community for free 1:1 slack support and more: www.uicollective.co/
Our Figma Plugin: www.figma.com/community/plugi...
UI Collective resources: resources.uicollective.co/
Book a consulting session (for enterprise support): tidycal.com/kirkland/60-minut...
0:00 An Introduction
0:51 Brand, Alias, Mapped Collection Intro
2:13 The Relationship Between Collections
4:53 Brand Variable Naming Conventions
9:07 Alias Variable Naming Conventions
11:42 Mapped Variable Naming Conventions
15:00 Setting Up Color Chart
17:33 Initiating Brand Themes
22:24 Initiating Alias Themes
25:59 Initiating Mapped Collection
28:29 Syncing Tokens with Variables
30:40 Building a Component with Variables

Опубликовано:

15 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@lewisaupy 5 месяцев назад

Thank you for popularizing these concepts, this video is a pleasure to watch! 🙂

@UICollectiveDesign 5 месяцев назад

Glad you like it! Please share the video :)

@wonsunparque4788 2 месяца назад

This much layering and componentization will require a dedicated design system team to maintain and keep it updated as business grows and changes. It is probably more appropriate for a larger organization. For a small design team < 5 people in a startup environment, it may be overly complicated and they probably should use a much simpler structure. A simpler and more straight-forward system will also make onboarding new designers much easier, which happens a lot for startup companies. Designers come and go. The design system should be easy to update for new designers to accommodate new business / brand direction as start up companies find their identities in the ever-changing business environment.

@UICollectiveDesign 2 месяца назад

I agree! However, this structure can still be applied in smaller scales. Emphasis is not necessarily on all the different variables required, but on setting it up right so it has the flexibility to grow.

@atharnadeem6947 3 месяца назад

I have learnt a lot from your videos. keep going brother.

@UICollectiveDesign 3 месяца назад

A lot more on the way! Please subscribe and share our channel where you can :)

@majidmanavi 5 месяцев назад

Thanks for your amazing content.

@UICollectiveDesign 5 месяцев назад

Glad you like it :) Please subscribe and share our channel

@NguyenThanhTung-xi2ju 5 месяцев назад

Thank you, I love this tutorial

@UICollectiveDesign 5 месяцев назад

Glad it helped!

@OlhaMitrova 5 месяцев назад

Thank you for the video! Still is unclear what is the purpose of the Alias collection if we can just make from the Purple 500 -> Surface primary. Could you please help me to understand why do we need this additional chain?

@nortim 5 месяцев назад

I'd like more clarity on this also

@1deplatt 4 месяца назад

I was just going to mention this. Why use an alias level just to add the words primary, secondary, etc. ??? Could we not just call the color on the brand level “purple -primary “

@JohnDrach 4 месяца назад

Everybody uses the color scale method in their design system. It looks good in the docs but who actually uses all the variants of those colors. You may for a hover, maybe a pressed state but the others I can never find a use for. Love the video. Not trying to detract from it. Just something see a lot. Would love to hear how other make use of the spectrums of color from their DS.

@UICollectiveDesign 4 месяца назад

So true. I like to keep my color scales to 5 or 6 to keep things clean. In one of my recent videos where we build out a library, I touch on this. Agreed that a ton of colors look nice in docs, but 80% of them just sit there.

@JohnDrach 4 месяца назад

I was watching some more of your vids this morning, and I came across this mention. Great content. Question, I noticed while running through some quick tests that in some cases, even though i'm on Figma enterprise I would get a popup saying I needed to pay $75 per seat to use variables. Do you know what the rule is, how many variables you can leverage before you're cut off?@@UICollectiveDesign

@adrian.uidesign 4 месяца назад

What would be your approach if a black #00000 is needed and/or white? Would you include them in a grey scale brand color or separate as the grey? How do you name it in the alias when a black can be primary text and secondary surface at the same time? thanks for your content! :)

@UICollectiveDesign 4 месяца назад

I would watch this video I released two weeks ago :) : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VoSo2__hN-A.html

@galuhsp4378 3 месяца назад

can we make some new color that has some opacity with it, but we use the reference form the brand/global tokens?

@UICollectiveDesign 3 месяца назад

Absolutely!!

@deeteekay6859 4 месяца назад

Building a color scale just by adding white to create light tones and adding black to create dark tones won't give you rich tints or shades that work well with gradients, and illustrations or that look like what you can find in nature. It is ideal to also make use of the luminance value of color to create a more natural tint or shade.

@UICollectiveDesign 4 месяца назад

Agreed - This is just an example :) I appreciate the dialogue!

@spikespiegel2511 2 месяца назад

It's the rookie way to do it. It won't provide an accessible colour pallet either.

@UICollectiveDesign 2 месяца назад

Rookie indeed! But great to get started. A lot goes into building an accessible pallet and there are so many tools out there that help now.@@spikespiegel2511

@illustrayking3243 Месяц назад

the better approach is uniform color using oklch() or learning munsell color system

@deeteekay6859 4 месяца назад

If your alias color collection is the same thing as your brand collection, what's the purpose of creating it? Why not just use the alias naming convention for the brand and use the brand collection to build the mapped collections?

@UICollectiveDesign 4 месяца назад

Great question! Your colours need a role. You can also have brand colors, that are not assigned a role. Therefore, brand is not always a 1:1 match of what is in alias.

@Akram-UXUI 12 дней назад

@@UICollectiveDesign Great..

@UICollectiveDesign 11 дней назад

@@Akram-UXUI Glad it helped!

@The3er0 5 месяцев назад

on 16:50 where you make color scale there a much easier way to do this. When you select a color just change HEX to HSB and change the two fields in the middle that represent white and black.

@UICollectiveDesign 5 месяцев назад

Great call out!

@bradmacdonald6591 5 месяцев назад

@@UICollectiveDesign Do you mean modify Saturation and Brightness?

@bradmacdonald6591 5 месяцев назад

Reducing the Saturation by 50%, is the same hex as taking your primary, reducing opacity by 50%, color matching with the extra square workflow.

@UICollectiveDesign 5 месяцев назад

That works as well!@@bradmacdonald6591

@ahzootube 5 месяцев назад

So if the brand colors given from the brand team are already aliases like "CTA Blue" and "Primary Blue", what would your approach be?

@UICollectiveDesign 5 месяцев назад

Primary/Blue is fine. CTA Blue would become Surface/Primary

@nutellanorbert2799 5 месяцев назад

Thank you! That was very helpful. I got the problem, that my tokens studio tokens and the figma variables and styles tending to lose connection between each other. besides the fact that naming and grouping are the same. is there a way to tie them up in a way that they are always synced in real time? I remember that this was once possible but can't remember how.

@UICollectiveDesign 5 месяцев назад

Don't believe they can be synced in real-time. I am sure there is a plugin for this though

@Exaltaweb 5 месяцев назад

If you do a super simple design system how would you simplify all these colors, sizes, etc?

@UICollectiveDesign 5 месяцев назад

That depends on the use-case. This already is quite simple as is.

@problemimentali 3 месяца назад

sorry, what's the purpose of using Tokens Studio to then just sync to Figma variables? I don't see any advantage in doing that as opposed to just do the setup directly with variables. Am I missing something here?

@UICollectiveDesign 3 месяца назад

With Figma's variable release in December, there isn't much point anymore. Will be releasing a video next week on this....

@problemimentali 3 месяца назад

@@UICollectiveDesign gotcha, thanks for the answer. I'll be looking forward for the new video

@Nicciolai 3 месяца назад

@@problemimentali me too

@UICollectiveDesign 3 месяца назад

Just posted the vid this morning@@problemimentali

@sophiemulders Месяц назад

Which video is this? I was wondering the same. And second question; i am new to tokenstudio and cant find a tutorial how it works ( applying to your design) (free version), do you have a video on that? So i can make a descision which to choose.

@mp11195 22 дня назад

I like 3-tier approach to variable collections, but it looks a bit odd to me to have a very specific variable in the Brand collection - radiusComponent. What's the reason for this? why not have it either in Alias' or Mapped collection?

@UICollectiveDesign 22 дня назад

Great question, I would watch the following video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WATzIK0Ai8I.html

@AmishEspacial 20 дней назад

@@UICollectiveDesign This link takes to this same video :)

@vaibhavnaik12 6 месяцев назад

I have one question, if we are using color theme as purple 500, 600, 800 etc and my primary brand color is 800. If future if the brand color got changed and new brand color is green 500, then how would it work across for changing colors?

@UICollectiveDesign 6 месяцев назад

Can you can adjust the brand primary in Alias

@vaibhavnaik12 6 месяцев назад

@@UICollectiveDesign in approach one this will still work but in approach 2 it is going to impact. Imagine in the current hover I used primary 400, and post new brand color update my primary will be 800, but over will be still 400 in whatever color shade it is available.

@whennn 6 месяцев назад

So my question was something similar to this. Let’s say as example you got on the basic token level of colors. Something like green , scaling from 1-9 lightest to darkest. Obviously 5 is the primary. Anyways. So all is connected to the level of mapping. But now the company has decided that the brand color is going to change to a blue. So, how do u link this in tokens without breaking it all. I mean is easier for designers to just go to tokens and change the variable name to BLUE and change the values, but what about on dev side. Cuz they need a consistent name for the tokens they use. Meaning they will have to change all their names now from green to blue. Not sure if there is a better name convention to use at the first level rather than just the color name.

@UICollectiveDesign 6 месяцев назад

@@whennn This is where you just adjust your primary color. No need to adjust the names in the brand collection

@UICollectiveDesign 6 месяцев назад

@@vaibhavnaik12 Yeah there would be some manual work there to repoint tokens, but no need to adjust anything in your brand collection... you're essentially just selecting a different primary color. Request to join our Slack and I can help you troubleshoot/

@michaelschultze3595 5 месяцев назад

I really like this structure. But I don't think I would go to the trouble of reorganizing an existing UI kit. I also find it a bit too "bureaucratic" or fragmented. If you could start from scratch, that would be different. Thanks

@UICollectiveDesign 5 месяцев назад

Filming a video now where I build one from scratch :) Agreed, reorganizing an entire UI kit is aggressive. But for those getting started or have questions about particular tokens, this was meant to help.

@michaelschultze3595 5 месяцев назад

@@UICollectiveDesign Sure ❤️