Product Designer at Figma
Seattle, WA
Joined November 2011
- Tweets454
- Following196
- Followers2.3K
- Likes731
Excited to launch @figma Motion! I joined this effort a few months ago, and one of the many things I’ve been able to design so far: Motion Styles! You’ll be able to save and distribute your own styles very soon. But to get you started, we have 36 premade styles ready for you to play with.
We have a ton of stuff in the pipeline, and are working hard to make this the best motion tool out there. Let us know what you need! We’re listening.
This was such a fun project to work on! It's a genuinely useful product, even outside of the dev handoff milestone. I use it all the time for quick tidying up. Hope you find it useful as well! Big thanks to the team behind this, who are some of the best collaborators in the biz.
Check Designs: Keep every file synced to your design system with
→ Variable & style suggestions
→ Color contrast suggestions
→ Library mismatch detection
→ Detached component detection
1
5
796
We sure do! I designed this — here's how it works:
→ Real-time auto-calculated color contrast info and pass/fail indicators
→ Visible boundary and pass/fail zones on the color spectrum
→ Auto-detects the category
→ Auto-detects the background
→ Auto-correct a failing color to the nearest passing color
→ Adheres to WCAG 2.2 categories across levels AA and AAA
→ Settings menu to control preferences
→ Flyout to view auto-detected background color
We just released a new @figma feature I’ve been working on for a while now: inline search for library colors! You can now type directly in the hex code input to access your color variables and styles.
It’s starting to rollout now, let us know what you think!
Big shout out to the core team behind this: Tiffany Wang, Raul Alfaro, Ruairi Dorrity, Anya Gert, Parth Patel, Samuelle Saliba!
1
1
590
We’ve made some upgrades to the variables authoring modal in Figma.
→ Filter
→ Search
→ Expand
These are out now!
Big thanks to the team that brought these to life — more to come :)
Before having color contrast checks directly available in my @figma workflows, I would have chosen color combos that are not passable by accessibility standards. But because of this feature, I’m learning to better recognize good contrast. Here’s a few examples!
If you’re new to the complexities of color accessibility standards — like I was at the start of this project — here’s a distilled cheat sheet that can help you make the most of our new tool in @figma. Let us know if you have questions, and happy contrasting!
...If you find that’s the case for your design, we recommend duplicating and isolating the foreground and background elements you want to evaluate onto a clean part of the canvas.
1
604