chad

Chatting about Figma, design systems, and random thoughts over on Bluesky.

[Figma @figma]

Component properties can now be bound to variables

Also, UI has been simplified so that props and variables are in the same dropdown

[chad @dotdude]

The more I use the redesigned eyedropper in @figma the more I'm loving the little create variable feature. Check it out!

[chad @dotdude]

The eyedropper redesign is 🔥

[Ana @_AnaBoyer]

A new day, a new launch here at @figma!

Excited to share our updated eyedropper tool that can now grab color variables 🌈

[chad @dotdude]

@selembung @figma Will share that feedback with the team 🙏

[chad @dotdude]

The new variables quality of life updates in @figma have already been helpful when I’m experimenting as a part of my workflow! Here’s a few of my favorite updates, what are you the most excited about?

[chad @dotdude]

Here's a solid example file showing variables + component properties in action from @pwnies. Grab a copy from the Figma Community at https://t.co/vnh4R2CIPS

[Jacob Miller @pwnies]

I’m so hyped we can now map variables to component properties!

One reason why I’m really excited about this is it finally unlocks the ability to use translation strings in conjunction with props. Here’s a free design to see how it all works:
https://t.co/U3pCZs1RRn

[chad @dotdude]

Using variables to change variants in @figma is cool and all, but have you used variables with component properties?

Now you can! No detaching needed.

Check out this tip to walk through the new unified UI and start binding variables to props - https://t.co/kQhod3el8l

[Figma @figma]

7 quality of life updates to variables:

→ Copy + paste across collections
→ New variables under selection
→ Hover to show value and description
→ Hover to show group names
→ Tabbing through authoring window
→ Improved input accessibility
→ Resize columns

[chad @dotdude]

@guigadourado @miggi @disco_lu Glad to hear you got it working!

[chad @dotdude]

@guigadourado @miggi @disco_lu The logic on the remove button would be similar, and when wired up you should have flexibility to change the max amount of items selected with one variable!

[chad @dotdude]

@guigadourado @miggi @disco_lu Then you just need to set up the conditional logic, which you're close on! Instead of doing that variant change up front, try wrapping it all in a conditional and then using a second conditional to see if that hidden layer should be shown in the default variant.

[chad @dotdude]

@Jonnotie @figma @rogie Select the color just to the left of the color chip in the fill section and hit cmd + c to copy, then you can paste it to any selected layer!

If there's not a fill on the layer already it will add one, otherwise you can press cmd + option + v to replace an existing fill.

[Ana @_AnaBoyer]

Our Design System Best Practices talk is now on YouTube along with all the other #Config2024 talks 🎉

https://t.co/J7M0u2hGYL

#designsystems #figma

[chad @dotdude]

Getting this party started!
#config24

[chad @dotdude]

Passing through #config2024 Commons this afternoon!

[chad @dotdude]

I'm super honored and can't wait to share the stage at #config2024 with @_AnaBoyer and @alexiadanton where we'll take a dive into design systems. We'll share some insights and @figma tips we've learned throughout our careers and working with so many of you across the community!