Great article by Christine Vallaure on improving accessibility by using relative font sizes in CSS, and how to work around pixel-based sizes in Figma. While I always use a combination of rem and em units, I wasn’t familiar with the 62.5% CSS hack or that units can be switched during hand-off in Zeplin. Very cool!
Download or update to the latest version of the Figma desktop app to try it out.
Clara shows some of the plugins that already support keyboard parameters.
Plugin parameters are out of beta — open the quick action bar with Cmd-/ (Ctrl-/ on Windows), enter the plugin name, and select from a list of plugin-specific parameters or enter a custom value. Great way to speed up work with the keyboard.
“We are always impressed with the Figma Community and wanted to share what they’ve come up with, so we reached out to three developers to learn more about who they are, what they built, and what they’re working on next. Read our first Q&A in the series with Tru Narla, and check out her widget on the Figma Community.”
Open-source Figma plugins for speeding up the workflow — great way to look inside and learn.
Jordan Singer shows some of the automations in his AI tool. Looks amazing, and you can join the waitlist at his website.
Here's a thread on some of the automations I've put together in Automator from @tricycleai ranging from simple to complex 👇 pic.twitter.com/NSUpMVwAmu
— Jordan Singer (@jsngr) October 23, 2021
Powerful use of Figma variants and VS Code design toolkit to work on dark and light themes.
👨🍳 Been cooking with our @code design toolkit in @figmadesign to make our components easily theme between dark and light variants without adding additional color styles. This is looking promising. pic.twitter.com/EUUasD0EMv
— Miguel Solorio (@miguelsolorio_) October 29, 2021
A nice tip to UI kit maintainers from Jan Toman.
💡 A small usability tip for @figmadesign UI kit maintainers:
— Jan Toman (@HonzaTmn) October 15, 2021
Add the component name to the component description. It's especially useful when the component name is longer than ~10 characters. pic.twitter.com/gawuvNle6X
Ridd with a step-by-step walkthrough to help you design form components that scale without drowning yourself in variants.
Jan Six, Sr. Product Designer at GitHub, talks about creating a design tokens system in Figma. See also his plugin Design Tokens below.
Google’s Material Design is teaming up with Figma to bring great UI from design to code: “Our design to code workflow allows teams to create UI components in Figma and export them in a portable container we call a UI Package. These Packages can be directly used in Jetpack Compose projects for Android applications, can be edited in Figma, and can be directly updated in code with good developer ergonomics for component reuse and change management.” Don’t miss the video from Android Developer Summit with a new workflow.
Play Rock Paper Scissors with your friends in FigJam.
Play Tic-Tac-Toe with 2 or more players.
Take memorable team selfies with the whole team.
Fully-fledged calendar widget by Mirko Santangelo.
A simple todo widget by Jordan Singer.
Speaking of visual thinking, this prototype is a great illustration of the power of widgets. Can’t wait for it to get approved!
I got a very rough prototype of visual programming working with FigJam widgets! 🤯 Excited to experiment with this more.
— Cole Bemis (@colebemis) October 21, 2021
Heavily inspired by @_paulshen's https://t.co/cIXwRMQjhX ❤️ pic.twitter.com/ClXVABRzUD
A huge change for organizations with external collaborators and education. “Open sessions is a way for visitors to join your FigJam file without having to create an account. Now FigJam is a welcoming space for all participants — from the teammate, to the external partner, to the occasional jammer.”