Live build: YNAB Figma Component Library | 020 смотреть онлайн

Organizing all the variables I imported in the last stream, deciding what should be Primitive, Semantic, and Component level. I also tease a blog post I am currently writing about those different levels of collections.

? About this stream series
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
In this "Live Build" series I'll demo different component building techniques and best practices as I build a YNAB component library from scratch. After every stream I'll publish a copy of the file in the Figma community for folks to download and explore.

I've been writing about Figma components for a little while, but recently realized video might be a more helpful medium for sharing what I've learned.

Why YNAB? First, it’s one of my all-time favorite products. Second, it’s got a relatively complicated interface! I think this will be a fun but challenging build that will allow me to cover a lot of topics.

? Snag a copy of this Figma file from the community: https://www.figma.com/community/file/1087477788974937352

⏰ Timestamps ⏰
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
0:00 Intro
0:35 Poll results
1:08 Grouping variables
4:20 Primitives should not have modes (also blaze ?)
4:48 Legacy color should be in their own group
6:14 Emojis in variable group names
7:24 Grouping variables (continued)
9:33 Blog post about an analogy for variable collections
14:13 Grouping variables (continued)
15:45 Semantic-level variables should be in their own collection to enable theming
19:14 Comment #69 (nice) from Jared on Primitive VS Semantic variables
22:50 Help! Plugin or something to move variables between collections?
23:16 Grouping variables (continued)
31:39 "Label" variables... component level?
32:42 Grouping variables (continued)
39:11 "Scrim"???
39:35 Grouping variables (continued)
42:35 Reviewing variable groups
45:29 Outro

? Links to things/people mentioned
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Variables deep dive Config 2023: https://www.youtube.com/watch?t=2508&v=M0NU5QFLCl4&feature=youtu.be
Jay Miles: https://jayzmiles.com/

? Around the web ?
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
? Website: http://alicepackarddesign.com
❖ Figma community: https://figma.com/@alicepackard
? Newsletter: https://alicepackard.ck.page/50b59ae947

? About me
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
I'm Alice, a design operations practitioner. One of my favorite parts of design ops work is pairing with product designers to build high quality, super flexible, easy to use Figma component to make designing mockups and prototypes easier, faster, and more enjoyable.

If you're interested in joining me during the next stream, sign up for my newsletter on my website or subscribe to my channel to be notified of the next stream!