The Most INSANE Design Systems On Figma (Templates Included!)

[@ArnauRos]

Have you ever used a design system?

[@leonardlopez3450]

no but i think i am going after watching this.

[@vatsalaykhobragade]

Yeah I've used Pegasus design system for my UI/UX case study

[@brokenrazor7708]

I wish we, as designers, would start using ‘Design Library’ in reference to what we use in our design tools. A true Design System is much bigger than Figma or any other design tool and would include some sort of code based library that matches the design library, and some sort of documentation site that can help educate everyone involved with creating the products the design system can be used for. Like the Material Design System.

[@InnovatorsTales]

Your style of delivery is super simple and smooth

[@ArnauRos]

Thank you JL!

[@calblue8694]

Always coming through with solid content!

[@SpicyBiCutiePie]

Hi, Arnau! Thanks for this amazing UI Library kit recommendations. I'm new to Figma and currently designing my own system for an app design so this really helped. :)

[@ArnauRos]

Glad it helped!

[@victorportes6876]

You ROCK dear Arnau!

[@ArnauRos]

Thanks Victor!

[@guillemrossalvador]

Love these design systems, nice work! Didn't know Headspace had a design system.

[@tejasathare3921]

Headspace UI kit FTW ✨🙌🏻

[@ArnauRos]

🚀🚀

[@Neutron_Labs]

Thank You, for this. Mr.Ros.

[@ArnauRos]

Thanks for listening

[@kicknight]

I would argue that what you are describing is not a design system but a style guide. It's like saying UX/UI where in fact UI is just one of many parts that creates UX. Same here, Style Guide is just one of the parts that creates Design System.

[@Musclevita]

Just subscribed great content 💪🏾💯

[@madhoundes]

Keep it up , I'm learning lot from you channel

[@ArnauRos]

Thanks for watching, I really appreciate it

[@danumichael2143]

Thank you for sharing these

[@ArnauRos]

Thanks for watching!

[@kinnieganancial5851]

So nice. I will definitely try it out. Step by step i'm learning a lot. Thanks

[@ArnauRos]

Thats really great to hear Kinnie! Thanks for watching

[@ritikdange8208]

Thanks bro! Very helpful 🙌🏻

[@ArnauRos]

Thanks for watching!

[@itsglenartiaga]

As usual i love the video! 😘

[@onoriodealuya4472]

Hey man! Really great stuff, quick question; After getting the preferred design system kit, what happens if you have a certain style in mind? For example, the button style in the design system, kit is squared, but you want it a bit rounded. Do you then get to edit every button style once you've imported the design system kit?

[@mosesadekoje3107]

You can duplicate the button, make it rounded then turn it into a component and use instances of it for your project

[@onoriodealuya4472]

@@mosesadekoje3107 Thanks man! I used a plugin to work around it.

[@mosesadekoje3107]

@@onoriodealuya4472 nice!! Out of curiosity, what's the plugin name please?

[@onoriodealuya4472]

@@mosesadekoje3107 Design System Organizer, still searching for a "freer" version though. lol

[@mosesadekoje3107]

Will check it out! Thanks

[@mosesadekoje3107]

Amazing content bro.. thank you

[@BreathingInPixels]

Thanks brother. You are amazing and sharing cool content always which is really a time saver for us. Best Wishes For Your Channel and Efforts.

[@ArnauRos]

Thanks Hamid!!

[@nikhilgoyal007]

Thank you!! what is the name of the background music ?)

[@ArnauRos]

I'm not sure! Its a free lofi song from youtube

[@kulkarni2912]

Are there any recommendations for Native libraries or kits? I'm currently working on a redesign of a shopping app and was considering using native iOS and Android libraries to save on design and development resources. It would be extremely helpful if I could find any Figma resources out there.

[@Lifeissohard-z7c]

Hello. I took a course from Udemy about UI/Ux design and I am just a beginner of using Figma. Now i'm a bit curious if UI/UX designer are mostly doing a copying and pasting to make their task or project more easier and faster?.. Greetings from Poland ;)

[@gegenti]

Gracias Arnau!

[@williamonu7156]

Hello! I am new to Figma and I found your video insightful. I would like to know how I can make save these UI kits (design systems) you shared into my assets so I can use them with ease.

