Articles

“We will teach you how to choose the right shade and contrast of colors, how to structure them properly according to their uses. In addition, we will talk about how colors should be properly applied to Light and Dark modes, followed by some tips and tricks, and finally, teach you a quick and easy way to switch from Light to Dark mode with just a few buttons.”

How Dropbox uses Figma’s Smart Animate feature to illustrate product design concepts.

“In 2017, InVision was the top prototyping tool, with 60% of UXTool survey respondents indicating they used it. Only three years later, their user share fell to 23%, with more than half of those people only using it as a secondary tool. In contrast, Figma has seen an explosion of growth and popularity, rising from about 8% of respondents using the tool in 2017 to about 57% in 2020.”

Students of Justus Wunschik’s online class came together to build a beautiful SimCity-inspired city with Figma.

A new tutorial from Blush, based on Pablo Stanley’s Figma Crash Course on YouTube. ​“Learn the basics of Figma’s new Auto Layout and speed up your creative workflow with this awesome feature.”

Creating responsive prototypes with Figma and Anima.

Komal Javed from Shopify shows how to set up your Figma projects to meet the needs of your whole team. Project Index Template is available in Figma Community.

Johan Ronsse makes an argument against overusing advanced Figma features. After breaking down a few complex Variants into smaller Components or being unable to freely move an object in the layout built with Auto Layout, I tend to agree. With great power comes great responsibility.

Uber took a programmatic approach to create 256 new components for map markers. ​“By automating the construction of the markers, I was able to avoid human-error and efficiently generate the full set of variants. Programmatically testing the components allowed me to thoroughly validate them under multiple scenarios and be confident of their quality.”

Luke Cardoni, UX Lead at REI, recently spent time improving the accessibility of form elements in their design system, Cedar. ​“It turned out that these UI components posed the perfect opportunity to start exploring Figma’s Variants feature, as each Text Input, Radio Button, and Checkbox has so many, well, variants.”

Netflix presents Hawkins, their design system widely used across the Netflix Studio’s growing application catalog, which consists of 80+ applications. In this blog post, they explain why Hawkins was built, how they got buy-in across the engineering organization, and what their plans are moving forward. (BTW, the cover illustration is made by Martin Bekerman, whose other artworks you can see below.)

“You can now embed Figma files in P2 so everyone on your team can find and review the latest design files in a single workspace.”

Figma redesigned team settings to make user management and billing more efficient.

Carol Chan shares her learnings from building a collapsible card component with many properties.

The team at Headway shared an evolving list of their favorite Figma plugins for automating aspects of the design process that can take a long time or be done multiple times a day.

With support for components, hyperlinks, PDF export, presentation mode, and shared community files, Figma became a fantastic tool for designing slides and creating presentations. This article provides an overview of the modern workflow.

“If you are reading this, means that you are interested in how and why to move your designs projects to Figma. Don’t expect a detailed guide on what’s the most optimised way of doing it, but rather the whys and hows of how I did it recently and why I believe it was a successful move.”

“As the coronavirus hit the travel industry earlier this year, the design team at Agoda looked at how we could save costs without sacrificing the quality of the work we’re doing. The collaborative features and the opportunity to shrink the cost of multiple license fees to just one were two compelling reasons to review Figma and eventually propose a plan to migrate our whole design organization to the new tool.”

During an audit of marketing pages, the team at Figma realized they weren’t following their own advice. Over the course of a month, their small team created and organized a robust, adaptable style guide and component library that now lives in their CMS. I loved that part: “…every color has its own branded name, inspired by California, where Figma is based. An earthy green is avocado toast, and an ember yellow is sunset.”

Zapier announced a new set of features for product teams, including native support for Figma Variants.