Issue #23 •

“Designing in Figma” book launch. New features: Variants, Interactive Components, and improvements to Auto Layout.

Book “Designing in Figma”

📘 My book ​“Designing in Figma” is finally here! 🙌 I started collecting material while working on the Figmalion almost a year ago, spent six months writing it, and another two illustrating, designing, and producing different versions. Lots of tips and tricks I previously included in the newsletter made it to the book. There are over 220 illustrations and screenshots inside! It’s available as an ebook (handcrafted PDF + EPUB) and a print-on-demand paperback from Amazon.

Right now, I’m running a limited-time launch price on an ebook — it’s only $19 instead of the full price of $29. Check out the website figma​book​.com to see the Table of Contents and what’s inside. I’ve put a lot of time into the book, and it would mean the world to me if you check it out and help spread the world!

Book “Designing in Figma”

Now, onto the Config Europe and fantastic updates from Figma.

— Eugene

🇪🇺 Config Europe

Keynote, Dylan Field – Embracing the tension between design and code

Watch Dylan Field, CEO of Figma, talk about Figma in Europe and demo new design systems features.

Embracing the tension between code and design

Announcements from the above keynote, presented as a blog post. ​“We believe in embracing concepts from engineering and design, adopting the rigor and reusability of code while preserving the rapid iteration and uninhibited exploration that makes visual design so powerful. […] When code and design components mirror each other, teams can move much more efficiently. Today, we announced Variants, Interactive Components, and improvements to Auto Layout that will allow teams to do just that.”

Bridging code and design components with Variants

“Combine variations of the same component for different interactive states, colors, and sizes to mirror your front-end code and simplify your asset library.” (Coming in November.)

Excited about creating variants?

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

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

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

App Updates

New Instance Swap Menu and Inspect Tab

Two features announced on the Config Europe are already live! New Instance Swap menu and updated Inspect tab help both designers and developers navigate large, complex libraries in Figma.

Figma now uses up to 2,000% less memory

Huge performance improvement.

Updated Fonts

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

What’s New

Designing a Material Theme: Color

A guide to creating the perfect palette with Material Design. While it’s not strictly specific to Figma, the recommended Baseline Design Kit makes it easy to preview a custom color palette in the Material Design system.

Figma & design thinking: Building a design system for an existing product

Tammy Taabassum created a design system in Figma for an existing product following the design thinking process. She started by assessing the situation (Discovery), set goals (Define), and only then built components and unified colors.

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

Fun with Rotational Symmetry

Miguel Cardona shows how to use components and instances to create some cool illustrative effects.

An easier way to manage tabular data

A smart combination of using components and Auto Layout.

“Figma isn’t for illustrati…”

Fun Twitter thread by Rogie with fantastic examples of illustrations made in Figma.

Interface Design PRO-TIPS inside Figma

MDS designs a quick concept of the would-be iOS app inside of Figma.

Resources

Keyboard Stickers with Figma Shortcuts

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

Contrast

A new app reimagining developer handoff from Figma.

A vector stroke marker pack for Figma

Cool-looking collection of vector strokes.

Plugins

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.

A11y – Focus Orderer

A new plugin from Microsoft to help you quickly annotate focus and tab order flow for keyboard and screen reader users.

Backstage

Rasmus Andersson on Figma

Rasmus joined Figma in 2016 as a Lead Designer and one of the early employees. He just left the company, and in this post looks back at what he worked on over the years.

Figma’s new EMEA HQ

Dylan Field: ​”Today, I’m excited to announce that Figma is opening a hub office in London, which will serve as our HQ for the EMEA region.”

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

a16z Podcast: The Question of Education

Dylan Field talking to Marc Andreessen about the modern education system. The Q&A was recorded in August 2020 and originally appeared in Figma’s ​“Back to School?” interview series.

Let’s Sign Up for Figma!

UserOnboard goes through an onboarding experience of Figma.

Features

Topics

Design Tools

Figmalion

Issues:
193
Links:
3,553