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.
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.
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.
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!
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.
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 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 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 :)
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 :)
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..
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 ...
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..
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
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 👍
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!
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?
There is a way to work around the icons not keeping the styles you set when you change the instances out. This took me so long to figure out, but I think it is very worth it. Just read this thread and walk through the examples: spectrum.chat/figma/general/styles-dont-stick-when-swapping-components~bd7b44b3-aa81-4d68-82f7-af8cd78e8efd
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. "
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.
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?
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)?
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.
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?
This was way more helpful than most of the videos I've been coming across searching for 'figma design system'. Awesome content
This is brilliant Charli. Science officer Spock would be in tears at the level of logical organization displayed here.
I moved from Photoshop - Sketch - Adobe XD and finally to Figma! Love to be a UI DESIGNER!
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!!
Wow this is mind blowing. Thank you for these! I just started studying Figma!
This was the most informative 20 minutes of my life. Thank you for making this.
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.
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
This is the best explanation of figma design systems that I have come across! Great 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'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.
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
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.
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!
your video is one of the most informative, clear and practical keep up the good work
Charli this is an epic run through of design systems in Figma! Feeling so inspired ✨
EXCELLENT!! Very informative. You're a great teacher. Thank you!
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 🙋🏻♀️🌞
I'm a junior front-end web developer and I think your videos are great!
thank you! I'm glad you like them :)
Very helpful video thanks for sharing and the ways of using custom frames as component is incredible.
Charlie really inspired me too. Thank you for sharing your knowledge.
SOLD. The styles and nesting, combined with the Dev handoff...I'm in love.
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.
This is brilliant! Thank you so much!
So cool! If you were to teach an online video workshop I would totally pay for it.
Been looking into Figma lately :) I like how you explained it. Thanks :)
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 :)
*This is the most helpful and easiest to understand tutorial. Good job! I learned a lot.*
Im glad you shared it with us! Also that I was able to understand your fast english 😅 Thank you!
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 :)
Finally made the plunge and switched from Adobe XD to Figma. Very helpful video, thanks Charli!
Glad it helped!
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
Thank you, Charli, this is a powerful visual tool! Love your videos!
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.
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!
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 :)
Charli, thanks, this is super helpful! I really enjoy watching your tips&tricks videos, it helps me to become better each day
Great, I'm lucky, it works great for me without errors
I am just wondering why you are being so generous with your knowledge?
This video make figma variant more powerful
YEP I need to do an updated video using variants!
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..
Really excellent tutorial....I'm going to try it
Thanks Charli! It's very helpful.
Glad it was helpful!
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 ...
Marie, I will have to go through this video maybe 10x to absorb all the knowledge :)
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.
Thank you super much this is really useful and practical
Awesome 👌 thanks for share
design systems guide is really nice
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!
Oh, so design system is something like you put Corporate Deign/Identity in file complete with additional elements and all details. Nice.
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
Extremely helpful video!
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 👍
Still super helpful! Nice work.
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
your videos are so helpful, im just started to learn everything about ui design :)
Great Video! Thanks, Ma'm.
It was awesome, Thank you for making this video. I am using the design system method for app design.
Really helpful and absolutely enjoyed your video! Thanks x
OMG this was super helpful
Oh, yeah for svg swap. Thanks, your videos are golden.
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!
Helpful. Thank you!
I like how you explained it. Thanks
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
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 :)
There is a way to work around the icons not keeping the styles you set when you change the instances out. This took me so long to figure out, but I think it is very worth it. Just read this thread and walk through the examples: spectrum.chat/figma/general/styles-dont-stick-when-swapping-components~bd7b44b3-aa81-4d68-82f7-af8cd78e8efd
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.
"
Thank you, this was super helpful!
This was wonderfully helpful. I can't thank you enough for this.
You’re welcome Matthew!
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 :)
Super informative! Thanks, CM!
Awesome video Charli!! Thank you so much
You’re so welcome!
Hey Charlie, Thanks for sharing this information.
it is so good for me! thank
this is incredibly helpful!!
What site/software do you check your colours and contrast for accessibility to achieve the WCAG standard? :)
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 :-)
Thank you a lot!
Great video! What's new in Figma?
Thankjuuuuuuuuuuuuuuuuuuuuu! Super! Super!
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
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?
Amazing 🙏🏻
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)?
That is so helpful, thanks.
Very helpful Content.
Can I get the link of figma file
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.
Im looking for the file to donwload after so long... not available anymore ;/
is it possible to have a button component where you can change the text of each individual button like in sketch?
love it ur voice and keep growing ,ur video so cool, and very useful Thnx.
have you tried taskade.com? any tips or advice for using their bujo system?
I love your videos
🤗
What are the (12) lines that you have on the layout @4:37? What are they used for?
Do you design a design system before starting a project or after completing one?
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?