#Features

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.

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

An easier way to manage tabular data

A smart combination of using components and Auto Layout.

Keyboard Stickers with Figma Shortcuts

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

A vector stroke marker pack for Figma

Cool-looking collection of vector strokes.

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.

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

Updated Fonts

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

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.

Workshops

Easily facilitate collaborative design sessions directly in Figma.

Gifmock

Create high-quality GIFs from static images and mockups. Make sure to check out a fun demo.

Build it in Figma: Create a Design System IV — Testing

Testing a design system to see if the component library is robust enough in real-world scenarios.
Build it in Figma: Create a Design System lV —

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

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

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.

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.

Use shiki-svg-renderer to render code to SVG

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

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.

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.

Anyone else using spacers in Figma’s Auto Layout?

Can’t wait to see what they’ve got!

Features

Topics

Products

Design Tools

Figmalion

Issues:
230
Links:
4,055