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

Подписаться 60 тыс.

Просмотров 65 тыс.

50% 1

Without a doubt, these are the best design systems on Figma. Some of these are more geared towards web UI design, some more towards app UI design, some more towards dashboard UI design, but either way there's something in here for everyone!
Check them out right here:
Headspace: www.figma.com/community/file/...)
Cutframe:
www.figma.com/community/file/...)
Hope:
www.figma.com/community/file/...
EventHub:
www.figma.com/community/file/...
🛠 Try Figma 👇
bit.ly/3LqgGig
🛠 Figma For Pros 👇
bit.ly/3V5oZmD
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauros/filming-setup
📄 Bonsai Referral (try for free)
www.hellobonsai.com/invite?fp...
👨‍💻 Connect with me
arnau.design
🌎 Socials
/ arnau_design
/ arnau_design
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

Опубликовано:

28 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 86

@ArnauRos 2 года назад

Have you ever used a design system?

@leonardlopez3450 2 года назад

no but i think i am going after watching this.

@vatsalaykhobragade 2 года назад

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.

@calblue8694 Год назад

Always coming through with solid content!

@kicknight3302 2 года назад

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.

@guillemrossalvador 2 года назад

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

@JL-ky5ev Год назад

Your style of delivery is super simple and smooth

@ArnauRos Год назад

Thank you JL!

@xinageco 2 года назад

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 2 года назад

Glad it helped!

@dustinspace1 Год назад

Just subscribed great content 💪🏾💯

@kinnieganancial5851 2 года назад

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

@ArnauRos 2 года назад

Thats really great to hear Kinnie! Thanks for watching

@madhoundes 2 года назад

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

@ArnauRos 2 года назад

Thanks for watching, I really appreciate it

@ritikdange8208 2 года назад

Thanks bro! Very helpful 🙌🏻

@ArnauRos 2 года назад

Thanks for watching!

@mosesadekoje3107 2 года назад

Amazing content bro.. thank you

@itsglenartiaga 2 года назад

As usual i love the video! 😘

@BreathingInPixels 2 года назад

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 2 года назад

Thanks Hamid!!

@danumichael2143 2 года назад

Thank you for sharing these

@ArnauRos 2 года назад

Thanks for watching!

@tejasathare3921 2 года назад

Headspace UI kit FTW ✨🙌🏻

@ArnauRos 2 года назад

🚀🚀

@victorportes6876 2 года назад

You ROCK dear Arnau!

@ArnauRos 2 года назад

Thanks Victor!

@Neutron_Labs Год назад

Thank You, for this. Mr.Ros.

@ArnauRos Год назад

Thanks for listening

@gegenti Год назад

Gracias Arnau!

@safwankhimani5148 Год назад

thank u so much bro

@onurkurt6752 2 года назад

Great! Thank you

@ArnauRos 2 года назад

Thanks for watching!

@kulkarni2912 2 месяца назад

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.

@onoriodealuya4472 2 года назад

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 2 года назад

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

@onoriodealuya4472 2 года назад

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

@mosesadekoje3107 2 года назад

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

@onoriodealuya4472 2 года назад

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

@mosesadekoje3107 2 года назад

Will check it out! Thanks

@user-gr8fc4xc8t 8 месяцев назад

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 ;)

@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

@nikhilgoyal007 5 месяцев назад

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

@ArnauRos 5 месяцев назад

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

@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?

@vandelfs 2 года назад

nice video

@appstuff6565 6 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

thanks@@ArnauRos

@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

@marcelarojas1155 2 года назад

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

@ArnauRos 2 года назад

Check the description!

@marcelarojas1155 2 года назад

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

@aworden 11 месяцев назад

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 11 месяцев назад

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

@BassRott 3 месяца назад

But how do you add them into your code

@ArnauRos 3 месяца назад

This is for figma, to add them into your code take a look at some code export plugins or dev mode

@ekekw930 2 года назад

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

@ArnauRos 2 года назад

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

@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.

@gamingtime125 Год назад

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

@ArnauRos Год назад

You need to enable it in your file :)

@sherifbutt6578 2 года назад

Love these design systems, however please mention the name of the person who built the system, instead of keep saying this person that person, the designer did a great effort and deserves some credit. 😅

@ArnauRos 2 года назад

I agree, thanks for bringing it up