OMG Charli, this video taught me a lot of things. I didn't know the Figma works like that. I even have a libraly yet and now I'll create one for me. Thx for this!
Flipping 'eck CharliMarie; this is phenomenal. I'm brand new to Figma but seriously impressed with its capabilities. My approach to site design is going to step up a notch now for sure.
I've watched this video three times to make sure I've understood everything I need to create a Figma design system. Thanks for the awesome video and the clarity with which you've presented it. I'll be recommending this to everyone that needs to understand how to recreate or manage design systems in the future.
Just downloaded the checklist, and I NEVER download supplementary stuff with an email entry. But your content has given me so much value, I trust whatever I get sent would be good still.
Realized as I was listening to a bunch of Design Life episodes I remember where you said you heard "You probably already have a design system, it's just not documented." I believe you and Fem said it was at the XOXO conference last year! And what a lovely piece of advice it is indeed.
Awesome video! This is why I love Figma. One of my favorite ways to replace an instance instead of going through the dropdown list, is to drag a component from the left list and hold Cmd (Ctrl) + Opt (Alt) to replace the existing instance.
This is GOLD Jerry, GOLD! Really appreciate the attention to detail. You seem to really understand the "Why" throughout the whole video. Just discovered your channel. I'm a developer trying to pick up a bit of design chops. I'm going to start going through your other videos. btw - I think Components are in the free tier, as listed on their site. I've tried using components a bit and I haven't found a limitation in the free tier yet. But I haven't tried to create a design system, so I can't say for sure.
Thanks Charli! I'm using Sketch but found your organization of the design system compelling. I need to clean my stuff up like this! You've inspired me :)
Thank you so much for creating this video. Just in time. Many concepts and tools became clearer to me and I am now less overwhelmed with the design systems I have seen 🙋🏻♀️🌞
This video is a game changer on how i work on figma now. Thank you very much for sharing your knowledge, it's really helpful and save me a lot of learning time. You're the best :)
Extremely helpful!!! Well explained, thank you. I have a problem. I didn't know two months ago what the best course of action was. Out of ignorance I started to pack all elements, i.e. icons, colors, teasers, forms, etc. into one file. Many Figma Files are now linked to it. Now I would like to divide the elements into different categories, i.e. one file for colors, 1 file for icons, etc. If I then "delete" the first created master file, I will surely get a chaos, right? What should i do? Is there a design system dummy to understand how to create the links between each other in an optimal way? Especially for components, like buttons and inputs... For example, if you want to change the button design later on ...
This is awesome! I agree with you. Figma is getting sooo much better. Even I am switching to Figma from Sketch. If possible could you please include the design system figma file for us to download. It would be very helpful... Thanks
At 10:50 the type change only affected the solid buttons and not the outlined ones. They all have the same master component, right? Or am I missing something?
I was dreading creating my design system. Thank you for showing me how to go about it. Thank you Charli, I don't know why am seeing this video now...lol..
Thanks for sharing this. I’ve just signed up for a free account of Figma and looking forward to trying it out. Do you do any design for print and if so what software do you use for that? Using illustrator for print is the one thing that’s keeping my Adobe subscription going!
You should be following Brad Frost's Atomic Design when building your design system. Use your colour as the base and create your buttons, icons, etc based on the colour so future designers can't override to a random colour that's outside of the brand style guide. Instead, they can only select one of the brand colours. It makes things much more versatile.
Thank you! Very good even though it was a lot of information to handle especially if you are new to design / figma. Maybe split the video in 2 and go a bit slower or more in depth, my thoughts only..
Amazing practical walkthrough! Thanks so much. I'm currently working at a startup in Japan and looking to put together a design system for our upcoming platform. Knowing where to start is probably the hardest part - especially when starting from scratch one something that is simultaneously still trying to develop its brand image. I've always wondered if the best place to start (if creating a web platform) is with creating so key 'pages' to help you get a feel for a particular direction, and then to reverse engineer them to a design system for future development. Do you have any thoughts?
I am not so good at english or computer, but you build a website in this program and then send it to back-end/front end developer that then "converts" your design into actual code? Like css and htlm? Is this called webdesigner?
Designing a website is called web design. Building a website in code is called web development. It’s like the difference between an architect and a builder when it comes to making a house.
Lovely video and great content however i couldn't find the option to universally use the components on to my other files in the free version... It is asking me to create a team and it's paid... Am i doing something wrong or were you on the paid plan of it?
Aha! I came across a new tool, figma seems quite interesting. Gotta try it out & I'll share my thoughts. But it definitely seems interesting. Thanks for sharing 👍
How do I create simple buttons to activate batch files and/or windows apps? I can create the buttons but how do I assign them to perform a function (like defrag or dxdiag) etc.
Alright, this is it, Im gonna work with Figma on my next project (switching from Sketch)! Just wondering tho, is there no smart layout in Figma (based on ehat you showed in the quote component)?
Lots! I made a video about what software I use a while ago mostly it’s still the same aside from I now use Figma instead of sketch. Shall I make an updated video?
sorry i don't really know what a reflective journal is! is it like a book with your rationale for your design projects? or is it just a regular journal you write in?
Components are also available on the free version, I'm not 100% sure but I think the collaboration feature is limited to only 2 accounts for the free version... and that's about it.
Oh that's great! I know last year when i started using Figma you could have shared components, just shared styles so that's my mistake for not looking that up before I made the video. Previously you could have components within a file, but not shared between files.
@@charlimarieTV Oops sorry about that I think you're right, shared components on the free version is not available, I did a quick test and got this response: "Upgrade your team to publish components to the Team Library so everyone can use them. "
This is brilliant Charli. Science officer Spock would be in tears at the level of logical organization displayed here.
This is the best explanation of figma design systems that I have come across! Great work.
This was way more helpful than most of the videos I've been coming across searching for 'figma design system'. Awesome content
Wow this is mind blowing. Thank you for these! I just started studying Figma!
I moved from Photoshop - Sketch - Adobe XD and finally to Figma! Love to be a UI DESIGNER!
OMG Charli, this video taught me a lot of things. I didn't know the Figma works like that. I even have a libraly yet and now I'll create one for me. Thx for this!
Oh my, this is the most helpful video on design systems I've ever came across. The way you organize components - so clever! Thank you very much
This was the most informative 20 minutes of my life. Thank you for making this.
your video is one of the most informative, clear and practical keep up the good work
Flipping 'eck CharliMarie; this is phenomenal. I'm brand new to Figma but seriously impressed with its capabilities. My approach to site design is going to step up a notch now for sure.
I'm a junior front-end web developer and I think your videos are great!
thank you! I'm glad you like them :)
I've watched this video three times to make sure I've understood everything I need to create a Figma design system. Thanks for the awesome video and the clarity with which you've presented it. I'll be recommending this to everyone that needs to understand how to recreate or manage design systems in the future.
You can make components in the free tier, they just can’t be used across different files and projects. Styles can be used across both.
Correct! You could make a design system for use in one file on the free tier I suppose.
CharliMarieTV Yup! Which is totally fine for most individual projects
EXCELLENT!! Very informative. You're a great teacher. Thank you!
Just downloaded the checklist, and I NEVER download supplementary stuff with an email entry. But your content has given me so much value, I trust whatever I get sent would be good still.
Realized as I was listening to a bunch of Design Life episodes I remember where you said you heard "You probably already have a design system, it's just not documented." I believe you and Fem said it was at the XOXO conference last year! And what a lovely piece of advice it is indeed.
I wasn’t at XOXO so I don’t think that was it! But was possibly the conference I went to with Fem in Sweden last year!
@@charlimarieTV Ahh yes. It must've been. It was definitely one you and Fem had both gone to.
Very helpful video thanks for sharing and the ways of using custom frames as component is incredible.
Awesome video! This is why I love Figma. One of my favorite ways to replace an instance instead of going through the dropdown list, is to drag a component from the left list and hold Cmd (Ctrl) + Opt (Alt) to replace the existing instance.
Omg amazing tip! Thanks!!
Charlie really inspired me too. Thank you for sharing your knowledge.
Finally made the plunge and switched from Adobe XD to Figma. Very helpful video, thanks Charli!
Glad it helped!
This is brilliant! Thank you so much!
This is GOLD Jerry, GOLD!
Really appreciate the attention to detail. You seem to really understand the "Why" throughout the whole video.
Just discovered your channel. I'm a developer trying to pick up a bit of design chops. I'm going to start going through your other videos.
btw - I think Components are in the free tier, as listed on their site. I've tried using components a bit and I haven't found a limitation in the free tier yet. But I haven't tried to create a design system, so I can't say for sure.
Thank you, Charli, this is a powerful visual tool! Love your videos!
Thanks Charli! I'm using Sketch but found your organization of the design system compelling. I need to clean my stuff up like this! You've inspired me :)
So cool! If you were to teach an online video workshop I would totally pay for it.
SOLD. The styles and nesting, combined with the Dev handoff...I'm in love.
Thank you so much for creating this video. Just in time. Many concepts and tools became clearer to me and I am now less overwhelmed with the design systems I have seen 🙋🏻♀️🌞
This video is a game changer on how i work on figma now. Thank you very much for sharing your knowledge, it's really helpful and save me a lot of learning time. You're the best :)
Awesome Charli. Looks like a few things work differently to my Sketch based design system but going to try this out for my own site! Thanks
Really excellent tutorial....I'm going to try it
As a software developer and a beginner to desgin I really enjoyed this helpful video. Thanks for sharing 😊!
Great and helpful video. Recently started using figma for my startup and this was super useful. Thank you.
Marie, I will have to go through this video maybe 10x to absorb all the knowledge :)
Charli this is an epic run through of design systems in Figma! Feeling so inspired ✨
Thank you super much this is really useful and practical
Thank you for the Design System Guide!
Tons of inspiration in your video, thanks. BTW, how did you made your icomoon so thin? That looks amazing
*This is the most helpful and easiest to understand tutorial. Good job! I learned a lot.*
your videos are so helpful, im just started to learn everything about ui design :)
Extremely helpful!!! Well explained, thank you.
I have a problem. I didn't know two months ago what the best course of action was. Out of ignorance I started to pack all elements, i.e. icons, colors, teasers, forms, etc. into one file. Many Figma Files are now linked to it. Now I would like to divide the elements into different categories, i.e. one file for colors, 1 file for icons, etc. If I then "delete" the first created master file, I will surely get a chaos, right? What should i do?
Is there a design system dummy to understand how to create the links between each other in an optimal way?
Especially for components, like buttons and inputs... For example, if you want to change the button design later on ...
Really helpful and absolutely enjoyed your video! Thanks x
I am just wondering why you are being so generous with your knowledge?
Great, I'm lucky, it works great for me without errors
Thanks for this Charli! Makes the transition from Sketch that much smoother. I'm curious about what settings you are using for your Bootstrap grids?
Oh, don't worry - I just found them in your Design Systems Guide! Double thanks!
Im glad you shared it with us! Also that I was able to understand your fast english 😅 Thank you!
This is awesome! I agree with you. Figma is getting sooo much better. Even I am switching to Figma from Sketch. If possible could you please include the design system figma file for us to download. It would be very helpful... Thanks
I'm new at this, your videos are helping me a lot! Would love to see some content on grid and responsive design at Figma :)
Hey thanks for the video. Btw, do you start crafting your design system before starting a design or during the design?Thanks.
i would say during is best because otherwise you're designing the components with no context for how they'll be used
What are the (12) lines that you have on the layout @4:37? What are they used for?
Extremely helpful video!
It was awesome, Thank you for making this video. I am using the design system method for app design.
This was very elucidative! Thank you. 🙂👍🏻
This video make figma variant more powerful
YEP I need to do an updated video using variants!
Been looking into Figma lately :) I like how you explained it. Thanks :)
Charli, thanks, this is super helpful! I really enjoy watching your tips&tricks videos, it helps me to become better each day
Still super helpful! Nice work.
Great video! What's new in Figma?
At 10:50 the type change only affected the solid buttons and not the outlined ones. They all have the same master component, right? Or am I missing something?
I like how you explained it. Thanks
I was dreading creating my design system. Thank you for showing me how to go about it. Thank you Charli, I don't know why am seeing this video now...lol..
Glad you found the video and that it could help you out! You can do it!
Thanks for sharing this. I’ve just signed up for a free account of Figma and looking forward to trying it out. Do you do any design for print and if so what software do you use for that? Using illustrator for print is the one thing that’s keeping my Adobe subscription going!
Yeah i still use Illustrator or Indesign for most print stuff!
You should be following Brad Frost's Atomic Design when building your design system. Use your colour as the base and create your buttons, icons, etc based on the colour so future designers can't override to a random colour that's outside of the brand style guide. Instead, they can only select one of the brand colours. It makes things much more versatile.
Great suggestion!
design systems guide is really nice
For a someone new to Figma it would be good to start with a new file IMO. There are many things I just don't know what you mean.
Great Video! Thanks, Ma'm.
Oh, yeah for svg swap. Thanks, your videos are golden.
Thank you! Very good even though it was a lot of information to handle especially if you are new to design / figma. Maybe split the video in 2 and go a bit slower or more in depth, my thoughts only..
Awesome 👌 thanks for share
Amazing practical walkthrough! Thanks so much. I'm currently working at a startup in Japan and looking to put together a design system for our upcoming platform. Knowing where to start is probably the hardest part - especially when starting from scratch one something that is simultaneously still trying to develop its brand image.
I've always wondered if the best place to start (if creating a web platform) is with creating so key 'pages' to help you get a feel for a particular direction, and then to reverse engineer them to a design system for future development. Do you have any thoughts?
Definitely think that’s the way to go. You can’t know what size heading or what padding on a button until you put it in context of a design. L
have you tried taskade.com? any tips or advice for using their bujo system?
Helpful. Thank you!
OMG this was super helpful
this is incredibly helpful!!
is it possible to have a button component where you can change the text of each individual button like in sketch?
Oh, so design system is something like you put Corporate Deign/Identity in file complete with additional elements and all details. Nice.
can you apply design systems to social media designs?
definitely!
great overview, thank u! I will watch it again more calmly :D
haha you're welcome! yes, might require a couple of views to follow along with it as you're creating your own :)
I am not so good at english or computer, but you build a website in this program and then send it to back-end/front end developer that then "converts" your design into actual code? Like css and htlm? Is this called webdesigner?
Designing a website is called web design. Building a website in code is called web development. It’s like the difference between an architect and a builder when it comes to making a house.
@@charlimarieTV Ok thanks, this looks really fun. I have done things in www.canva.com before and really enjoyed it. This figma looks similar
Figma is a professional design tool, so definitely much much better than Canva!
@@charlimarieTV Yes, i will try this out! Thanks for helping me :-)
This was wonderfully helpful. I can't thank you enough for this.
You’re welcome Matthew!
Awesome video Charli!! Thank you so much
You’re so welcome!
Lovely video and great content however i couldn't find the option to universally use the components on to my other files in the free version... It is asking me to create a team and it's paid... Am i doing something wrong or were you on the paid plan of it?
I think you need a paid plan to have shared component, but you can have shared type styles and colors on the free plan!
Aha! I came across a new tool, figma seems quite interesting. Gotta try it out & I'll share my thoughts. But it definitely seems interesting. Thanks for sharing 👍
Is Design System creating after ready design layouts?
Super informative! Thanks, CM!
How do I create simple buttons to activate batch files and/or windows apps? I can create the buttons but how do I assign them to perform a function (like defrag or dxdiag) etc.
Figma is a design tool. It’s not a tool to build a functioning app to control things on your computer.
it is so good for me! thank
Very helpful Content.
Can I get the link of figma file
Alright, this is it, Im gonna work with Figma on my next project (switching from Sketch)! Just wondering tho, is there no smart layout in Figma (based on ehat you showed in the quote component)?
Hey Charlie, Thanks for sharing this information.
Very Useful, Thanks for sharing. I think this design system will be helpful to create if the project is big or you're working with the company :)
Thank you, this was super helpful!
Thank you a lot!
love it ur voice and keep growing ,ur video so cool, and very useful Thnx.
Thanks it is so helpful..
Btw, what are other tools you use along side figma?
Lots! I made a video about what software I use a while ago mostly it’s still the same aside from I now use Figma instead of sketch. Shall I make an updated video?
@@charlimarieTV yes please, the industry grows like mushrooms.
Is there a chance you could look into reflective journals online for coursework. It would help as I am making a reflective journal for my coursework.
sorry i don't really know what a reflective journal is! is it like a book with your rationale for your design projects? or is it just a regular journal you write in?
I love your videos
🤗
Amazing 🙏🏻
Components are also available on the free version, I'm not 100% sure but I think the collaboration feature is limited to only 2 accounts for the free version... and that's about it.
Oh that's great! I know last year when i started using Figma you could have shared components, just shared styles so that's my mistake for not looking that up before I made the video. Previously you could have components within a file, but not shared between files.
@@charlimarieTV Oops sorry about that I think you're right, shared components on the free version is not available, I did a quick test and got this response: "Upgrade your team to publish components to the Team Library so everyone can use them.
"
Im looking for the file to donwload after so long... not available anymore ;/
Thankjuuuuuuuuuuuuuuuuuuuuu! Super! Super!