Variables for Typography and Gradients | Figma Variables update April 2024

Рет қаралды 7,874

Күн бұрын

🚨Follow along → www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Variables 101 - • Figma Variables for be...
2. Prototype with Variables | Config Update - • Figma PROTOTYPE with V...
3. Language change with variables - • Figma variables to cha...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Intro
00:09 Important note
00:31 Typography
00:57 Font family string variable
02:44 Font size number variable
03:30 Variable scoping magic
04:33 Font weight variable
06:17 Text styles
07:18 Mobile mode
09:26 Variables for gradients
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes

Пікірлер: 62

@Mull77 3 ай бұрын

Great work! I've been waiting for typography variables forever

@TDSunshine 3 ай бұрын

Same! Thanks for watching 🙏🏼☀️

@md.kamrulhasan7089 3 ай бұрын

Great work! I've been waiting for typography variables

@TDSunshine 3 ай бұрын

Thanks! ☀️🙏🏻

@ladyxlittlemonster98 3 ай бұрын

You are saving my life at work, thanks so much for teaching variables in a fun and easy way.

@TDSunshine 3 ай бұрын

ahh yay! glad to hear that 🙏🏻☀️💛

@aminexpert 3 ай бұрын

Wonderful, very well explained. Keep us updated

@TDSunshine 3 ай бұрын

Thanks! ☀️🙏🏻

@olya7715 23 күн бұрын

Great! Thank you so much for such a great overview and positive energy! ❤

@TDSunshine 23 күн бұрын

Thanks! ☀️🙏🏻💛

@suheeb_an 3 ай бұрын

Marvellous 🙌

@TDSunshine 3 ай бұрын

Thanks! ☀️🙏🏼

@TahiraAhamad 3 ай бұрын

Great tutorial as always. Thank you!

@TDSunshine 3 ай бұрын

Thanks! 🙏🏼💛☀️

@ezraschwartz5201 3 ай бұрын

Thank you, your videos are really helpful!

@TDSunshine 3 ай бұрын

Yay thanks! ☀️🙏🏼

@OKYSUWU 3 ай бұрын

Thanks for the great content! Very informative and helpful

@TDSunshine 3 ай бұрын

You’re welcome! 🙏🏼💛☀️

@JamesTenniswood 3 ай бұрын

Quick work, very interesting

@TDSunshine 3 ай бұрын

Thanks! ☀️🙏🏼

@karenbeal2387 3 ай бұрын

Thank you - excellent from the first minute, I like how you explain from the start rather than assuming people know stuff already - Figma's walkthrough yesterday was not very clear!

@TDSunshine 3 ай бұрын

Glad it was helpful! 💛☀️🙏🏼

@mahamudurrahmanshaown6724 3 ай бұрын

Very Insightful

@TDSunshine 3 ай бұрын

Thanks! ☀️🙏🏼

@jinjinjara6579 3 ай бұрын

Thank u so much for sharing these content. you're so amazing .

@TDSunshine 3 ай бұрын

You’re welcome! ☀️🙏🏼💛

@tutukumarpanda 3 ай бұрын

Thanks for sharing 👍

@TDSunshine 3 ай бұрын

You're welcome! ☀️🙏🏻

@brabaharan8450 3 ай бұрын

Your video always very helpful

@TDSunshine 3 ай бұрын

Thanks I’m glad! ☀️🙏🏼

@trevordupp8734 3 ай бұрын

I've been waiting for this update for ever - I was building a product and decided to just stop development because I really need the typography peice for it to be worth my time. Now I can get back to it!

@TDSunshine 3 ай бұрын

it's so good right?? ☀️🙏🏻

@trevordupp8734 3 ай бұрын

@@TDSunshine Really completes it in my opinion, now you can do some cool stuff with modes for different viewstates.

@pavliny 3 ай бұрын

