Start working with design system in Figma in 20 minutes - tutorial

Design system: www.figma.com/...
Design high-converting accessible e-commerce in minutes: techfoundation...
Free UI design course: • How to set up Figma ac...
#UXDesign #UX #Figma #UXUI

[@CottonCandyLoverXD]

Thank you so much for this tutorial! I was so confused on how to actually implement the design system once I had created it. Thank you Irina!

[@Pratyushz]

This video helped me design a few screens in no time. Thanks for making me realise how helpful design systems are when you have to quickly come up with deliverables. I used this video to create a web app for a takeway assignment at a startup where I have applied for a job as a ux designer and guess what? I'm selected for the next round! If it wasn't for you, I wouldn't be able to achieve all this in limited time.

[@irina_nik]

Wow, I am super glad it has helped you! 😃 Good luck with your next interview!

[@Pratyushz]

@@irina_nik I got selected!! I'm officially a UX designer now!

[@YourFaveDesigner]

@@Pratyushz Congrats 🎉

[@Pratyushz]

@@YourFaveDesigner thank you!

[@sharifkhan.3]

Very Informative video! Lots of doubts and use cases are solved... Thanks

[@WOUUUTT]

awesome tutorial! thanks a lot. I'm def going to follow your UI design course & use your design systems

[@irina_nik]

Thank you Walton!

[@madhoundes]

Nice tutorial , i will suggest to use batchstyler plugin to change typography font face at one click also it work for colors as will !

[@irina_nik]

Thanks for the tip, didn't know about this plugin :)

[@sumansourabh4849]

I was really awsome video and I checked yours Figma community profile. It is really helpful to. Thanks for making great content.

[@EMBRAND]

Amazing work Irina! cheers from México

[@irina_nik]

Gracias! :)

[@romanochelommmiii1526]

the most helpful video i have seen in a long time thankyou so much!!!!

[@irina_nik]

Glad to hear that Roman!

[@SbShahria]

You are incredible Irina!

[@irina_nik]

No, you are incredible! ahaha

[@satyajeetmaurya2054]

Very Good Video.... Love From India 🙏❤️

[@irina_nik]

Thank you, Satyajeet 🙌

[@ioanaienciu2049]

Clever Girl!! Go go! Super useful information!

[@gagankumar-nb8ox]

Hi Irina, Love your work!!

[@irina_nik]

Thank you so much!

[@dannydiscovers]

As a developer, receiving this would be a dream

[@alexmelnytskyy4356]

Finally, strict content without fancy bla bla bla

[@IbukunOluwaShotubo]

This is very insightful and helpful, Irina. I've been looking for a tutorial like this. Thank you very much.

[@irina_nik]

Thank you Ibukun, glad you liked it :)

[@yesongkim5824]

thank you! very helpful

[@kennethidiaghe1051]

Very helpful! thanks a lot!!!

[@javedakhtar7596]

Irina Nik--- Thanks its helpful

[@martinzthabo5341]

This is really great, especially for a developer like who doesn't want to draw shapes from scratch, but just use a pre-defined system to quickly design!

[@ramazanguler6066]

Thank you for best lesson about design system

[@zhibektyulemissova]

youre perfect!!!!!!!!!!!!!!!!!!!!!!!!

[@plamenami558]

Thank you so much Irina for your amazing work :)

[@marie91999]

Nicely done!

[@advancedanimation3571]

Great tutorial, thank you.

[@LimitedKnowledge12]

but you didnt show us how to reuse the components of the design system in the free version. How can i recall components on a new page to create a screen?

[@stevecarloebasitas5253]

This is Great and Very Helpful thanks Irina :)

[@toddrothman2765]

You are amazing!

[@jhe-jhe4297]

Newbie subs. Thanks you and i am new and learning for this Design and please upload for this tutorial and helps me alot to grow my skills.🙏

[@irina_nik]

Thank you, I sure will!

[@paolapalacios9707]

