Тёмный

Figma tutorial: Intro to variables 

Figma
Подписаться 545 тыс.
Просмотров 486 тыс.
50% 1

Figma is free to use. Sign up here: bit.ly/3msp0OV
By definition, a variable is something that can vary in value or take on multiple values. Variables in Figma store reusable values, like color values and numbers, that can be applied to all kinds of design properties and even prototypes! A variable’s values can also reference other variables, making updating design systems a breeze. In this video, we’ll cover how variables work, and how to use them to represent design tokens and account for different modes and themes.
* Update: When following along with the tutorial at 10:30, the variable called ".5" will no longer work. This is due to our alignment with the W3C spec which doesn't allow periods in names. Calling the variable "spacing/half" will work, instead.
We are doing a follow-up in the next coming months where we’ll be separating out the “figma name” from the code syntax, which may let us loosen these restrictions. Keep an eye out for additional syntax support in the future.
Follow along with the file: bit.ly/44bHgC2
Learn about prototyping with variables with our other tutorial: bit.ly/3pfKk1h
Learn more about variables in Figma with our additional playground file: bit.ly/4490iJc
Learn more about design systems in Figma: bit.ly/3os0Afc
Help center articles:
Guide to variables: bit.ly/3Nh7JaK
Overview of variables: bit.ly/44bD2dG
Create and manage variables: bit.ly/447B9im
Apply variables to designs: bit.ly/3qVsnWo
Modes for variables: bit.ly/3qS3GKk
For more information on using variables with API and development, check out the links here:
- REST API: www.figma.com/developers/api#...
- Plugin API docs: www.figma.com/plugin-docs/wor...
- Import/export variables code sample github.com/figma/plugin-sampl...
- Styles to variables convert code sample github.com/figma/plugin-sampl...
Chapters:
00:00 - Intro
01:17 - Color variables
03:55 - Create tokens
06:00 - Apply variables
07:13 - Styles vs variables
08:17 - Modes
10:12 - Number variables
12:35 - Themes
14:11 - Wrap up
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #Config2023 #Variables #Designtokens #Tutorial #design #tips #DesignSystems

Наука

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

 

