Video není dostupné.
Omlouváme se.
Figma Design System - Typography System (Using Styles) | Part 2 | Figma Tutorial Step-by-Step
Vložit
- čas přidán 5. 08. 2024
- 🚨Follow along with this Figma file -
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. Variables best practice - • Figma VARIABLES BEST P...
3. Figma Components - • Figma Components | Mas...
👋🏼 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 comment below. Your support means a lot and 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 Welcome to the episode
00:24 Choosing a Typographic Scale
03:48 Adding Different Font Weights
05:40 My Trick For Smallest Type Style
07:00 Creating Figma Type Styles
08:06 Fixing the Line Height
09:02 Coming Up Next
🤗 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
In the beginning of any new design process I always get back to this system which make things a lot easier. And I mean on whole series of videos about design system. Thank you sooo much. You are real UX sunshine!
As a beginner, this is exactly the series I was looking for! Thank you for sharing and explaining your process and thank you for the Figma files!!!
Thanks! Im glad you found it helpful ☀️🙏🏻
by far the best UI turorials i have seen, very straight to point , no fillers , no lags , great tips ..very professional. thank you,please keep doing more figma tutorials
Thank you! 🙏🏻☀️
TD Sunshine, you are amazing, thanks a lot it is easy to learn with you and straight to the point and your voice is sweet, i wish soon i have so much experience as you!!
Thank you! ☀️🙏🏻💛
Major help for my design system. Big shoutout! 🙌
Great to hear! Thanks! 🙏🏻☀️🤗
Welcome back :)
I am following your design System Series to build my bootcamp project Design System. You have been such a Guide❤ thank you for creating these series 🎉
Thanks! Im glad it helps! ☀️
just love this 😍 you're a genius
Thanks! ☀️🙏🏻💛
Thank You so much for sharing your knowledge ❤
You're welcome! ☀️🙏🏻💛
You have a really good way of explaining things, nice tut
Thanks! 🙏🏻☀️
Hey, thank you so much for this tutorial. I recently started working in UI/UX design and I just used your video to set up a template Figma file I can modify and reuse with every work project. Previously I just re-created a typography frame for each project individually, definitely a time waster! I love the Styler plugin, I feel like you just saved me hundreds of hours of extra work in the future :) One thing I noticed, the plugin does save and display the text style properties as 49/120, but when I'm actually using the text style it uses 120%, so I didn't need to fix anything. Not sure if they just updated it, but it automatically works :)
I'm really enjoying your videos and looking forward to your next one!
Hey! Yay happy to hear my video was helpful 💛 interesting about Styler! Tbh I didn’t even check it so maybe my original one was ok too! I just got spooked when I saw the /120 and changes it straight away 🙈☀️
You are a fantastic teacher...
thanks so much! 🙏🏼👏🏼☀️
you can also use basic math from your route 16. 16 x variable = size above 16 / variable = size below.
great tip! 🙏🏻☀️
The video is excellent and straight to the point. However, I have a suggestion that, while subjective, could enhance robustness. It is advisable to consistently use numerical values or units that are multiples of 4 or 8 specially for font sizes. For example, 16, 24, or 32 36 . This approach would facilitate adjustability across different frameworks.
Thanks! great idea :) Its all about what works for you and your design system! 🤗☀️
Hi, the Styler seems to work OK with the line height percentages, only Figma is not showing that it is a percentage: 49/120 is displayed in both cases instead of 49/120 and 49/120%. So manual redoing was superfluous. Anyhow, thanks for the video, I again learnt a lot.
Thanks! ☀️🙏🏻
This girls talents as a designer are way beyond her years.
thanks! ☀️🙏🏼
thank youuuuu
You're welcome! ☀️💛
Great video but You should Use text size and line height in 8 pixel ratio like 48px size and 56 pix line height. I think this make more sense instead of using 49 and 58.2 line height. what do you think?
Great tip! ☀️🙏🏻
You could also copy the font style by clicking on the text, Ctrl + Alt + C and then paste the font style by selecting H1 Bold H1 Regular and H1 Light and hit Ctrl + Alt + CV
great tip! ☀️🙏🏻💛
At 8:30, it actually took the percentage value of the line height.
thanks! ☀️🙏🏻
Could you create a playlist for my Local Variables videos? It would be convenient to have them all in one place.
I have a playlist for all my variable videos here -> czcams.com/play/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI.html
and another one for all the design system videos here -> czcams.com/play/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq.html
☀️🙏🏻💛
How can I find that frames of coulors or typography? Should I create them by myself?
You can find them in the community file linked in the description ☀️🙏🏻💛
what are the main daily tasks for Junior designers ? what is expected from on daily basis (figma UI related)? the things we juniors have to master (be it variables etc, autolayout etc )
it really depends on where you work and what kind of tasks are given to juniors. But I will say I think junior designs should have a good grasp of how to use the basic design tools correctly (like using frames and not shapes) and how to use assets. Most of the time junior designers are not asked to create new components but you never know! And auto layout is life changing I would say every designer should understand it tbh 🤗 I have this video if you want to check it out - *Figma Auto layout 2023*☀️ - czcams.com/video/IPLbPOYFTHw/video.html
amazing thank you for the insights. please do a video on dev hand off best practises. great work btw@@TDSunshine
wondering how many H tags would be best practice in web design. I see you use 4. Also wondering what is best practice in terms of text style naming conventions. (Headline, title, subtitle etc)
In HTML you can use up to 6 H tags, but it all depends on your own preference. When it comes to naming conventions, you can find lots of articles online this subject but I think whatever works for you and your team / client works :) I would recommend having a look at www.nngroup.com/articles/ they have great articles ☀️
I normally go up to H5, H6 is optional… H6 will normally overlap with body copy so you won’t really see a difference
Can you add colour to text styles
Sadly you can’t 🥲☀️
How to set a color for typography?
You can’t connect a colour to a text style in Figma (yet) but you can create colour styles or variables and text styles separately and then use them in your file. I hope that helps ☀️💛🙏🏼
Thank you. How to choose typography for mobile devices?
If you are building an app I would follow the official styles from Material design or iOS! I would also follow them / use them as a guide if you are designing for mobile web ☀️🙏🏻
Thanks!@@TDSunshine
Help me understand Material Design Typography.
Display Large is like H1 on Desktop
Display Medium is like H1 on Tablet
Display Small is like H1 on Mobile
Headline Large is like H2 on a Desktop
Headline Medium is like H2 on Tablet
...
Title Large is like H3 on Desktop
...
...
Am I understanding this correctly?@@TDSunshine
How did you calculate the line height to the percentage????
All the input fields in the design panel can handle basic math, so what I do there is type in the font size (let's say it's 18px) and then multiply it by 1.2. so I typed in "18*1.2" which should make the calculation for you. Figma has changed line height a bit since I made this video and I think the default is now % rather than just pixels so it may look a bit different. Hope that helps! ☀️🤗
you're the best :)@@TDSunshine
☀️🙏🏻💛