Figma Design System - Effects (Using styles) | Part 4 | Figma Step-by-Step Tutorial
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 series
00:42 Elevation Effects
01:12 My Drop Shadow Trick
03:16 Adding the Ambient Drop Shadow
04:13 Adding the Key Drop Shadow
06:42 Creating Elevation Styles
09:16 Blur Effects
11:25 Creating Blur Styles
11:48 Recap
12:09 What's 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 - Jak na to + styl
This series is amazing. Is trully helping me in my work. Wish you the best from Brazil!
Obrigado!☀️🙏🏻💛
Thanks, this was really helpful
Loving this series so much! You don't know how grateful I am for finding your channel. I've been scouring over the internet to see short actionable tutorial on design system and yours was such a gold! 💖
Yay thanks! I'm glad you found it helpful! 🙏🏻☀️
Hi sisy, I'm a fresher. seriously when i started watching your videos i felt i get something more knowledge about design compare to other freshers. So happy for you keep inspire us. ❤
Thanks! happy to hear my videos are helpful ☀️💛
Amazing Videos: Great way of explaining please keep them coming ! Thank you!
Thanks! 🙏🏼☀️
Really like the system thinking of yours. Best content i’ve seen on the design and Figma.
Thanks! ☀️🙏🏻
Fantastic detail in this series! And you manage to make it easy to follow. Nice work.
thanks! ☀️🙏🏻💛
Honestly i have no words for how much are you helping me with your videos! Thank you so so so much!
Thanks! Im so glad to hear! 🙏🏻☀️💛
Love all of your videos.
Thanks! ☀️☺️
Thank you! I've been learning Figma for a few months now and this series has really helped me synthesize how to use figma to actually create my own things! I'm getting it and enjoying practicing :)))
ahh yay im glad to hear that! ☀️💛🙏🏻
Thank You!
You're welcome! 🙏🏻☀️💛
I am very happy to have found your channel, you explain the concepts very well, and the tips you provide are very good, it is helping me a lot.
Could you prepare a video on how to make the buttons in their various forms, using variables and others?
Thank you so much.
Thanks! It's like you are reading my mind 🤭 a video on Buttons is going to come out next Monday 🤫 (using variables, variants and component properties) ☀️
Your videos have great explanations and the best tips 😍If you could make a video creating a collection of Avatars using variables: exploring different shapes, diferent content (image/icon/text) and sizes, I would Love It! Thank you so much👌
Thanks! 💛 Avatars are a great idea! adding to my list :) ☀
Hope this still helps! -> czcams.com/video/G2LGtQzYJwM/video.html
Please do more components designs with varients and component properties (as per design system IOS guidelines like padding sizes etc) thanks
Great idea! adding to my list ☀️
Request: How to choose the right color for BG, border, texts, with all obeying colour contrast rules. Its very important. I have watched a lot of videos, but I have not seen anyone explain how to pick the right colors from semantic colours representing various functions. Please if you can, help out with a video.
Great idea! will add to my list thanks! 🙏🏻☀️💛
Great video. 1 question. you created blur styles out of the rectangle over the parrot, what about the blur on the polar bear? I'm assuming there may be two versions - 1 light and 1 dark? Or, are we just focusing on the blur effect, regardless of the shade?....
Thanks! yes I'm selecting both of the squares when Im applying the blur :) and the two colours are just to kind of demo how the blur would look on a light colour and a dark colour. I hope that makes sense 🙏🏻☀️
Hi! Love your series! One question tho: Where do you get your icons from? Did you make a video in which you showed how to add the icons to the design system that I missed? Thank you.
Thanks! These are icons I made myself in this video (czcams.com/video/8V3LMRq5cEs/video.html) and you can also find them on my Etsy page (www.etsy.com/uk/listing/1486198103/360-digital-icon-stickers-clear-stickers) ☀️🙏🏻💛
@@TDSunshine Thanks for the fast reply! I checked it out and I loved it! I was a bit confused why you didn’t include this in the series but now I get it! Appreciate your help. ❤
Can you teach advanced prototyping in figma?
I have a few videos on this actually! ☀️
*Prototype with Variables | Config Update* - czcams.com/video/RERfcQp7zSk/video.html
*Prototyping updates 2023 - Sticky Scrolling* - czcams.com/video/S_rshX4Svgo/video.html
*Advanced Prototyping in Figma* - czcams.com/video/3wJZrKdJVF0/video.html
*Basic Prototyping in Figma* - czcams.com/video/xfHJtVXtE-g/video.html
Thanks mam
I installed browser with auto video translation for watching this course after figma updade.... but I dont on translation, becouse all is easy to understand for my english level 😉
🙏🏼☀️