Here's a solid example file showing variables component properties in action from @pwnies. Grab a copy from the Figma Community at figma.com/community/file/143…
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:
figma.com/community/file/143…
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 - youtu.be/Z76T5ZsCJo4
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
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?
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!
Change modes in your @figma prototypes with the new Set Variable Mode interaction!
Check out the Advanced Prototyping playground file to try it out and learn more - figma.com/community/file/123…
Working with typography in @figma and not seeing the variables icon to apply a variable? Be sure to check that there are string or number types available in your file.
Learn more and try out some examples with the Figma Variables playground file: figma.com/community/file/123…
Building a design system is a team effort, but where do you start? In our latest blog post for @figma’s blog Shortcut, I break the process down sharing some tips and advice I've gotten as you approach your design system. 🧵
3/ One key step: Align your design system with overall company objectives. Tying it to tangible business benefits, like faster time-to-market, can help secure the resources and buy-in you need.
4/ Want more design systems? Join us for Framework by Figma, a global design systems event happening April 16. What burning questions do you have about building and scaling design systems? Let me know!
x.com/figma/status/177807818…
Everything you need to know about Framework by Figma
9AM PST → Opening & welcome
930AM → Variables deep dive & demos
10AM → Creating a more connected design system
1030AM → Design to code roundtable with Bumble, GitHub, HP
11AM → Beneath the surface of Verizon’s approach to variables
1130AM → FAQs and closing
you're about to say: finally → bit.ly/3PDNvd4
ALT A visual for our virtual design systems event, Framework by Figma happening April 16 at 9am PDT / 6pm CEST.
Ahoy! Have you heard about Framework by @figma ?
I heard there's something about beanie babies, pogs, Raphael from the ninja turtles and Yahoo.
I'm going to check it out, how about you? Join me -> bit.ly/3PDNvd4
From graphic standards to atomic design, our latest for the @figma blog takes a journey through the evolution of design systems and their impact on the products we use daily. Give it a read and let me know what you think! What topics should we cover next?
figma.com/blog/design-system…