How much is the paid version? I tried looking for it and can't find it. Also, thank you for your explanation. The video was super helpful and the design system is very easy to follow especially because you have descriptions of how they can be used in the designs. Thank you!

[@irina_nik]

Thank you for kind words Paola :) My design system is free (find it here: www.figma.com/community/file/1131891137727824106), and here is the pricing for Figma: www.figma.com/pricing/

[@imjoebaker]

Firstly, loved this walk through so I chose it for my introduction to design systems. After spending the time recreating all colour and making them variables, I decided to move onto the buttons. Following back through this video at around 7:00, I go to duplicate the button as you do and get "the properties and values of this variant are conflicting" thinking I somehow messed something up earlier. I opened a fresh file that you've supplied and even then, the same action generates the error. I'm utterly stumped. Forums mention something about 'renaming variants' which hasn't gotten me anywhere. I could have sworn a month ago when I first downloaded this I didn't have this issue. Any help would be appreciated.

[@imjoebaker]

I think the conflict is to do with the text within the buttons. When I try to duplicate any button. Every button snaps to read 'button' also changing any text within any button will result in all buttons stating what I've typed. Again thank you for this product and I hope you could provide some insight.

[@umarbaadi9669]

Great Video. Thanks for sharing

[@jimmypatel2769]

good job thank you

[@esmatjoe4228]

You're awesome human

[@irina_nik]

Thanks. glad to be of service to you)

[@subramanianchenniappan4059]

I am a programmer. I know and have hands-on in system design . What is design system .🙄🙄. I don't know figma

[@larrytadafe398]

Beautiful and insightful

[@djashawe88923]

Thanks a lot Irina for this amazing tutorial! I was searching all over to find out how to properly link any design systems to my Figma file. I have a question. Is there any difference between "publishing library" vs. "moving to project and then publishing?" Thanks.

[@raufraphkanton7458]

Hi, does this mean that the design system can only be used in the team project it was moved into? Because from what I see and understand, any changes made in the main file will affect all children, making the components still dependent on the main component in the template. Is there no way to use the same template but make the changes affect just the app you're designing?

[@raufraphkanton7458]

All I'm trying to say is, should you have the element from the design system template being used in two or more designs instead of just one, will making changes to the main file affect all designs? If yes, then how do you make each design independent?

[@fdsgfdghghdhffhdfh-eo7pm]

so helpful

[@akrm3240]

Thanks! That was super helpful

[@irina_nik]

Thank you. I'm glad you liked it.

[@Rizalpadilah9696]

Hey friend, What is the size of the typography pada web dan apps itu berbeda?

[@carlocaabreu6935]

Hello, what I can't understand is why the options for "libraries available in this file" 11:03 do not appear on mine. It always appears that "I can activate this library option in my drafts in my user account settings", but when I click, that doesn't solve it, because it returns to the empty libraries screen, with the same message.

[@irina_nik]

Hi! It might be because the library is in the drafts and not in the project. Libraries can be published in the paid projects in Figma. As an alternative, you can work on your designs in the same file, like in the second half of the video.

[@carlocaabreu6935]

@@irina_nik Ah I didn't know it was a paid feature. that was what frustrated me the most in my learning, because I never knew what to do from that point on and you explained it well. I thank you!

[@albapanyella7955]

Hi! l want to duplicate a design system so it has different color styles but the components remain the same and they get updated when the “main” design system is updated. ls that possible? Should this be done with the “branch” feature?

[@irina_nik]

Hey! Yes, you can keep your components the same with branching. The components in the branch will be updated though, but it won't affect other connected files.

[@chidiebubeemeka8359]

Thanks a lot. But I only have access to Typography and color. Does anyone have the same issue?

[@irina_nik]

Hi! You've probably copied the wrong design system: I have several. The one that you need in the description to this video. Here is the link www.figma.com/community/file/1131891137727824106

[@chienpham5661]

omg i love it, thanks