Variables for Typography and Gradients | Figma Variables update April 2024

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

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

50% 1

🚨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

Хобби

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

8 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

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

Same! Thanks for watching 🙏🏼☀️

@md.kamrulhasan7089 Месяц назад

Great work! I've been waiting for typography variables

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

Thanks! ☀️🙏🏻

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

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

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

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

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

Great tutorial as always. Thank you!

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

Thanks! 🙏🏼💛☀️

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

Wonderful, very well explained. Keep us updated

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

Thanks! ☀️🙏🏻

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

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

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

You’re welcome! ☀️🙏🏼💛

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

Thank you, your videos are really helpful!

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

Yay thanks! ☀️🙏🏼

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

Thanks for the great content! Very informative and helpful

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

You’re welcome! 🙏🏼💛☀️

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

Marvellous 🙌

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

Thanks! ☀️🙏🏼

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

Quick work, very interesting

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

Thanks! ☀️🙏🏼

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

Very Insightful

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

Thanks! ☀️🙏🏼

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

Your video always very helpful

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

Thanks I’m glad! ☀️🙏🏼

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

Thanks for sharing 👍

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

You're welcome! ☀️🙏🏻

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

Beautiful

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

Thank you! ☀️🙏🏼

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

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 Месяц назад

Glad it was helpful! 💛☀️🙏🏼

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

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 Месяц назад

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

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

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

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

Really, Underrated RU-vid channel...❤

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

Thank you so much 😀☀️🙏🏻

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

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 Месяц назад

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

Месяц назад

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 Месяц назад

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! ☀️🙏🏼

Месяц назад

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

@fortyozsteak 19 дней назад

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

@TDSunshine 18 дней назад

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 ! ☀️🙏🏻

@jonathangriffiths359 4 дня назад

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 3 дня назад

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 3 дня назад

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

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

cool i like it lean it from you ,

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

Thanks! ☀️🙏🏼

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

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

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

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 😢 ☀️🙏🏼

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

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 29 дней назад

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 29 дней назад

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

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

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 29 дней назад

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 ☀️🙏🏻💛

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

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

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

If you are a beginner I would recommend my video - *Figma beginner crash course 2024* - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OtOXEKKScg4.html I hope that helps! 🙏🏻☀️