The Most INSANE Design Systems On Figma (Templates Included!)
Вставка
- Опубліковано 9 лип 2024
- 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!
Have you ever used a design system?
no but i think i am going after watching this.
Yeah I've used Pegasus design system for my UI/UX case study
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.
Always coming through with solid content!
Love these design systems, nice work! Didn't know Headspace had a design system.
As usual i love the video! 😘
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. :)
Glad it helped!
Just subscribed great content 💪🏾💯
Keep it up , I'm learning lot from you channel
Thanks for watching, I really appreciate it
So nice. I will definitely try it out. Step by step i'm learning a lot. Thanks
Thats really great to hear Kinnie! Thanks for watching
Amazing content bro.. thank you
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.
Thanks bro! Very helpful 🙌🏻
Thanks for watching!
Your style of delivery is super simple and smooth
Thank you JL!
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.
Thanks Hamid!!
Thank you for sharing these
Thanks for watching!
You ROCK dear Arnau!
Thanks Victor!
Gracias Arnau!
thank u so much bro
Headspace UI kit FTW ✨🙌🏻
🚀🚀
Thank You, for this. Mr.Ros.
Thanks for listening
Great! Thank you
Thanks for watching!
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.
nice video
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?
You can duplicate the button, make it rounded then turn it into a component and use instances of it for your project
@@mosesadekoje3107 Thanks man! I used a plugin to work around it.
@@onoriodealuya4472 nice!! Out of curiosity, what's the plugin name please?
@@mosesadekoje3107 Design System Organizer, still searching for a
"freer" version though. lol
Will check it out! Thanks
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 ;)
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.
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
@@ArnauRos Thank you
Thank you!! what is the name of the background music ?)
I'm not sure! Its a free lofi song from youtube
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?
Hey! What do you mean by maintaining the system?
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.
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 :)
thanks@@ArnauRos
Hi, great video!
Where can we see/download the templates?
Check the description!
NM, I saw the links in the description, thanks! ;)
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?
Figma is just for designing, to build the app you need to use an app builder using react like xcode. Hope this helps
How can I actually use these after importing them into a project?
publish their design system to your library, then import that library on whatever project you're using!
But how do you add them into your code
This is for figma, to add them into your code take a look at some code export plugins or dev mode
Is there any copyright issues if I published my work by using those design systems templates?
Yes probably, its recommended you use these as inspiration for your own designs
Can anybody please tell how to use them ? I'm unable to use them 🤨
You need to enable it in your file :)
Can you work with Tailwind and these design systems?
Maybe not, there is a tailwind figma file!
@@ArnauRos Where? Do you mean in the community? I know with Tailwind you need to create your own components to create custom ones.
@@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
@@ArnauRos Thanks, I am going to be creating a design system in the future and doing some research.
@@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.
are these all available for free?
I believe so
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. 😅
I agree, thanks for bringing it up
Which country are you from?
From 🇪🇸!
Your background music makes me stressed. So here 1:54 into your video I have to leave you alone.
Thanks for the feedback, I'll take this into account
You R so cute
I don't see any Figmas in this video.
great video! feedback if you want it: lens flare transition is annoying (esp on 2x speed). still watched till end bc content is great 👏☺🌤
Thanks! take a look at some of the newer content theres less transition effects :)
If you dont mind can i get your Facebook id?
Love from 🇧🇩