3 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 280   
@Figma
@Figma 11 месяцев назад
*1) Variables vs styles:* Many of you have asking about the differences between variables and styles, when to choose one over the other, and whether styles will sunset. We just published a new article to help answer those questions! bit.ly/3JYNJIO *(2) Spacing value ".5":* When following along with the tutorial at 10:30, the variable called ".5" will no longer work. This is due to our alignment with the W3C spec which doesn't allow periods in names. Calling the variable "spacing/half" will work, instead. Changes can occur during production of our tutorials and we are sorry for any confusion. We are doing a follow-up in the next coming months where we’ll be separating out the “figma name” from the code syntax, which may let us loosen these restrictions. For now though to stay compatible with the W3C community group standard, we can’t allow them. second-editors-draft.tr.designtokens.org/format/#character-restrictions Keep an eye out for additional syntax support in the future. Thank you for your understanding!
@samuelsmith620m
@samuelsmith620m 11 месяцев назад
I was at ConFig when this was mentioned and felt it was important for the community. Thank you for being so responsive; we love Figma! 💜
@IStMl
@IStMl 11 месяцев назад
Hi, why not allow variables to point to a set of values (like the gradient W3C token type) and get rid of styles? It's confusing to have both features.
@IStMl
@IStMl 11 месяцев назад
@@michelets9536 a style can contain multiple layers of fill or border color
@NileGold
@NileGold 11 месяцев назад
spacing/half creates a group and names a variable half lmao
@IStMl
@IStMl 11 месяцев назад
@@NileGold yes thats the point
@TyranVz
@TyranVz 11 месяцев назад
These are really awesome! Also daunting for projects with massive "OLD" design systems already in place
@sauhardshrestha1118
@sauhardshrestha1118 11 месяцев назад
I had been maddening about tokenization in figma over the past few weeks. This is awessssooooommme!!
@SilverAsakura
@SilverAsakura 11 месяцев назад
Great tutorial. Took me 1 hour to follow, but the end result is so satisfactory. I would advise to provide 2 files: absolute starting point, and completed. Messed up my tokens so many times because of the "completed" versions available as I was following along. Only issue I had but thought it was worth mentioning.
@lukejonesme
@lukejonesme 11 месяцев назад
This new feature is amazing. I would love to be able to user the number string for any numerical values, however... e.g. type scaling would be so so so powerful. Vertical rhythm is often so closely tied to the sizes of the fonts (for example) that being able to set core/primitive values and then tokenize these same numbers for padding, spacing, and font sizes would be wonderful.
@iamtharunraj
@iamtharunraj 11 месяцев назад
I just love the animations in Figma tutorials! Easy and interesting. Keep doing these!
@hellojohnnymac
@hellojohnnymac 11 месяцев назад
We're loving this at Pegasus, I'm wondering if in an update you could consider making a few changes that might streamline working with large systems in a future update? 1. I'm wondering if there could be a structure where you could craft: themes (modern, brutalist) / modes (light dark) / and something else to control spacing (comfortable dense). Having it all at one level with different properties that don't always translate is a lot of duplication and maintenance. But I'm sure it's something that's being looked at internally. Can't wait to see how this develops! 2. When you add a new variant today you have to select custom or libraries tabs to get started. If you have already set your global tokens and now want to reference them it's an extra mental step every time to switch from custom to libraries tab or visa versa. Remembering what tab you where last on would improve workflow when adding hundreds of aliased tokens tremendously. 3. Exporting to a design token spec .JSON file would be a killer feature. Having this would truly unite Design & Development. Excited to see how this develops and thank you for listening to the community and delivering what matters.
@melaniedrxnurole
@melaniedrxnurole 11 месяцев назад
Thank you for this great tutorial! Can't wait for the font and boolean tokens as well :D It would be so good to be able to hide the primitives from the list of colours and only have tokens show instead!
@samuelsmith620m
@samuelsmith620m 11 месяцев назад
An important note for everyone: in the video, when they are setting up Number Variables, they create a variable called ".5" for spacing values 10:30. This is currently an illegal syntax because the W3C spec on Design Tokens forbids the use of periods within token names. EDIT: Figma has addressed this and has pinned a reply to the top of the comments addressing this. Thank you, Figma! ❤️
@polinachelpanova6792
@polinachelpanova6792 11 месяцев назад
Yeah, I was def a bit thrown off by that, when I followed the tutorial :)
@shiryum
@shiryum 11 месяцев назад
I'm not familiar with the rule you are referencing, but did notice that the ".5" name is actually for the primitives collection. That primitive variable is then given a valid token name in the token collection. Does that change the validity of it's use? Do you have a link to the W3C spec you are referencing. I'd like to learn more about it but couldn't find it.
@Figma
@Figma 11 месяцев назад
Thank you for flagging this. We have added an explanation for this error pinned in the comments above, as well as how to address it while following along with the tutorial. We also included the W3C spec for anyone who wants to reference it. Keep an eye out for additional syntax support in the future, and thank you for your understanding!
@arthurbeginyan4633
@arthurbeginyan4633 11 месяцев назад
In general the video explanation animation is horrible. It doesn’t match with voiceover in terms of context in most place.
@sebastianyepes8154
@sebastianyepes8154 11 месяцев назад
Would be nice to have and example of an existing design system to variables.
@TheRiteHand
@TheRiteHand 11 месяцев назад
Looks to be a well-rounded feature. Good work, Figma team!
@marzoval9551
@marzoval9551 11 месяцев назад
I had just started learning about design tokens the past couple weeks and this update is so timely.
@captainjunsan9125
@captainjunsan9125 8 месяцев назад
This video is insane. The content is crazy good and the presentation is awesome. Definitely need to re-watch this a few times to get the hang of this workflow but it really looks like it takes half the effort to do twice the work! Figma is changing the design world for the good!
@HaraldHumml
@HaraldHumml 11 месяцев назад
Amazing guys! Looking forward to more variable type support!
@megaroeny
@megaroeny 11 месяцев назад
Woohoo!! Would be awesome if you could easily import/migrate Styles to Variables
@HardiRiddhi
@HardiRiddhi 10 месяцев назад
Mind blowing work done by the Figma design team! Kudos to the team!!!
@ansieguzie
@ansieguzie 11 месяцев назад
Loove it guys! It shows it's been a big team effort to provide us with this feature! Thanks.
@TonyAnthony_Oficial
@TonyAnthony_Oficial 11 месяцев назад
it would be more interesting to bind a color variable to an already created color style
@zenrolesdesign
@zenrolesdesign 11 месяцев назад
I tried this out, it and it turns out that you actually can. Just edit a color style, and when you are on the color picker, select libraries and you'll see your color variables in the list.
@michalguy
@michalguy 11 месяцев назад
@@zenrolesdesign Amazing!
@TonyAnthony_Oficial
@TonyAnthony_Oficial 11 месяцев назад
@@zenrolesdesign Interesting, but I was referring to associating a variable to a "color styler", because the "color styler" would actually work as a global scheme. I didn't see much sense in associating a variable inside a "color styler", if figma allows the gradient option in the variables, the "color styler" might not even be useful anymore.
@zenrolesdesign
@zenrolesdesign 11 месяцев назад
@@TonyAnthony_Oficial I see. So you mean the opposite of what I said? Yeah you can't assign two values to a variable. By general definition, a variable can only hold one value at a time, just like in math. What I think could be useful instead is, use color styles as the design tokens, then use variables as the primitives. I think functionality will work the same way but take my work with a grain of salt for now. I haven't experimented on the variable feature extensively.
@user-bt8kf5xb4l
@user-bt8kf5xb4l 11 месяцев назад
this is sick 🚀🚀🚀🚀One thing i've notice it's a lot of scrolling because you cant reorder the table in the local variables , waiting for the update ✨
@benemma5602
@benemma5602 8 месяцев назад
What a bittersweet experience for old figma design systems esecially large ones...don't even know where to start from porting our old design system to work with this new paradigm. Completely makes alot of duplicated frames expandable
@djashawe88923
@djashawe88923 11 месяцев назад
Thanks a lot, Figma, for the great content. It would be really nice to only have Tokens show up in the modal when applying variables (or have an option to turn off the visibility of Primitives). We don't need Primitives except for the initial setup, and it creates unnecessary cognitive load to ensure that Primitives are not accidentally applied. 🥺
@user-fs1nw3ow2o
@user-fs1nw3ow2o 11 месяцев назад
Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci Merci. That's Amazing. We need a way to import or export in JSON format. And maybe implementing the Copy Paste function. But But I know, that's only the beginning. Congrats Figma Team. Keep the good vibes.
@CarlosAndresVelasquez
@CarlosAndresVelasquez 4 месяца назад
Oh man I could rewatch this forever. And will.
@bradmacdonald6591
@bradmacdonald6591 10 месяцев назад
Thank you for the updates and breakdown of variables - As a suggestion for future tutorials, remove or lower the volume of the looping background audio.
@Dampealx7
@Dampealx7 10 месяцев назад
She has such a smooth soft voice. It's make learning this stuff super easy. Excellent video
@BigCarso
@BigCarso 3 месяца назад
I wouldn't call that intense vocal fry smooth.
@jangucreates
@jangucreates 24 дня назад
THIS is rhe video or breakdown i was looking for when variables were announced!!!! I cant tell you how many times i tried to explain the concept of figma variables and couldnt do it justice on how amazing they are and what they are capable of. Now i can just skip the me excitability yelling at the person I'm trying to explain this to and thisr confused face. Just. Heres the video. Watch that.
@AkinsRealm
@AkinsRealm 11 месяцев назад
As I see it Figma continues to include some flexibility aspects from the development for advanced design & prototyping, great!
@burcugol
@burcugol 11 месяцев назад
This new feature is amazing.I love it, Thank you Figma❤
@petrbilek7614
@petrbilek7614 11 месяцев назад
Amazing and congratulations on this massive update.
@lynnduong7525
@lynnduong7525 11 месяцев назад
Loving this update and makes devs live soooo much easier
@ugocriatmoon7283
@ugocriatmoon7283 10 месяцев назад
Great feature, need practice to understand, so powerful to handle the token approach on UI concept
@dzmitrysiarheyeu9430
@dzmitrysiarheyeu9430 11 месяцев назад
There is not enough swap function from the styles in the variables. I can't imagine how to quickly migrate an existing project with thousands of layouts and components from styles to variables. But, of course, the update is cool, thanks!
@omsoo
@omsoo 11 месяцев назад
From the design token side, this is for design system that uses multi-tiered token system that references each other. If you aren't maintaining DS, this is not going to provide too much for color styles but will be more valuable for different mode such as light and dark or languages.
@alexeytretina
@alexeytretina 11 месяцев назад
This is absolutely mindblowing!
@scaredypicker
@scaredypicker 11 месяцев назад
Very cool indeed, but can the tokens also be used in libraries? I can see how having the proxy to primitive styles is useful, but it would be more useful if it could be applied across all instances that use that library instead of only locally in a file
@DesignDen673
@DesignDen673 11 месяцев назад
Is there a video on how this layout was created using auto-layout and wrapping? It will be quite helpful if there is a video series on creating layouts with best practises for dev hand-off using Figma
@Tschoii90
@Tschoii90 6 месяцев назад
I'm in awe and overwhelmed. Help.
@robertjanezic
@robertjanezic 11 месяцев назад
Very cool, but you're basically having to create styles twice. It makes the most sense imo to create styles once, then bind your already created styles to variables.
@jordan_hughes
@jordan_hughes 11 месяцев назад
+1 trying to wrap my head around why it’s done this way… just treat styles as “primitives”
@justinemontgomery7718
@justinemontgomery7718 11 месяцев назад
@@jordan_hughes It enables scalability and simplicity to themes within your product the same way you can reuse colors in Token Studio. Once it's set up properly theming will be automated. This works well if you also want to rebrand in future or add more themes later on. It's easier to maintain and use colors semantically. Literally a game changer for products that use Design Systems or have multi-branded themes. Adobe Spectrum is a great place to learn more about how to use Variables (tokens) more effectively.
@TonyAnthony_Oficial
@TonyAnthony_Oficial 11 месяцев назад
exactly what I thought, because bifurcating this style in variables would be more practical, because the "color styler" is in fact already a global scheme and can already be treated as primordial tokens
@curran18
@curran18 11 месяцев назад
As I was thinking about how I was going to pitch Variables for the teams I work with, and how that differs from Styles. This seems like double work to have and use both, right? What will happen to Styles and Variables when they meet?
@psychurch
@psychurch 11 месяцев назад
@@curran18 the main benefit of using variables is that you can assign the same style to multiple variables and then make global changes specific to defined variables eg primary-text and button-text variables can both reference the same white style but later can be changed independently. The inability to link styles to variables as mentioned above however does add extra work. I imagine its because of the limitation on values and itll probably be a feature in the next update ¯\_(ツ)_/¯
@oluwatosinobalana9170
@oluwatosinobalana9170 11 месяцев назад
This was really helpful. Thank you
@ayooluwakolawole
@ayooluwakolawole 6 месяцев назад
Great video! Also just wanted to add that the music was groovinnnn!
@quatrical
@quatrical 11 месяцев назад
this + tailwind UI will be a fantastic combo!
@AJ-yj6kd
@AJ-yj6kd 11 месяцев назад
how specifically? Would love to know more about this!
@abulut
@abulut 11 месяцев назад
What does this mean for our existing design systems with already defined many colors and text styles? Does this also mean that we first have to create styles, and then design tokens afterwads? If a color change happens, does that also mean that we have to change the color in the styles and in the variables section?
@AngeloRandazzo
@AngeloRandazzo 11 месяцев назад
this is great! Probably the best features (after autolayout)
@roter13
@roter13 11 месяцев назад
Dev view has to be up there too
@rbazzle
@rbazzle 11 месяцев назад
i'm torn between doing all of this work myself or waiting for someone to make a variable import plugin. Or for the material themer plugin to integrate. That would be awesome as a quick way to start.
@chunjiaouyang3410
@chunjiaouyang3410 10 месяцев назад
Hi, aren't we also able to change the color, for example, the whole border color, by using the "selections color" panel and locate the color and then change all of them? compare to variables, I feel it's also an easy way to change all the colors at once. But I get the variables can work as a preset for different themes.
@matrixtomato
@matrixtomato 11 месяцев назад
great video, I needed it so much
@KinFilms
@KinFilms 11 месяцев назад
Is there a way to scope variables to a component instance? If I make a field with plus and minus buttons, I would want them to just work by default. If I need to make a local variable for each instance, it will slow down my workflow. The feature as is will massively improve my workflow. That said, I'm a user; my entire role is to ask for more the moment I get something incredible.
@zhovnir
@zhovnir 11 месяцев назад
Good, but how about export json?
@omsoo
@omsoo 11 месяцев назад
and import too 😄
@N8ivAN1mal
@N8ivAN1mal 11 месяцев назад
So how do we link these with styles? Or atleast import our components and styles in bulk?
@morgan.shaffer.design
@morgan.shaffer.design 7 месяцев назад
this was very helpful to my team!
@jeffreynixon2364
@jeffreynixon2364 11 месяцев назад
We have been swapping libraries to theme components from another library. This works far better and much more seamlessly since the designer doesn’t have to built out the themes locally, they cannot change the values and it applies to the entire file rather than a selected frame. It would be great if the variables from one library would be replaced by the variables from another library. I tested it and it currently does not. Bummed. Hopefully the demo on incorporating variables in a design system will cover a solution. Right now I am skeptical seeing that it does not address our needs of building, maintaining and issuing global variable sets.
@leburnski
@leburnski 11 месяцев назад
Using the ½ emoji seems to be a workable solution as a replacement for .5 in the spacing primitives section. Not sure if that presents any issues with exporting though.
@dggd1975
@dggd1975 11 месяцев назад
These are great - I would love to see the ability to add text size as a variable. I am currently trying to create 4K assets from an existing ui kit and had hoped to be able to assign two different variable modes regular and 4K. I have tested and it works great for everything except text - which is a darn shame
@Figma
@Figma 11 месяцев назад
Hello, thanks for the feedback! Typography and image variables are coming soon, learn more about it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-M0NU5QFLCl4.html
@tehoko
@tehoko 11 месяцев назад
Do you plan to allow resizing the right sidebar? It's filled with icons, now more icons in fields on hover, and names of variables don't fit without truncation. The sidebar and _all_ popups need to be resizable horizontally.
@zecurox
@zecurox 11 месяцев назад
figma please read my comment for improvement of variables: Please add variable on font size, so we can set up the size based on our variables. the use case would be so we can set 2 modes, mobile and desktop. sometimes especially on header of landing page, we are using 2 different size of font. the mobile usually smaller. so if you are adding the variables on font size, we can easily transform our design from desktop to mobile.
@taskforceown
@taskforceown 11 месяцев назад
pretty sure they said fonts are v2 sometime this year at figcon.
@sohidurrahman1107
@sohidurrahman1107 11 месяцев назад
Just amazing variable
@Viper-wj5zs
@Viper-wj5zs 11 месяцев назад
The idea sounds good!
@romanuliashyn4288
@romanuliashyn4288 10 месяцев назад
it's amazing!! good work
@canalul0
@canalul0 11 месяцев назад
Impressive, but how about exporting tokes in JSON? Should I use Figma tokens instead plugin Tokens Studio? Can somebody say anything about this?
@nick_r123
@nick_r123 5 месяцев назад
Creating semantic tokens and then placing them in groups seems a little odd given the name doubles up in the code. For example with spacing, creating spacing-lg and then putting it into a group called "spacing" results in the following "var(--spacing-spacing-lg .... ". What's the thinking here? Should the tokens not be setup as spacing/lg to generate cleaner code?
@user-yo1be6nb7j
@user-yo1be6nb7j 10 месяцев назад
I also have a question when we use google material theme creator it creates all of these styles. would it integrate in the variables or is it possible to select them in variable panel or we have to add them manually
@stephen-ullom
@stephen-ullom 11 месяцев назад
No way I can switch now. Such a great product!
@markvogelaar
@markvogelaar 11 месяцев назад
Good tutorial. I do feel like the brutalism mode feels less brutalist that the first one though. What makes pastel purple brutalist?
@karimm.6465
@karimm.6465 10 месяцев назад
Hello ! Thanks for the video? I would like to know what are you calling surface-secondary and surface-invert ? What is "surface" means and "invert" ? Thank you, I know it's not about this but I would like to know, maybe I am missing something here...
@user-oi1en6mw9j
@user-oi1en6mw9j 11 месяцев назад
Is there a way to automate the creation of systems of variables? Pretty much every product is made up of colours, corner-radii and font sizes (for the time being at least), and it would be great to be able to crate these systems at a click of a button and then tweak them, as opposed to having to manually input every variable from scratch.
@andersonaf
@andersonaf 11 месяцев назад
@Figma Is there a way to see visually if all elements in the canvas have variables without the need to click each one? Thank you for who knows it!
@olamideolabintan7024
@olamideolabintan7024 2 месяца назад
Please, is this tutorial still any good now, after all the updates? Or is there an updated version?
@dorianariadnaalcalagil2089
@dorianariadnaalcalagil2089 11 месяцев назад
I don't get why we need need primitives and tokens. Can someone share any resource where it is explained?
@JM-vm8mz
@JM-vm8mz 10 месяцев назад
Generally, do we create variables in the design system or just hi-fi design wireframes?
@shibly95
@shibly95 11 месяцев назад
Ohhh no.. revolutionary ❤
@krishnaramnavaneethakrishn9426
@krishnaramnavaneethakrishn9426 11 месяцев назад
The features are really awesome, but adding library to gradient would solve my problem. 😊
@Slaine2watch
@Slaine2watch 11 месяцев назад
Just Amazing!
@hndragnwn
@hndragnwn 11 месяцев назад
Any tutorial to have the "Select All/UnSelect" checkbox like in the table?
@arunsoma10
@arunsoma10 11 месяцев назад
this is great feature! I didn't understand a thing
@sendyofindia
@sendyofindia 11 месяцев назад
This is awesomeness ❤
@fernwehtwl
@fernwehtwl 6 месяцев назад
this is good but how do you categorize and organize if you are building a design system with 40+ components for a saas platform?
@beryl.pretorius
@beryl.pretorius 11 месяцев назад
Where can I find more information about some of the terminology you used? Like Brutal theme, 8pt grid systems, etc. instead of looking them up individually? Is there a library of terminology like this somewhere?
@csFranciscoT
@csFranciscoT 11 месяцев назад
I suggest looking them up separately. "Brutal theme" derives from brutalist art and architecture applied to screen design, 8pt grid system is a typography concept based on design rhythm. Diving into these concepts and understanding how they came to be is only going to make you a better designer. Good luck!
@kamakamafruite
@kamakamafruite 11 месяцев назад
I really like this! However, I have a question about its integration into a design system. If I include this in my design system file, would it be limited to that specific file and unavailable for use in other projects due to localization constraints?
@omsoo
@omsoo 11 месяцев назад
If you added Variables in the DS library file and publish it, it will be available to those who have that library assets enabled. You can also hide each variable from being published.
@michaelthourigan
@michaelthourigan 11 месяцев назад
This. The feature is exactly what I wanted, but if it can only be used locally it's a fail.
@michaelthourigan
@michaelthourigan 11 месяцев назад
@@omsoo you're right, thanks
@creativeembargo
@creativeembargo 11 месяцев назад
No its usually connected to a repository, and variables/tokens are stored as a JSON file
@kamakamafruite
@kamakamafruite 11 месяцев назад
@@omsoo Allright, found it thanks!
@cartertanton1668
@cartertanton1668 11 месяцев назад
right clicking on several variables does not bring up create new group for all option, instead it highlights only the variable you are right clicking on and allows that one to be added
@Und3rtak3rZ
@Und3rtak3rZ 11 месяцев назад
Ohhh. And how easily migrate now from our existing style approach (based on Figma Studio plugin) with ton of styles to variables? I don't see JSON support or anything else.
@jinskim7615
@jinskim7615 4 месяца назад
On 7:42 - In Tokens section of Local Variables panel, I can see each token is connected to which primitive. Is there a way that I can see each primitive is connected which token?
@itssagarjagtap
@itssagarjagtap 11 месяцев назад
Trust me I was thinking about nesting variable under variable last week 🎉❤
@noisehead
@noisehead 11 месяцев назад
Is it possible to reference a color but make changes to it like 50% opacity? because i can not find a nice way to do that but to create a new color that has a 50% alpha.
@IStMl
@IStMl 11 месяцев назад
is the json in W3C fornat?
@sevenw7150
@sevenw7150 9 месяцев назад
What about design system or UI kit? Traditionally we create those colors in a design system fig file and label them with "Shades", "Primary", etc. With variables, it seems no longer necessary
@biglillthings
@biglillthings 6 месяцев назад
Hey Figma team, please provide the option to rearrange the collections in colors panel. Currently, the Primitive collection appears before the Tokens collection. As a user it becomes difficult for me since I need scroll down and search variables from Token collection. Offering the option to rearrange these collections would significantly improve our workflow.
@jazzybeat28
@jazzybeat28 11 месяцев назад
Option to copy/paste or import variables from a spreadsheet?
@MrJmhess77
@MrJmhess77 11 месяцев назад
Good Stuff! I can't wait to see where this all goes in the future especially with the purchase of Diagram.
@piposulpico1055
@piposulpico1055 11 месяцев назад
Also do something like "Create new Family" from a group of instances where you can select a new parent.
@pepa007
@pepa007 10 месяцев назад
OK Someone at Figma definitely loves Tailwind. Glad to have Tailwind-ready infrastructure in Figma. Has anyone actually ported the default Tailwind values into Figma though? All those sm, lg, xl, 2xl varialbles, 1,2,4,8 variables, etc? All those variables we see in the video - so that I don't have to retype them manually 🙂
@valdsonsouza8608
@valdsonsouza8608 11 месяцев назад
Amazing!
@dr_broad
@dr_broad 11 месяцев назад
@figma Is it possible to apply a number variable as a type size? Im not seeing how to do this in Figma
@Kuwandi
@Kuwandi 8 месяцев назад
I’m new here , isn’t variable’s essentially like css style sheets ?
@MrKarnaukhov
@MrKarnaukhov 9 месяцев назад
Hello! I don`t know how to write to your support guys, but I have suggestions for improving the flexibility of working with style, and color Collections. Could you make possibility to move style from one collection to another? I have cases in my workflow when I create a separate Collection for some style but after I realize that it should be in a different collection and because I already attached some text properties to that style moving this style to another collection can become a nightmare
@hereticmilk
@hereticmilk 11 месяцев назад
How to export json for hand off to dev?
@andreasnordenson7156
@andreasnordenson7156 11 месяцев назад
id love the function of multiplying from a primitive (e.g baseSize * 1.2) :)
@Distant_galaxy777
@Distant_galaxy777 11 месяцев назад
Can tokens also be published for use across multiple files?
@rsheh1-iy5he
@rsheh1-iy5he 11 месяцев назад
Awesome updates! Im wondering if you have all of your tokens already established in the 'Token's Studio' though, how you can sync them to variables. Or bring the ones already created in Tokens Studio into variables.
@luklear
@luklear 11 месяцев назад
Tokens Studio already has an answer for that 😊: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-a12TuEaiSqc.html
@blaskotron
@blaskotron 11 месяцев назад
If you have the premium subscription with themes you might be able to, they're already releasing updates
@rsheh1-iy5he
@rsheh1-iy5he 11 месяцев назад
@@blaskotron unfortunately dont have a premium. Hopefully there is a way to do it on the free version
@chelseastudenski
@chelseastudenski 11 месяцев назад
@@rsheh1-iy5he there is no way with the free version of Token Studio because you need the themes feature. Theme Groups are how they can map to collections and modes in the Figma Variables setup. They cover it in more detail in their release notes (tokens.studio/changelog/release-1-37) and support docs (docs.tokens.studio/variables/creating-variables)
@rsheh1-iy5he
@rsheh1-iy5he 11 месяцев назад
@@chelseastudenski thank you!
@TrickyPasta
@TrickyPasta 10 месяцев назад
What's the name of the music... it's amazing
@SciampagnaLoic
@SciampagnaLoic 11 месяцев назад
Is there any ways to have text tokens ? I mean font-size, font-weight, ...
@chonathew
@chonathew 11 месяцев назад
Does variables depreciate styles?
Далее
Figma tutorial: Prototype with variables
13:23
Просмотров 295 тыс.
Figma tutorial: Variables for typography
12:58
Просмотров 69 тыс.
Любой автомеханик 😂
00:34
Просмотров 321 тыс.
Is it Cake or Fake ? 🍰
00:53
Просмотров 3,5 млн
ГЕНИИ МАРКЕТИНГА 😂
00:35
Просмотров 3,2 млн
Intro to Auto Layout | 2023 Update | Figma Bites
5:38
Master Figma variables in 7 minutes
7:13
Просмотров 47 тыс.
Figma Variables Setup: Building a Variable Library
43:37
Ultimate Guide to Figma Variables and Design Tokens!
33:04
Power up all cell phones.
0:17
Просмотров 50 млн