Articles

Jordan Singer on why he is building Automator, a general purpose tool to automate Figma. Its private beta was all the rage last week — see a few creative ways to use it below.

Beautiful effect! See also the source file at the Community.

A very solid list of recommendations, and not only for new designers.

Alex Dyakov explains how his team at Yandex.Maps uses Figma API and a separate development library to export assets and styles for all supported platforms, such as iOS, Android, and web.

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.

“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.”

The team at Onfido Tech moved to Figma from Sketch and Abstract, and they organized projects and files to work around the lack of branches back then. Their structure may be a good fit for a larger organization.

Good write-up from Think Company on switching to Figma from the perspective of an agency working with high-profile clients.

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.

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.”

So many great things in a single announcement! New pricing starting February 2022 ($0–5/editor/month), open sessions, widgets, plugins, embedded content, as well as new shapes, code blocks, and templates.

A recap of everything that got shipped in October: new FigJam capabilities (see below), Interactive Components, and Branching. A busy month after a multi-year effort!

Interactive Components are now available to everyone! Thanks to this powerful feature, we can now create reusable and shareable interactive elements for design systems and prototypes. (If you didn’t participate in the beta and want to catch up with new possibilities, check out the Interactive Components topic at the Figmalion website or this Twitter thread by Figma.)

“For the infrastructure team, the question was: how do we empower our product engineers to build these real-time views easily, while abstracting away the complexity of pushing data back and forth? To provide a general solution to this fundamental business need, we developed LiveGraph, a data fetching layer on top of Postgres that allows our frontend code to request real-time data subscriptions expressed with GraphQL.”

“Today’s launch of Anima 5 marks another milestone on our mission to perfect the design-to-development workflow: truly functioning Material Design in Figma and Adobe XD. This means you can now build prototypes using actual code-based Material UI components.”

“Creating components with automated sizing behavior saves a lot of time during the process. They also let us think more like a developer that has to implement the real application. That is why it is essential to master Constraints and Auto Layout in Figma.”

John Fuetsch, Software Engineer at Figma, explains why they’ve built branching. ​“Branches are exploratory spaces that enable designers to try new ideas without changing the main file until they’re ready and approved. They are especially useful for preserving the integrity of approved designs, while making room for work that’s experimental or iterative in nature, like contributing to a design library and previewing work for stakeholders.”

Ana Boyer on the best practices and strategies for collaborating in FigJam throughout the entire design process — from your first brainstorm to the final review.

Emily Lin, the lead product manager of FigJam, shared some of her experiences and lessons learned from launching FigJam with a team at Productboard.