[@ArnauRos]

You need to have the system in your team library, then from your figma file click on the book icon under Assets and enable the library you want

[@williamonu7156]

@@ArnauRos Thank you

[@appstuff6565]

Hey Arnau, thanks for this. I was wondering how we can translate this to tailwind? Im using react/nextjs so that is another dilemma im having and for some reason i find you credible.

[@ArnauRos]

Hey there! I wouldn't be too familiar in converting these into tailwind or react, it might be best to message a dev experienced in those as I have no experience with code :)

[@appstuff6565]

thanks@@ArnauRos

[@linditaneziri2002]

I have a question, how does it work on bigger organisations when it comes to maintaining the system. And Is it different when it comes to components for mobile/desktop etc?

[@ArnauRos]

Hey! What do you mean by maintaining the system?

[@aworden]

I'm very new to Figma and CSS so I must be missing something that you're not stating. My questions are... how am I supposed to use these "design systems" to build my app's design? How does that help me as a developer to build the actual app. It seems that giving a developer a picture of what you'd like an app to look like is wishful thinking. How do you get the CSS to make the app look like the pictures in Figma?

[@ArnauRos]

Figma is just for designing, to build the app you need to use an app builder using react like xcode. Hope this helps

[@birbirdie649]

Is there any copyright issues if I published my work by using those design systems templates?

[@ArnauRos]

Yes probably, its recommended you use these as inspiration for your own designs

[@renem1219]

Can you work with Tailwind and these design systems?

[@ArnauRos]

Maybe not, there is a tailwind figma file!

[@renem1219]

@@ArnauRos Where? Do you mean in the community? I know with Tailwind you need to create your own components to create custom ones.

[@ArnauRos]

@@renem1219 Tailwind previously had a Figma file, but they might have discontinued it. If you're looking for a similar tailwind kit but with a figma file I recommend the flowbite system - I have a vid on them on my channel

[@renem1219]

@@ArnauRos Thanks, I am going to be creating a design system in the future and doing some research.

[@renem1219]

@@ArnauRos What is Flowbite? I think it is a UI design kit. Why is that recommended for Tailwind? Tailwind as we know does not have components off the shelf. They are built to custom specifications.

[@safwankhimani5148]

thank u so much bro

[@marcelarojas1155]

Hi, great video! Where can we see/download the templates?

[@ArnauRos]

Check the description!

[@marcelarojas1155]

NM, I saw the links in the description, thanks! ;)

[@ekekw930]

How can I actually use these after importing them into a project?

[@ArnauRos]

publish their design system to your library, then import that library on whatever project you're using!

[@onurkurt6752]

Great! Thank you

[@ArnauRos]

Thanks for watching!

[@gamingtime125]

Can anybody please tell how to use them ? I'm unable to use them 🤨

[@ArnauRos]

You need to enable it in your file :)

[@vandelfs]

nice video

[@danielwatson6529]

im a bit new so excuse if im wrong. but if u set environment variables to deal with light/dark for colour. then you dont need to make a light dark variant. you then dont need light dark mode screens. so much work ommited

[@ArnauRos]

yes, this vid is a bit old there are newer ways to add design systems in figma

[@pratikrajsah]

are these all available for free?

[@ArnauRos]

I believe so

[@smell12345]

Which country are you from?

[@ArnauRos]

From 🇪🇸!

[@LinusLorentzen]

Your background music makes me stressed. So here 1:54 into your video I have to leave you alone.

[@ArnauRos]

Thanks for the feedback, I'll take this into account

[@muzammilhussain7463]

Please don't use that transition with a mouse-click sound. It is super annoying. Other than that the video is awesome!

[@ArnauRos]

roger that

[@MichaelOKeefe2009]

I don't see any Figmas in this video.

[@rathod0204]

You R so cute

[@cbubbb]

great video! feedback if you want it: lens flare transition is annoying (esp on 2x speed). still watched till end bc content is great 👏☺🌤

[@ArnauRos]

Thanks! take a look at some of the newer content theres less transition effects :)

[@smell12345]

If you dont mind can i get your Facebook id? Love from 🇧🇩