#Features

Drag and drop Interactive Components into prototypes

“Add interactions between component variations in your design system and reuse them in your prototypes with no extra work.” (Launching in January 2021.)

On pitching and presenting

“Since presenting is a large part of both client-facing work and startup-building, Abigail spent the first three years of college refining her presentation skills in front of a variety of audiences: toy designers, vehicle inventors, entertainment executives, and more. Below, she shares her tips for developing and delivering a presentation that lands.”

TinyImage Compressor

I rarely write about plugin updates, but this one is exciting — TinyImage Compressor added support for AVIF image format. If you haven’t heard about it before, check out the blog post ​“AVIF has landed” from a developer advocate for Google Chrome.

A vector stroke marker pack for Figma

Cool-looking collection of vector strokes.

Keyboard Stickers with Figma Shortcuts

Great help if you’ve been trying to memorize the shortcuts.

An easier way to manage tabular data

A smart combination of using components and Auto Layout.

Getting Started with Figma Webhooks

This is a great addition to the previous article. ​“Webhooks offer a first-class way to react to changes in Figma. In this article, we’ll build a small service in Node to listen for these events.”

How to Automate Design Tokens in a Design System

Somehow I missed this article earlier this year, but it’s a good resource for creating an automated process to keep design tokens of the design tool in sync with the code behind it. They achieve this by setting up a Node.js server that generates Sass and Tailwind files with all the variables from the Figma API.

Updated Fonts

“All Google Fonts, Inter, Noto, Font Awesome 5 Free, and Font Awesome 5 Brands have been updated.”

Figma now uses up to 2,000% less memory

Huge performance improvement.

Design like you code with Auto Layout

“Elements can fill their containers in both directions; you can set independent padding values; and items can be set to space between.” (Coming in November.)

Excited about creating variants?

Luis shows how converting the whole GitHub Primer buttons library to variants took less than a minute.

A new experience for Figma Organization admins

Figma redesigned admin settings for Figma Organizations. To introduce the changes, they recorded the whole playlist of demo videos.

Everything Developers Need To Know About Figma

A solid guide to Figma for developers from Smashing Magazine. It’s focused on navigating the app, measuring dimensions, exploring styles, exporting assets, getting CSS from the Code panel, and other parts of the developer handoff.

Making Design Within Reach for online shoppers

A branding and digital agency BASIC worked with Herman Miller on redesigning a Design Within Reach (DWR) website to replicate the experience shoppers might have in a showroom. They used Figma prototypes for usability testing and took the redesign as an opportunity to create the first design system for all of Herman Miller brands.

Use shiki-svg-renderer to render code to SVG

A smart way to export code with syntax highlighting to Figma.

Combine Layout Grids with Constraints

Joey Banks shows a nice use case for combining Layout Grids with Constraints. For a deeper dive, check out my older article on this feature.

Demo of Vector Networks

Miguel Cardona shows how cool and powerful Vector Networks are. The vector editing toolset in Figma is unique and worth getting familiar with.

Tim Tries: Figma, Zeplin and Storybook

Tim Benniks looks at how Figma, Zeplin, VS Code, and Storybook can work together to provide a much better experience for developers.
Tim Tries: Figma, Zeplin and Storybook. Mind is

Office Hours: Complex Component Architecture

Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms, and other forms of complex components.
Office Hours: Complex Component Architecture

Features

Topics

Products

Design Tools

Figmalion

Issues:
242
Links:
4,213