An in-depth tutorial covering 3 common use cases for Auto Layout — button with an icon, content card, and a chat log screen.

Auto Layout can be used for so much more than just buttons and lists. This post shows how useful it is for working with copy and images.

Not sure if this post should be called ​“quick tips” as it mostly surfaces unresolved problems, but it’s an interesting look at the limitations of the current implementation.

Figma’s Director of Product wrote a detailed explanation of why layers are ordered backward inside an Auto Layout frame. This thread is a good illustration of how many factors have to be considered even for a seemingly simple design choice.

An interesting observation that what we need next is states, styles groups, and variables. Yes, please!

Dan Strogiy writes about the pains of their previous Sketch workflow, the benefits of moving to Figma, their new organization system, and some fresh pains of a new workflow.

It’s interesting to see how this team of 9 designers transitioned to Figma. I’m particularly impressed with their planning and communication with other team members. Part 1 provides some context for the switch.

A conversation with a creative director of Figma about recent brand refresh.

Nice observation. Figma’s team has great attention to detail.

One of the most epic posts in Figma’s archive, diving deep into the history of leading and line height in traditional printing, desktop publishing, and on the web. It explains why Figma works with type the way it does.

A comprehensive comparison of modern design tools, looking at features, extensibility, collaboration, supported platforms, and price. Not to spoil the result, but Figma takes the first place.

My second plugin got approved just a week ago. Typographer formats text with typographic features traditionally used in fine printing — en- and em-dashes, curly quotes, apostrophes, ellipses, and more.

Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).

Add color styles straight out of your Tailwind CSS config file.

Export SVG files optimized with SVGO.

Snap photos with any phone and send them directly to Figma. Great for notebook sketches or whiteboard brainstorming sessions.

After Smooth Shadow generator made rounds in the design community, its author built a matching Figma plugin. It’s the easiest way to build a nice smooth shadow, and as it’s based on a box-shadow CSS property it’s easy to export and reuse in code later.

Redlines is a toolkit designed to make developer hand-off easier. Create and generate redlines from a selection of objects with ease, while also enabling full control over the style and display of each redline element.

I assume this will be a highly valuable resource for VS Code theme designers, but also it’s just interesting to look at the organization and building blocks of a design system for such a popular product.

A boilerplate for developing Figma plugins that take care of setting up and configuring TypeScript, Webpack, ESLint, Stylelint, Prettier, Jest, EditorConfig, etc.

Figma’s Data Scientist created an experiment to see if a well-maintained design system really saves time for designers. ​“We found that when participants had access to a design system they completed their objective 34% faster than without a design system.”

“What fonts, styles, and pantones are most popular? What frame sizes are most common? What does it look like, on the file level, for teams to design together?” Report based on data from over 50,000 active users.

With help from 12 industry experts, this article looks back at the decade and how the role of design transformed during it. ​“So to recap, in 2010 a few factors converged that motivated tech companies to invest more in design. To handle the transition to mobile, they needed people trained in the power of distilling complexity to its fundamental elements. Naturally, once users got accustomed to beautiful and easy-to-use experiences on mobile, that raised their standard for all user interfaces. At the same time, it got easier to start and build a tech company than ever before, so companies faced far more competitors and had to differentiate via their user experience.”