Figma's CONFIG 2023 Updates Explained | Real Examples

00:35 - Font Picker
01:43 - Auto Layout
03:26 - Variables
06:57 - Variables: Number, Color & Booleans
13:01 - Sections
14:05 - Dev Mode
15:35 - Sync Figma with VS Code
===
Master Figma with my Ultimate Figma Design Masterclass (5,800+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
Practical User Research & Strategy Masterclass (NEW - 260+ students. 8 hours)
👉 thedesignership.com/courses/p...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko

[@preshitrastogii]

Mizko I found your channel last night and I can't stop watching your videos now. I have literally 30-40 tabs of your videos opened in my browser right now and just watching them one by one and taking notes. Your videos are the most informative out there!

[@Mizko]

Thank you so much! Really appreciate you taking the time to share this with me.

[@skw247]

Same!!!

[@hetalpanchal5948]

Thank you so much Mizko. I learned a lot from your videos. Just one thing, I want to know here after reviewing Figma updates, now designers also should learn coding. Little bit of programming is also here in Figma. What's your views for this, pls let me know😊

[@moonchildeverlasting9904]

I just wanna say one thing, Clapy, o Anima. With these tools - today you can take any design in figma and create components fully made in React, HTML, etc.

[@marginandcolumn]

THANK YOU FOR THIS! Been trying to gather bits and pieces of info about all the updates, wishing it was all in one spot. Legend 👌🏼

[@Mizko]

I gotcha!

[@opeodunlami]

Hey, Mizko! Thank you so much for the breakdown of the updates. Your high spirits, coupled with your detailed and practical explanations, made the learning and assimilation interesting. The variables, sections, and dev mode are my favourites.

[@zazzytude6023]

I just have to say a big kudos to you Mizko. Thanks for simplifying things for young designers like me

[@MarielMeira]

I just met you and I loved this video. I'm focusing in practice my English and design skills and was very nice to watch you.

[@timothyogese2609]

I have actually been waiting for this from you alone... Thank you so much for this...

[@merisimamovic965]

Thanks Mizko, clear, concise and on point summary!

[@Mizko]

Thanks mate!

[@dbcruz]

Nice SumUp. Thanks.

[@ennohyttrek]

You have a great way of explaining things and your way of presenting and your tutorial video concept and design are among the best I have found so far. Thanks for the Figma features update. Very helpful and on the point.

[@julianTrichardson]

Thanks Mizko! another super tutorial.

[@Mizko]

Thank you!

[@samirfarid5539]

Mizko, This is amazing video man!

[@FablesOutofSpace]

Thnk you, Ihave been waitin for you to drop this🙏🏻🙏🏻🙏🏻

[@Mizko]

👏

[@Elrykkstorm]

Such enriching content! Your channel is a digital gold mine.

[@Mizko]

🙏

[@EgyptsLost]

Finally! I was waiting for you 😭

[@elisabetvalentina4297]

OMG, i was literally waiting for you to make video about Figma's config. Thankyou so much Mizko for the summary! Great video as always!🤟🤟

[@Tyouhoo]

I really love the way you said " JOB DONE"

[@tazz763]

Awesome video Mizko, as always, but I just wanted to know why did you open the prototype panel at 6:20 to show the text change using a variable? and I see you writing variable names in camelCase, hope to see more videos for naming conventions in Figma. I am super excited !

[@mohamedmontassarmejbri2796]

Hey Mizko, I just wanted to reach out and express my admiration as a big fan. I want to extend my gratitude to you for creating such helpful and valuable content through your videos. Your efforts are truly appreciated. On a side note, I noticed the collection of books behind you in your this video. The top one seems to be "Hooked," but the titles of the others are not quite clear. I'm curious to know what those other books are. Thank you once again for all that you do.

[@jr17ak4717]

You did it again Miz Thank-you for the knowledge your definitely helping designers

[@Mizko]

🙏

[@muhammadbacar6051]

Well explained video. Can't wait for figma AI and maybe a new figma masterclass from you

[@yesmubindid]

The Variable part was very easy to digest. Can't wait to have a masterclass on that + design token (styleguide)

[@benditodsg974]

Love this, thank you so mush

[@abdikadirQulle]

this info is so cool thanks mizko

[@no__one.]

Looks like an Axure RP - Figma fusion. Kinda exciting

[@latade]

Bout time Mizko, been waiting on your explainer video for days! 😅😅

[@Mizko]

Haha! Thank you!

[@henrynguyen-ep8mz]

The video I was waiting for!

[@Mizko]

🙏

[@GraveRave]

Thanks for this 🙏🏾

[@Mizko]

🙏

[@nickizen201]

As always very informative video Mizko. Will you be updating the course with these figma feature updates? Planning to finally take your design course. Thanks a lot btw for your great content.

[@Geovanna.michelle]

was waiting for your video to get posted. your videos are always top notch

[@Mizko]

Thank you for the support!

[@tarunpatel4591]

Finally your video is here, now I can get all updates clear ⭐❤️

[@Mizko]

I gotcha!

[@arnogerritsen9331]

Great video. I'll follow from now on! Cool feature although it looks like it is not possible to assign a variable to a text layer of a component. E.g. if you want to design a filled web form where each field is using the same component and you want to fill the properties of that component using variables.

[@femitaiwo2145]

Love your content man

[@Mizko]

👏

[@lanxnguyen3632]

ahh, I've been waiting for this video from you Mizko.

[@Mizko]

👏 thank you!

[@chrisronan]

Hi @mizko - would love to hear your thoughts on the integration possibilities between figma and framer. For me, the framer plug-in has been a bit lackluster. It’s basically a “copy over” - and I’ve found there is quite a bit of fiddling that needs to be done when doing so. Apologies if you have already made a video about this - I’ll have a look at your vids just in case. But the power of figma for advanced users / designers who want to bridge to developers and give them useful artifacts is undeniable. Also - for rapid website building, framer seems undeniable as well. Just curious if this has been rolling around in your head too? Love your channel man. Really do. I’ve commented to you before and I’ve been in the ui/ux business so long I’d not want to date myself. But love how you are bringing useful content and knowledgeable content to the new guard. Keep up the great work dude! Hello from Texas!

[@sammdesigns]

Finally!.. the only channel that breaks figma down properly...🥰

[@EnesKab]

No one talks about that but the vision of "bridging the gap between designers and developers" are coming from the open-source Figma alternative project: Penpot. Penpot also announced the responsive way of designing way before Figma and today, it has still more advanced features including grid, wrap etc. Also dev mode is another feature they brought in before Figma did.

[@hetalpanchal5948]

Penpot ? What's this ?

[@EnesKab]

@@hetalpanchal5948 Open source alternative to Figma. Google is your friend.

[@hacorn96]

these updates make me want to know the design process at figma. brilliant stuff!

[@Mizko]

🥸

[@muhammadbacar6051]

Been waiting for this video

[@Mizko]

👏

[@Miraki8238]

Excellent video! While the responsive functionality is fantastic, an application's font size, padding, and even margins vary when used on desktop and mobile (Android and iOS). Separate art board designs for the desktop and mobile versions will still be required. This function is handy on mobile and desktop devices of varying widths, but it cannot be used interchangeably between the two. What do you think Mizko?

[@charleshaddock4426]

Great video thanks! What screen recording software do you use?

[@mcchedo]

Bro, why weren't you selected as a speaker at Figma Config? :) Thank you so much for the vid!

[@MrPortillo305]

Hey Mizko, will you be upgrading your Figma course to keep up with these new changes?

[@edmirfazlovic]

Great video, Mizko. Thanks! But one thing, whether to use "Number" or "String", when it comes to prices? Using a number can be a problem, for example using another currency such as the euro, I had a case where Figma made me "€1,100", only "1.1". With "String" it looks good.

[@hoxx1503]

Great video

[@Mizko]

🙏

[@monrayvillanueva2]

Now this is definitely game changer. Before, i only use figma for designing due to their linear prototyping and lack of variables. And use protopie for prototyping since their prototype have a lot of option like dynamics and device functionality like keyboard, camera, qr code, etc. Now, I can use figma for both 🙌

[@takazcao]

Thanks for sharing 🔥🔥🔥

[@Mizko]

👏

[@dimitrikupzov7698]

Hello, awesome like always!!! Can "Pro users", i.e. those who have already purchased Figma Masterclass, expect to see tutorials in the course of this exciting update?)

