Figma features every beginner needs to know (auto layout, styles, components, interactions, & more!)
Вставка
- Опубліковано 6 лют 2025
- A buddy of mine has recently been making the switch from Adobe XD to Figma, and while I wouldn't consider myself a Figma expert - I am using it every single day.
Over the past few weeks, I've shared a bunch of tips and tricks, which has inspired me to put together this list: the not-so-obvious but extremely-powerful features packed into Figma!
We'll talk about Auto Layout, and how it can instantly improve spacing and alignment by showing you how to build out a button, navigation, and entire header.
We'll cover styles, and how Figma actually works similarly to creating CSS variables by setting up both color and font styles.
We'll scratch the surface of Components, and how they combine the power of auto layout and multiple styles into reusable elements that improve the scalability and maintainability of your designs.
We'll touch on interactions and how they can improve the way you share concepts with your clients.
And finally, we'll discuss Dev Mode, which is an awesome way that Figma takes all your design and converts into developer-friendly code and language.
Without all of these features, Figma might not be too impressive - but with them, you'll see the amazing superpowers this free tool gives you!
If you're just getting started with Figma, then I hope this video will prove to be super beneficial in helping you hit the ground running.
👏 COMMUNITY
Join our free community: theadminbar.co...
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.co...
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.co...
Write proposals in less than 15 minutes with this template: theadminbar.co...
Fill your prospect pipeline in this 3-week challenge: theadminbar.co...
5 Airtable templates I use to run my agency: theadminbar.co...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.co...
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.co...
Kyle on Twitter: / kylevandeusen
This is amazingly helpful, thank you!
mate you got the best UA-cam channel ever, I'm watching the videos. its a shame the numbers of views, coz your content is just great. please keep pushing forward
😅 Thanks! View are overrated ;-)
Keep up the good work, man! I learn a lot from your video.
Thanks so much - glad to hear it!
Nice tutorial! Do you have a list of your favorite Figma content creators? You mentioned it would be in the description.
Auto layout is magic! 💫
Yeah man, it just goes deeper and deeper too!
I like the way how you storytelling in this video. As always, your videos are great
Aw, thanks so much! Glad it's helpful!
You forgot to put those video links 😅
These are all great tips - maybe one more to build upon the Dev Mode... right click on an item and choose, "Copy/Paste as..." > Copy as code > CSS. This copies pretty much all the css you need for an element, component etc as a single giant code block, all with comments. Hopefully Dev Mode remains in some usable form now that the Adobe buyout seems to have all but died.
Yeah, I recorded this long before that news 😅. Honestly, I'm excited... I didn't want Adobe getting in there anyway.