Thanks for the wonderful tutorial. Very helpful. And something way off the subject - I am not a native english speaker, so the way you pronounce the name of the font "Urbanist"is very cute :) (in the phrase : "…you see that the title styles use a font called Pridi and the body styles use a font called Urbanist”. So nice. Greetings!

@TDSunshine 3 ай бұрын

haha thanks! Im glad you enjoyed 🙏🏻☀️💛

@Shihab886 3 ай бұрын

Really, Underrated KZfaq channel...❤

@TDSunshine 3 ай бұрын

Thank you so much 😀☀️🙏🏻

@javadobe5024 3 ай бұрын

Beautiful

@TDSunshine 2 ай бұрын

Thank you! ☀️🙏🏼

3 ай бұрын

Well explained! The combination of variable+style is more clear with your explanation than Figma's. I was waiting for this Figma update a lot. I used to create components variants for text sizes or use same size for both desktop and mobile. Many things were possible on code and now it's better. I just to learn more about Code Connect now, but first, I've to create all typography variants for my design system 😅

@TDSunshine 3 ай бұрын

Thanks! 💛🙏🏼 I felt a bit disappointed at the start of framework when I realised it’s not new variables but just the ability to control them with variables but once they got into how to use them with styles I got onboard! ☀️🙏🏼

3 ай бұрын

@@TDSunshine yes! I've to think how to structure primitives and semantics for this new family

@jonathangriffiths359 Ай бұрын

Your tutorials are so easy to follow, and have helped me get to grips with the more advanced feature in Figma. I have a quick question, I know it's best practice to set up primitives for colour and then link to them through semantic tokens, is this the same for typography? Your video suggests you just have a collection called Typography and all values are controlled within that. I don't know whether this comes down to personal preference, but I'd be keen to hear your suggestions on this :)

@TDSunshine Ай бұрын

Hey! I think with typography variables being so new I'm still trying to figure out how best to utilise them. I think it all depends on how complex your system is and also if you need to use modes or not. Remember there is never just one correct way to do things, it's all about what fits you and your system best ☀️🙏🏻💛

@jonathangriffiths359 Ай бұрын

@@TDSunshine thank you so much for the reply, makes perfect sense!

@lolacademy-yn 3 ай бұрын

cool i like it lean it from you ,

@TDSunshine 2 ай бұрын

Thanks! ☀️🙏🏼

@fortyozsteak 2 ай бұрын

Who's designing for mobile and desktop the use case for variables is so niche (multi brand and "web design")

@TDSunshine 2 ай бұрын

Variables are super useful not just for designing for different operating systems! they are great for prototyping in a realistic way, maintaining a single source of truth for strings and so much more ! ☀️🙏🏻

@abulut 3 ай бұрын

Any idea of how to have the responsive Desktop and Mobile setup for a situation where you also have multi-brand setup?

@TDSunshine 3 ай бұрын

Great question! When Figma announced Variables way back last year they mentioned they are working on Theming which allow you to switch brands like you want but sadly it’s not live yet :/ For now you can use swap library but I’m not sure if it works for variables too 😢 ☀️🙏🏼

@manuvarghese4740 3 ай бұрын

Can you create a roadmap to learn figma . What all things to learn in figma please

@TDSunshine 3 ай бұрын

If you are a beginner I would recommend my video - *Figma beginner crash course 2024* - kzfaq.info/get/bejne/hdp_i6h8sLnHl2g.html I hope that helps! 🙏🏻☀️

@Underhills 3 ай бұрын

Very nice demo, thanks for sharing. As you mention there are many different weight classes and family weight names. The body type could have a Heavy weight and not a Bold, and the title/headline could have a Roman instead of a Regular, or a Book instead of Regular or Roman. Then you need to make variables with all the weight names for both types I guess, but there's no way to assign several weight names to the same type with a comma. There's no way of having several of the same label names for anything in the same group either, so you can't have one Medium name for title and one for body, then Figma prompts you to make each name unique. This type variable function doesn't manage authentic scenarios 😆 I have heaps of variables but there's no scope panel, no check boxes. I'm on a Pro license. And the variable panel doesn't work properly with focus states or keyboard navigation, pressing Tab doesn't provide expected movement so I constantly have to move between section with the mouse. Figma is so buggy it hurts!!

@TDSunshine 2 ай бұрын

Thanks! I think thats why Figma give the option to use string and number variables to control the font width. Yes, each family might name the widths a bit differently but you will usually find they all use the same numerical values for the widths they offer. So using a number might be better for you. About the second issue, that is odd! are you using the browser or the app? might be worth trying to remove and reinstall the app. I hope that helps! ☀️🙏🏻💛

@Underhills 2 ай бұрын

@@TDSunshine Thanks for the tip. In regards to the second issue it seems like a bug of sorts 🤔

@seymorebizz7950 Ай бұрын

Yo can you do a video of ideal structure with the variable updates showing ideal structure all in one? This exists like nowhere

@TDSunshine Ай бұрын

Great idea adding to my list! they keep making updates it's so hard to keep up! 😵‍💫☀️🙏🏻

@djashawe88923 6 күн бұрын

Hi. Thanks a lot for great tutorial! Quick question: Why use both variables and styles in Figma? It seems a bit redundant to me. Any reason or benefit in using both?

@TDSunshine 2 күн бұрын

Variables are still a bit limited when it comes to colours. For example, styles can store images, gradients or multiple colour layers in one, and variables can not. ☀️🙏🏻

@hardboiled2000 2 ай бұрын

I have a question I've been wrestling with, in my team we not only have desktop & mobile versions of text styles but different brand skews, any ideas on what your approach would to be setting this up?

@TDSunshine 2 ай бұрын

Great question! Figma did mention they are working on themeing for variables but not sure when they will launch it :/ In the meantime, if you have everything set up as styles you can use the "swap library" function to swap between two libraries and automatically change all the designs to a different theme. I have a video about swap library going live soon so keep an eye out ☀️🙏🏻💛