Mastering the art of crafting code-aligned UI kits - Jan Toman (Schema 2021)

[@eletricalengineering101]

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.

[@luciannovosel3843]

This was one of my favorite Schema talks.

[@christophevm1880]

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 !

[@benjaminmaclaren9548]

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.

[@abhishekdhyani3402]

Mindblown!, such rich content - right from best practice to actual tactics

[@Junnanma]

this is exactly what I need to know for my current project!!! Thanks so much!

[@kurifurikurifuri]

So useful! Dear Jan, thank you a lot! You are on top.

[@nickzhurenko]

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.

[@CuttingEdgeSchool]

Highly practical stuff 🤝

[@aydinabbasov3790]

That's very helpful and professional talk. Thank you!

[@yeraizamorano2641]

How did he add the purple dashed dividers inside the 'Button Primary' component (dividing it into three sections) as seen in 20:45?

[@Mikejo3030]

i wondered the same but I think it was literally just a dashed line added in

[@danielmcewen7769]

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

[@bryanmanio_]

Great video, learned a few things that I'll use in the future.

[@oPATMANo]

Great talk! Thank you so much.

[@mkdsgn_]

How did you make "Min width helper" component with 0 px height?

[@yvesflorack848]

Yeah, I have the same question...

[@maurilop92]

If you set the height to 0.001px, Figma will round it to 0px

[@aydinabbasov3790]

It is called zero-pixel frame technique. You can learn much about it from here -> kzbin.info/www/bejne/np-zeqOhq6mroMU

[@Mikejo3030]

make height .001. rounds down to 0

[@oscarfonseca5882]

This was great!

[@intracerebrally]

Thank you!