[@ere.]

What tools do you generally use to record these videos? Awesome content btw

[@jotub4906]

I luv your content. Thx for that. Just for understanding: At 09:52 did you select the correct variable because the text didn't changed?

[@Mizko]

Yes I did! I realised after Figma glitched and I had to reopen the prototype and it refreshed itself.

[@ji9306]

🔥🔥🔥

[@graycrisp4701]

Thank you for this video Mizko! Will this example file be shared? or no?! I'm really trying to learn variables so that I can make the design system much easier! But I'm still not getting it. Are you also planning to update your course(Master figma) based on Variables by any chance?

[@davyengone]

Great video mate! The devMode demo was a bit off. The CSS needed to be under a class :-)

[@Mizko]

Hahah! You know what I mean’t 😂

[@davyengone]

@@Mizko I love your channel mate. Great job

[@blissfuly8375]

@mizko, did figma remove absolute position feature? I couldnt find it.

[@ziyadhamdym]

I love Figma 🥰

[@alfiartya23]

Mizko, thank you again for this summary of Figma Update! That new features is really game changer for UI Designer and Developer itself

[@HernanV]

Hey @Mizko, Are you planning to upgrade your Figma course?

[@ahmednawaz4723]

What softwares do you use to record and edit videos?

[@aquiyahdesigns]

