Live build: YNAB Figma Component Library | 008

Newsletter subscribers have spoken! I'm beginning to work on the budget table header!

💡 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/file/1087477788974937352

⏰ Timestamps ⏰
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
0:00 Introduction / New streaming schedule + Newsletter subscriber perks
1:57 Review of voting options and poll results
3:26 Inspecting budget table header
7:15 Constructing ◈ Button / Budget table header buttons
13:05 State property ◈ Button / Budget table header buttons
15:58 Focus state rings, method 1: rings as drop shadows
17:08 Focus state rings, method 2: rings as absolute positioned frame
20:45 Enabled property ◈ Button / Budget table header buttons
25:33 Inspecting cell elements in budget table header
28:21 Outro

🔗 Links to things/people mentioned
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
My past rant on "state" properties and why "disabled" isn't an appropriate value for that prop: https://www.youtube.com/watch?v=vW6jxxYBk8Y&t=2967s
Molly Hellmuth's focus state method that uses a single absolute positioned frame: https://twitter.com/molly_hellmuth/status/1618671342165053440
Use cursor chat to get my attention: https://help.figma.com/hc/en-us/articles/5665442977431-Select-keyboard-layout#shortcuts

🌐 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!

Тэги:

#Figma #Component #Library #YNAB #You_Need_A_Budget #Design_System #Atomic_design #Base_components #Component_architecture #Advanced #Live #Stream #Let's_Build #Design #UX #Product #Build #Auto_layout #Best_practices

Скачать видео