I appreciate the tutorial. I have seen a lot of videos to learn how to develop design systems, but none of them were quite as good as yours. I appreciate all of your hard work.
Thanks more for the course, I couldn't figure out how to work with color and options for a long time, your course helped a lot, the best one I found on youtube!!!
This is exactly the tutorial i needed to get a good grip on a start in figma and ui/ux design. Didn't know people created design systems before this and i love that it is so up to date. I'm really excited to see what the future episodes are gonna be about. Keep up the good work!
Thanks for the warm welcome to Episode 2! The insights into building basic form components are incredibly helpful. It's great to learn how to maintain consistency and usability in design systems, whether you're a designer or developer. Looking forward to applying these principles!
@@UICollectiveDesign I'm looking forward to Part 3 and diving into those more complex form components. I'll definitely share the video keep up the great work! 😊
Thanks for sharing these wonderful series. I was in a doubt how we actually create such a massive design system but now I can feel it is not that tough. You made me understand very well. Thanks and keep posting such a valuable videos.
Great video! Question, why wouldn't you combine both button sets so a designer could toggle icon only and it switch to the icon button set, rather than it being two separate components? Additionally, if you needed additional sizes based on device, for example, desktop and tablet (where tablet is customer facing (senior citizens) and therefore the buttons need to be much larger for visual impaired) ... would those be variants or would you create a mode at the responsive collection level? OR would this be one of those edge cases to build modes at the component level for those components that would resize larger for "kiosk" specific instances. This is very specific but curious how'd you'd approach?
Wow another great question. Love the dialogue. You could also combine these button sets but then a designer who needs a button icon has to pull in a button and then switch to an icon instead of just the button icon directly. Just a different approach but both work. So for different sizes you could add size variants or leverage padding and gap spacing variables to make them response based on different modes. Personally, I think size variants are much cleaner.
Thanks for making this video series. I reached the part where you are making the Checkbox-label component and I noticed a discreptancy between what I was doing and your example. When you combined the checkbox and label into one component the bounding box on your component cuts the border of the checkbox off. Is this the expected behaviour or is Auto-Layout supposed to have "Strokes: Included" ?
These videos are just so helpful, thanks a million to share you knowledge! I just have a question, but probably it is because I'm a totally newbie at this, when I change the icon inside the field or button with the property I create, the color also change and doesn't stick with the default I set. Any clue on what I could be doing wrong? Thanks anyway!
Would be interesting to hear your thoughts on Atomic design. I'm currently creating a design system that is being identically copied into flutter for easier implementation using Atomic Design. Figma has some limitations but i can workaround.
@@baguetteDuGame We use the principles of atomic for the design system. However, it’s 13 years old and a lot has evolved in the design system world since then. As such the vernacular has changed to tokens, components, modules etc...
So interesting to see how you map the colors. Would be awesome if you also could touch upon scenarions like, maybe there just isnt one dark shade of icons, maybe there's different type of body colors, maybe based on the background i use different type of colors of tag etc, yeah you get the point!
Absolutely! A lot of these will be covered in future episodes. During Part 1, I purposely left some variables out so I can show how the design system will evolve over time.
Thanks for your tutorials. It's very helpfull but I have a question for button icon. I changed another icon by instance but a color didn't change to white, it's still black.
Its impossible to make a swap instance if the icon used isn't from a DS that has an icon library. When I select my component icon from a component I made myself (not a DS component) there's no option top right in Figma UI3 to actually set a swap instance. The function is simply not there in that section. Not in the context menu. I've seen UI3 demos on this and I don't get it. I don't see where the icons they are using lives, the demos just shows the process of making a swap icon instance. I'm following it to a tee but the option is simply not there. Is this impossible if the icon doesn't come from a library? I'm connected to a DS icon library so I believed I should be able to swap the icon with icons available in that library by creating a swap instance.
@@UICollectiveDesign Yeah, the icons I'm trying to swap to are published in a separate icon library administrated by the DS. The icon I have myself on my page in my component is not. That's just an icon I made.
I really enjoyed your videos on UI/UX design! I have already signed up on your website, but I couldn’t find any courses from scratch for beginners in the UX/UI field. Could you please let me know where I can access the complete course, including tutorials on Figma? I would love to learn more. Tnx!
I appreciate the tutorial. I have seen a lot of videos to learn how to develop design systems, but none of them were quite as good as yours. I appreciate all of your hard work.
Thank you! Please share this video on social media where you can :)
Thanks more for the course, I couldn't figure out how to work with color and options for a long time, your course helped a lot, the best one I found on youtube!!!
Awesome!! Please subscribe and share this video where you can :)
This is exactly the tutorial i needed to get a good grip on a start in figma and ui/ux design. Didn't know people created design systems before this and i love that it is so up to date. I'm really excited to see what the future episodes are gonna be about. Keep up the good work!
Thank you!! Please share this on social media where you can :)
Thanks for the warm welcome to Episode 2! The insights into building basic form components are incredibly helpful. It's great to learn how to maintain consistency and usability in design systems, whether you're a designer or developer. Looking forward to applying these principles!
Thanks for the kind words!! Part 3 will include more complex form components :) Please share this vid where you can!
@@UICollectiveDesign I'm looking forward to Part 3 and diving into those more complex form components. I'll definitely share the video
keep up the great work! 😊
These are really great videos. Thanks for all of this work. Dare you to release all these in 4k!
Thanks!! Please share them on LinkedIn :) 4K is on it's way!!
We want part 3 now where you start building screens with this design system and show more grids and responsive part
Part 3 is being released this week!
@@UICollectiveDesign nice🙌
Yesterday I was close to write in you to know when will come this second episode. Thank you uploaded.
Awesome! More on the way in a couple weeks :)
Thanks for sharing these wonderful series. I was in a doubt how we actually create such a massive design system but now I can feel it is not that tough. You made me understand very well. Thanks and keep posting such a valuable videos.
Glad to help! Please share this video on your social media where you can!
Great video! Question, why wouldn't you combine both button sets so a designer could toggle icon only and it switch to the icon button set, rather than it being two separate components? Additionally, if you needed additional sizes based on device, for example, desktop and tablet (where tablet is customer facing (senior citizens) and therefore the buttons need to be much larger for visual impaired) ... would those be variants or would you create a mode at the responsive collection level? OR would this be one of those edge cases to build modes at the component level for those components that would resize larger for "kiosk" specific instances. This is very specific but curious how'd you'd approach?
Wow another great question. Love the dialogue. You could also combine these button sets but then a designer who needs a button icon has to pull in a button and then switch to an icon instead of just the button icon directly. Just a different approach but both work.
So for different sizes you could add size variants or leverage padding and gap spacing variables to make them response based on different modes. Personally, I think size variants are much cleaner.
Can you also show us how to create variable library and adapt it to every other use cases?
That is in Part 1!
Why do you place that little downward arrow by the icon name the right rail? Thanks for going through this
Can't have two properties with the same name :) Also helps show that the properties are connected
Awesome dude! I want more!!!!! How many episodes left?
Probably about 6!
Thanks for making this video series. I reached the part where you are making the Checkbox-label component and I noticed a discreptancy between what I was doing and your example. When you combined the checkbox and label into one component the bounding box on your component cuts the border of the checkbox off. Is this the expected behaviour or is Auto-Layout supposed to have "Strokes: Included" ?
These videos are just so helpful, thanks a million to share you knowledge! I just have a question, but probably it is because I'm a totally newbie at this, when I change the icon inside the field or button with the property I create, the color also change and doesn't stick with the default I set. Any clue on what I could be doing wrong? Thanks anyway!
Take a look at our video on icon variables! It covers this topic :)
@@UICollectiveDesign Thank youuuuu!
Would be interesting to hear your thoughts on Atomic design. I'm currently creating a design system that is being identically copied into flutter for easier implementation using Atomic Design. Figma has some limitations but i can workaround.
When you say atomic are you talking about Brad Frosts design system theory or a library called atomic?
@@UICollectiveDesign yes, Brad frost theory
@@baguetteDuGame We use the principles of atomic for the design system. However, it’s 13 years old and a lot has evolved in the design system world since then. As such the vernacular has changed to tokens, components, modules etc...
So interesting to see how you map the colors. Would be awesome if you also could touch upon scenarions like, maybe there just isnt one dark shade of icons, maybe there's different type of body colors, maybe based on the background i use different type of colors of tag etc, yeah you get the point!
Absolutely! A lot of these will be covered in future episodes. During Part 1, I purposely left some variables out so I can show how the design system will evolve over time.
@@UICollectiveDesign amazing!
@@snorose3458 Also please share this series where you can :)
Thanks for your tutorials. It's very helpfull but I have a question for button icon. I changed another icon by instance but a color didn't change to white, it's still black.
Take a look at our icon variables video and it will cover this! Likely an issue with your layer naming.
Thanks for sharing, these are great! For some reason I don't have the option to reorder my component properties on the right side of the screen. Weird
Glad you like them! Please share where you can :) & really? Even when you click the outside box of the components?
Thank you so much for the tutorials❤️
Glad to help! Please subscribe and share this video series where you can :)
Its impossible to make a swap instance if the icon used isn't from a DS that has an icon library. When I select my component icon from a component I made myself (not a DS component) there's no option top right in Figma UI3 to actually set a swap instance. The function is simply not there in that section. Not in the context menu. I've seen UI3 demos on this and I don't get it. I don't see where the icons they are using lives, the demos just shows the process of making a swap icon instance. I'm following it to a tee but the option is simply not there. Is this impossible if the icon doesn't come from a library? I'm connected to a DS icon library so I believed I should be able to swap the icon with icons available in that library by creating a swap instance.
You need to be swapping with an icon from a published library if I am understanding correctly
@@UICollectiveDesign Yeah, the icons I'm trying to swap to are published in a separate icon library administrated by the DS. The icon I have myself on my page in my component is not. That's just an icon I made.
Hey, I had a problem with the preferred values for the 'icon left'. could you help out?
You are the best! 🙌
Woooo!!
I you made a course with how to tackle a design brief and web design process I would purchase. Well done!
I can put it in the works!
@@UICollectiveDesign 🙌🏾
Thank you for this 🔥🔥
No problem! Please share this video on your LinkedIn if you can :)
I really enjoyed your videos on UI/UX design! I have already signed up on your website, but I couldn’t find any courses from scratch for beginners in the UX/UI field. Could you please let me know where I can access the complete course, including tutorials on Figma? I would love to learn more. Tnx!
Answered your recent comment in the other video! Sorry I missed this one
Thank you for amazing tutorial
Glad you like it! Please share where you can :)
Hi, i am unable to find Instant swap in new figma UI, Please help
Sorry I use the old UI still
@@UICollectiveDesign No issue, I Got it, it was at a different section.
where i can dl this file?
Not available for download
"Hi! Can you please teach us how to create a light and dark theme?"
Already have a video on that
Love this tutorial, but Figma made so many changes on their new UI it makes it hard to follow some parts. Doing my best to follow though!
Still need to adjust to the new UI honestly. Thanks for the feedback though!!