Thank you for this summary. You've done the Lord's work and saved me tonnes of hours.

[@Mizko]

Haha, thank you!

[@aragorth123]

i am confused right now, dont know if use color styles or delete them and use variables

[@loulou81400]

Hello Mizko, nice video, one question, do you plan to update your figma masterclass with all these new figma features?

[@Mizko]

Yep! I’ll never leave my students hanging. I’ve got a few updates planned. I just need to finish up the new course before I switch gears again.

[@yulduzkhonalimova7342]

@@Mizko yay, can't wait for more updates in Figma mastercalss 😍 good luck ✊

[@kavineesh12]

Hey Mizko will you add these to your FIgma masterclass?

[@Mizko]

Yep! I have plans for this 👏

[@kennethlucas]

And why no link to Dave Williams game?

[@countryroads7998]

i watch it at 2x speed and there's still so much beating around the bush for each feature

[@renji9426]

These features are already available in framer and it's been a long time

[@aragorth123]

does all those updated means you will not implement it into your design system ?

[@roshni6767]

You should do an updated Figma course

[@Mizko]

Yep! I’ve got a few plans for my Figma Masterclass course 👏

[@rolandandreicristi7493]

Will you include variables and modes into your Figma course masterclass?

[@zeirilantigua]

🙏🙏🙏🙏🙏🙏

[@swagfel]

Mziko you course of figma is updated ?

[@Mizko]

Yep! I’ve got a few plans for the Figma Masterclass 👏

[@ColonelSternlove]

Tools are very impressive, but I can only see this working for very simple grid layouts and nothing more for now (product cards, grid imagery etc…).

[@kennethlucas]

Hosetly, this new format is nice...BUT...I like the Mizko photo/video on the left. But WHY does it have a line that light-trails its way around while he is speaking? I spent the whole video watching that animated line and not a damn thing in the information. IF it actually timed with the ending of the section, then it would have at least have a purpose. It also gets lost on the whites and grays of the interface behind it. So I spent more time looking at how much of a problem that is and distracted form actual content. Try to remove that. It is just a bad UX paractice in there.

[@Underhills]

Figmas way of treating type is still terrible. They are lacking heaps behind all others. Not able to get a live preview of the typeface on the canvas on hover, just a render of the type in the list. And I really do wish they could merge type and color treatment like XD, and introduce floating palettes. I spend so much time skipping between color and type assets in Figma and when changing a type component I should be able to change ALL properties to the type in one place to have that cascade trough wherever it's used, that includes color. Just like you would do in markup.

[@pabitrashow9748]

RIP ProtoPie

[@irshadahmed3710]

04:07 haha

[@smilli6415]

figma is gettiing messier

[@mschrimmer631]

Include these updates in your Masterclass please!