Figma Design Best Practices (Auto Layouts, Components, & Tokens)

We're working in Figma today!
In this video, you'll learn about the fundamentals of scalable, maintainable design in Figma using auto layouts, components, and tokens (ACSS Tokens via Tokens Studio).
We'll look at a simple blog post grid example as we work from scratch so you can see every single step of the process. As always, lots of golden nuggets along the way!
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
0:00 Intro
0:48 What We'll Build
2:19 Getting Started
4:00 Installing ACSS Tokens
5:30 The Basic Auto-Layout Workflow
16:43 Styling With ACSS Tokens
33:06 Component Functionality
44:51 Token Tweaking
49:20 Persistent Design Iteration
54:10 Wrap-up

[@carriearival]

This is the most brilliant explanation of layout and components I've found and so excited to use Figma/Frames/Bricks together. Game-changer! Thanks Kevin!

[@Gearyco]

You're very welcome!

[@Michael-Copenhagen]

This was an excellent walk-through of some of the primary best practices for using ACSS, tokens, components etc. in Figma - it really gave me a lot of inspiration. And great that you once again take the time to give such a thorough and insightful review. This is priceless stuff. Thank you Kevin.

[@Gearyco]

Glad it was helpful!

[@TomPhillips-wz4xt]

Man this is so helpful. I have been fighting some things that I didn't need to GREAT!

[@stevebaker2896]

As usual this was a concise knowledge bomb with all the basics one needs to build correctly in Figma, all covered in under an hour - great stuff!

[@NotAddicted1981]

Amazing content! Your are super clear in your explananations. Your are opening my eyes to what great design and workflows look like. Thank you for the content

[@mehrafzamirzazad]

This video is the best explanation. I watched so many other videos to understand the auto layout and but this video was the life changer. Great work and highly recommend.

[@HarryThomas_HMT3design]

Mind sufficiently blown. I was doubting the purchase, but I knew enough to wait until your tutorial. Now I'm glad I bought it. You don't disappoint. Question: how do you troubleshoot? I built my own version, following along with you, but for some reason, my placeholder text didn't expand the container. I checked the components and all appeared to match what you had done as far as Fixed / Hug / Fill values. Future tutorial: When you changed the default values (spacing, font-size, etc.), I'd like to see how you translate that into ACSS on the WP end.

[@visionrocket]

Thanks Kevin!

[@davidwalls2304]

Nice video Kevin. I really like the approach that Frames for Figma and ACSS Tokens is progressing. This was a great investment on my part. I can definitely see how this will improve my overall workflow, allow me to improve my end-to-end process, and be able to charge more for my website development work. Kudos to you and your team.

[@Gearyco]

Thanks for watching!

[@dotpenji]

Hey there, your enthusiasm for Figma and your ability to explain the intricate details of your design process is truly engaging! Could you tell us about any favorite shortcuts or lesser-known features in Figma that have significantly boosted your productivity?

[@monicasoriano8581]

I completely agree with this comment! Enthusiasm for design tools like Figma, coupled with the ability to share insights and tips, is incredibly valuable for those looking to improve their design skills and workflow. Personally I can say that Figma's presentation mode feature is fantastic for showcasing your designs to clients or stakeholders. It allows you to create interactive prototypes right within Figma, complete with transitions and animations. Great work Kevin!

[@ryanvalenzuela551]

Passion for design tools like Figma and sharing insights is valuable for skill improvement. Figma's presentation mode is fantastic for showcasing designs to clients. Excellent work!

[@monalizapantoja8490]

Great video once again!

[@jcdeaton42]

Great video. Looking forward to getting the tokens when it’s opened up.

[@derekshort]

Great shirt! 👕

[@melvindavelaar3801]

Thank you for the video Kevin. Will the LTD for "Frames for Figma" be available again? If so can you tell when approximately?

[@Gearyco]

Not sure yet

Perfect as usual.... One thing Im wondering is, if I would hand this over to development or just do it myself. Where would I see what tokens have been used? In the video it looks like there are just the values set in the right sidebar setting. But of course it hast to be connected to the tokens in order to reflect the changes made to Primary Color, or the global Spacing scale. But where do I see which spacing token has been used to space out the cards body wrapper for example....?

[@Gearyco]

The token studio panel shows you which tokens have been used on an element.

[@michelribbens8014]

Great video once again! As an Oxygen user, I've just got ACSS and not Frames. Can I get access to ACSS tokens from this subscription or do I need to purchase another product?

[@Gearyco]

You can purchase ACSS Tokens by itself soon.

[@derekshort]

35:35 😍🙏🏻

[@alperenozkan]

Thanks for a great tutorial Kevin. I have a question. Why did not you create another card components for option#2 and option#3 ?

[@Gearyco]

You should actually duplicate the component instead. I’m still getting back into the swing of things in figma.

[@alperenozkan]

@@Gearyco 🎯 Thank you

[@mrjohncrumpton]

Thank you. You mentioned “single source of truth” a few times, does this have a special meaning?

[@Gearyco]

It's just a term I use to denote that an element can controlled from one place instead of changes needing to be made to multiple instances of the element.

[@Multilive1000]

Cwicly is going to be the one to use combined with Figma components. BTW Is the Figma var system not good enough yet to use?

[@Gearyco]

No, can't do math functions.

[@noe.galarza]

Hi Kevin. Do you plan to develop the following concepts in future videos on Figma Design Best Practices? - Brad Frost's Atomic Design methodology. - Nomenclatures or taxonomies of components, properties and values of a Design System. - Developer Handoff best practices.

[@Gearyco]

I’ll touch on these concepts yes.

[@derekshort]

I think I prefer “Library Kevin”. Lol 😅

[@studiojpeg]

Genuine question: why not leverage the new variables feature within Figma for the tokens?

[@Gearyco]

Because they can't do the necessary math functions.

[@davyorji]

Can tokens be used for mobile app designs for flutter?

[@Gearyco]

Never heard of flutter

[@filmgenius2]

Can you do one using the Frames components?

[@Gearyco]

We are going to do plenty of examples with frames once the next version comes out.