Welcome to the premier destination for design system training and more. We have years of experience building enterprise design systems and aim to bring the same knowledge, to you. Join our Slack channel to chat with us!
Thank you for the video. When you speak of the 100 for colors, are you speaking of the formatting of 950 down to 50? Also, to get the variants in color, are you using a program like Color Impact, which helps you get the various levels of dark down to light?
@@UICollectiveDesign Thank you kindly. I am still stumped with the 950-50, as the colors to me are not levels similar to percentages. Thank you UI Collective.
After building the sequence of text styles containing size and line height properties do you then work on converting them to variables for handing the design off to devs? If you do, how do you organize and structure your text size and height variables for each text element? Furthermore, how do you structure text variables for different screen sizes and light and dark modes? Do you choose the light/dark modifiers as modes or do you choose the screen sizes (S,M,L) as modes? Can you share anything online about how to organize these text variables for design tokens?
Working on a vid for mobile text sizes now across modes. Aiming to have up early next week! I would also watch one of our latest vids on type variables if you haven't already. When you say for each text element, are you talking about each text size??
Why not just set up multiple modes in Figma variables directly instead, to get the same result ?🤔 There's a tutorial on Figma YT channel on how to set up diff themes with dark and light modes for each theme, and different typography and corner radius and everything for each theme
it's so hard... figma turns into photoshop step by step. There are so many things that are not intuitive: I created a new file and for some reason I see tons of variables in the new project. I don't know how to manage these cross-file variables... I feel like an old grandpa with the latest technology in my hand
Even though the "Mapped" collection for each brand makes it nice and neat the experience of switching different modes within a brand, the issue is that you must duplicate all your design tokens when doing Mapped/Coke, or Mapped/Coke_Diet etc. Therefore, if you delete one alias/mapped token in one place, you must make sure you delete it everywhere and ofc it also applies when adding new tokens. So in my opinion, in the end, this doesn't differ much from maintaining the same design tokens but in different BRAND FILES (e.g. Sprite DS, Coke Diet DS or Coke DS). In this approach, you still must import/recreate the same list of variables you have in your master, but you do it locally in the Sprite DS file, for example. The advantage here is that you don't need a Mapped collection, which basically exists just to make this workaround. With the local tokens that were copied/recreated from the master naming convention, you can be more straighforward and create Light x Dark in the first level of variables collection.
Hi! Thanks for the video. I've created a collection with its typography and created a desktop and mobile mode. I have also created (previously) both breakpoint styles: desktop and mobile. Now, is the use of a mobile style still necessary? How do my developers read the variables I have applied to the typography in both modes? The issue is that if I create a card and apply the mobile mode: the whole card will be mobile mode but if the dev clicks on each piece of text, it will still appear as a desktop style (with the mobile value variables). I don't know if this is understandable :D
@@UICollectiveDesign I've already talked to the devs and there is no need for styles as long as they see the variables tokens when they set it up in their environment.
The company I work for has multiple brand & we design for web & mobile, we are trying to setup mode swapping to cut down on reskinning work (and hell of a lot of typog style swapping), whats a good approach?
i'm facing a similar issue! right now i have "brand 1 light, brand 1 dark, brand 2 light, brand 2 dark etc" set up in my colors, but in typography i would be setting up "brand 1 desktop, brand 1 mobile, brand 2 desktop, brand 2 mobile etc". i'm experiencing a bit of a mindfuck for how to set up all the modes and making the swapping fast between frames. is this the same issue @hardboiled2000 ?
I really see your point in making less variables to make it less complex. But here is a thought though that people should know. And that is that if gap and padding are combined into one token called for example xl (24) . If for some reason you have to change the overall padding on 100 of elements and leave the gap as is. Well then you have a major problem, because you just applied the same token on both the padding and the gap thus linking them together if you change the setting of the "XL token". Just a thought- great video !
Very helpful video. I would like to share my prototype to some people in my company and track their usage. If I share the prototype and I open it on another computer, it will not update the variable on the main file. Everytime I launch the prototype it is reset to 0. Is there a way to have achieve this?
@@UICollectiveDesign I think it would remove the need for modes and aliasing to the extent we must today. It must be near impossible to get relative units to work if they decide to go this long, painful direction first?
@@WePiphany Agreed on that. Will be interesting to see how Figma manages to support the more complex functionality, without sacrificing the basic needs of the everyday user.
Is there any way if we could use % in letter spacing as I was trying it changes to pixel only...as we know the letter spacing varies basis font size...pls suggest a best practice to overcome this problem...
Figma should add an easier way to directly see the px values of the alias variables in the variables panel, now we need to detach the alias and then undo the operation in order to get that info just like you demoed. It could be a preview on hover, and perhaps tie that to a view option that could be defined in a variable settings section or simply in the view options in that top left global menu or something. The way it works right now is too quirky. The variable feature is out of Beta, but as you pointed out it's still a bit buggy at times. 🐛
Why did you assign your heading in an invers manner, with secondary to the primary weight and the primary to the secondary weight? I went back and forth to see if I could understand that but never did.
I'm a bit confused. What is the point of going from color -> alias -> map when you could just go from color -> map ? What value does the middle step make?
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?
Thanks for putting this together. Could you please share the link to more info about the collections? - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-n_YUZF2Hv9g.html I have watched a couple of videos from UI Collective on variables and I am still trying to wrap my head around this. 🙏
Thanks a lot. But with the number of settings and then all the scrolling to find the desired entry (see Time Stamp 32:00 and further), I prefer to stay with my settings. Styles instead of variables :-)
@@UICollectiveDesign When you say "between modes" - I'm assuming you mean between different screen sizes? Like Instead of have a H1 and a H1 Mobile, you would just have Header, and then select if it's mobile or not. .... My question is this - on a lot of sites I design - I don't change the type a ton between desktop and mobile. Mostly, just the big headers change size... I'm trying to understand when it's better to use variables vs styles..... Seems like when you'd have a certain amount of changes per states (screen sizes)..... Do you agree?
@@nicalorber8659 Yup, that's what I am referring to when referencing mode swapping. I'd say use variables but just connect them to styles. It will offer the flexibility to use modes and the benefits variables can offer.
Our design system needs to support three platforms (web, iOS, Android) each with their own font family. Web also has size variation depending on the breakpoint. Will you be covering how to properly set that up in a future video?
I would be interested to understand how it works too. Our design system supports three platforms (iOS, Android & Web) with iOS and Android using systems fonts such as SF Pro and Roboto with font styles that aren't similar (e.g., iOS uses only one body style vs. Android uses 2 body styles, etc).
In some way I am super confused because when I read through articles on the web I have always understood that you have H1 followed by a H2 followed by a H3, but then in the examples you showed they have a H2 followed by body which is normal but then followed by a H4 (so from my understanding I thought I would have to either go to a H3 or have a larger body bold to highlight the elements) Would you be able to explain this in a little more detail? 🥲
@@UICollectiveDesign appreciate the clarification! Another follow up question to this would be what is the difference between display text and heading text regarding it in coming in order and CSS naming as I have personally never heard of heading text referred to as display text so I’m not sure how to name it above my H1
This is obviously a half-baked feature with existing design requirements but a rough presentation. In my opinion, this feature can be ignored for now, and Figma will definitely bring new operational logic in the future.
Is your "Brand" Collection what Figma call Primitives? And Alias = Semantic and Mapped = Component level variables? I see a lot of different naming conventions
@@UICollectiveDesign Alright, I also see that they "Component level" tokens are at heavy debate at Figma is "Brand" your equivilant to "Primitives" and "Alias" your "Semantic"? I have been watching pretty much all your videoes, but I am still not sure about the Alias and Mapped layer, what is the difference and what do you believe each collections should contain? Do you have documentation somewhere? I also bought and tried to download your Figma file from the community page yesterday, but download did nok work. Sent you an e-mail regarding that.
@@Defehktzor Yup! Thats right. For difference between alias and mapped, I would watch out setup guide video from November. Re: file... found the email. It was in my spam which is why I didn't get it. Will respond and help you out asap!
Font styles must be a typo from Figma or they’re adding a new option for CSS supported font-styles in the UI. Then again it’s mainly 2 values used in CSS but still a property of the spec. If you watch their intro video they put it under Strings but there’s no way to use it in the text properties panel. W3C: The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
I think this is a bit over-engineering, especially since this is a brand new feature and we don't exactly know where the optimal place is, it is better to build a simpler version and only expand when needed. Especially in case if Figma makes some changes and we may need to alter our approach later. Also, it may be better to organize the aliases simply by style like "body", "H1", "caption", etc, and then within the group of "body", we have "font family", "weight", "line-height", etc. This makes reading and selecting them for font styles later much easier and less prone to error.
Really great call out on organizing aliases like body, H1, etc.... This is something we discussed internally but I left out of this video. Will be filming another video soon around different approaches. + agreed on your first point. Had mentioned a couple times in the video this is just the approach that we're taking now, but becuase it's a new feature, it could change over time. Really curious to see how other designers choose to approach this! I'm really interested to see if Figma ever scraps styles entirely unlike with this launch where the variables are just wrapped up in styles. To me, it seems as if it was released half-baked.
Variables feed font styles, and you have to think that eventually all styles are going to be replaced. Right now I feel with this release it's about setting the foundations... Some styles might also share the same properties.
One of the key advantages of using variables is that they are context-aware with "modes". This means that we can pre-determine type variations based on different context such as mobile, desktop, platform/OS, etc, and at design time, the font styles can change automatically. (SF on iOS, Roboto on Android, etc) This saves us significant amount of time.
Typography is quite a complicated subject. The argument could be made to skip alias, but it's best practice for me to include an Alias. You need mapped because there is where you break out your variables into header, and body, which can't be done at the brand level.
Hey, you do you! :) just wanted to point out a perhaps more efficient way for color coding definitions. Especially, when it „hopefully“ will be possible to use calculations and formulas with variables. 🤞 Thank you for the valuable content you are providing on your channel. You have definitely have a new subscriber.
@@UICollectiveDesign Yeah I found that having the vector shape on scale scale sometimes works but depending where it is being placed it can be squished or cut off based on the auto layout that the icon is in. That’s where I always get confused. Do you think it is necessary to create multiple size variations like 8x8 16x16 24x24. Or is there a way to use variables and to map them somehow.
Thanks for the video! I'm wondering if there's a way to link variable to the component text property? In this video you had to detach component in order to link a text to the variable. However, I'd like to not detach components which would be not a great idea.
@@UICollectiveDesign thanks! Unfortunately if I do this I won't be able to adjust text property for the instance on the right side bar. After some research on figma website it looks the variables for instance properties can be linked with variants only.
