Mastering the art of crafting code-aligned UI kits - Jan Toman (Schema 2021)
ฝัง
- เผยแพร่เมื่อ 9 พ.ย. 2021
- Not sure where to start? Get your libraries off the ground by learning how to craft UI kits that designers will love using. Jan Toman, Design Systems Lead at Productboard, dives into building flexible components, aligning API with code, and dealing with changes as the design system evolves.
Schema is an online conference about design systems by Figma. For more info, check out schema.figma.com/
Find Jan's slides on the Community here: www.figma.com/community/file/...
#figma #schema #schema2021 #design #ProductDesign #FigmaDesign #DesignSystems #Productboard #ProductboardDesign - วิทยาศาสตร์และเทคโนโลยี
![[TH] 2024 PMSL SEA GF D2 | Summer | ร่วมส่งแรงใจ เชียร์ไทยไปพร้อมกัน](http://i.ytimg.com/vi/dN2gLsCJ0T0/mqdefault.jpg)
1 - Split variants into more components
2 - Set the most frequent variant as default
3 - Tables: Breakdown table in smaller components in order to provide common presets
4 - Base components: set a component as primitive
5 - Use labels and dividers inside components to enhance organization.
6 - Align property names in react and figma.
This was one of my favorite Schema talks.
Mindblown!, such rich content - right from best practice to actual tactics
Very cool speaker!) Such a good approach for the design systems organization. The most useful for me was how to mark some components as deprecated.
I’ve been exploring this the past few months to help align my component structure with the code snippet controls. I’ve also been trying to keep components organised with large variants.
So useful! Dear Jan, thank you a lot! You are on top.
this is exactly what I need to know for my current project!!! Thanks so much!
Full of great ideas and reflections. Especially loved the parts on breaking changes and canvas organization starting at 26:30. It's definitely a lot of work but totally aligned with the project of being replacable and leaving a great experience to our successors too. Looking forward for Automator plugin too ! Thanks for sharing !
That's very helpful and professional talk. Thank you!
Highly practical stuff 🤝
Great video, learned a few things that I'll use in the future.
Great talk! Thank you so much.
Incredibly helpful - but I am so conflicted between basing my complex components on structures/base components VS. not at 26:04. Have been using base components with most of my variants
Thank you!
This was great!
How did he add the purple dashed dividers inside the 'Button Primary' component (dividing it into three sections) as seen in 20:45?
i wondered the same but I think it was literally just a dashed line added in
How did you make "Min width helper" component with 0 px height?
Yeah, I have the same question...
If you set the height to 0.001px, Figma will round it to 0px
It is called zero-pixel frame technique. You can learn much about it from here -> th-cam.com/video/hnPIpkvDxjc/w-d-xo.html
make height .001. rounds down to 0