Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #33

February 15, 2021

Hello! 👋 Are you staying warm? We’ve been hit with a few snowstorms in the last weeks, so it’s a good time to get cozy and go through a reading backlog. This is one of the most densely packed and interesting issues I’ve sent in a while – hope you’ll enjoy it!

Figma announced the first Config of this year on April 21st, 2021. I can’t wait to hear their announcements! Netflix unveiled Hawkins, their design system used across 80+ applications. REI built a text input component with whopping 3,360 variants, while Uber programmatically created 256 components for map markers. In contrast to these two articles, Johan Ronsse makes an argument against overusing complex Figma features. Shopify shows how to set up your Figma projects to meet the needs of the whole team. And there are so many tips and tricks that I had to create a new section for them!

— Eugene

What’s New

🎉 Config 2021

Config is back on April 21st, 2021! The call for speakers is open through February 21st.

🗂 New admin experience on Figma’s Professional plan

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

✌️ Embed live Figma files in WordPress P2

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

🐦 What is one thing you wish Figma did and didn’t do?

Replies to this tweet by Sho Kuwamoto, Figma’s Director of Product, provide an interesting peek into the current state of things and what their team might work on next.

🎧 How Figma’s Principal UX Writer is helping build design software that UX writers love

Chris Baty is the Principal UX Writer at Figma and was previously the head of UX writing at Dropbox. He’s also the founder of NaNoWriMo (National Novel Writing Month). In this podcast, he talks about joining Figma, the work he’s doing there to make Figma an exceptional tool for UX writers and content designers, and what it’s like working as a team of one.

Using Figma

📄 Hawkins: Diving into the Reasoning Behind our Design System

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

📄 One Figma Component — 3,360 Variants

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

📄 How I programmatically built 256 new design system components in Figma

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

📄 Avoiding Figma file complexity

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.

📄 A template for Figma wayfinding

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.

📄 How to turn your Figma designs into responsive prototypes

Creating responsive prototypes with Figma and Anima.

📄 Tackling Figma Auto Layout: A 6-Step Guide

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

📄 The Great Collaboration

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

🐦 How do you create just a dot?

Steve Schoger looks for the best way to create a dot that responds to the stroke width. There are some creative solutions in the replies, but making a rectangle with width and height set to 0.001 is the best one.

🐦 How to make a “Question Mark” icon

In this follow-up to a previous question, Steve Schoger shows his process for building one of the icons in Heroicons set.

Coffee with Charli: Jumpstart your design system

“In this episode, Charli talks with her colleague Alf Salib, product design lead at ConvertKit. Together they dig into what it takes to implement a design system with a small team and get real about the challenges and lessons learned along the way.”

Coffee with Charli: The 80/20 rule

“In this episode, Charli talks sits down with Ashley Seto, lead product designer lead at Pinterest. Together they dig into what it takes to govern a design system and the systems and process in place that can help get everyone on board.”

Figma tutorial: Card component with auto layout

“Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you more advanced Auto Layout techniques to create a flexible card component for a trip planning website.”

In the File: Developer and designer, working together to build design systems

“Design systems sit at the intersection of design and development. Lyft teammates Jeremy Dizon, Design Systems Product Designer, and Alex Lockwood, Design Systems Staff Engineer, will show off their design system and share how they collaborated to build it.”

Tips & Tricks

🌎 Using stroke dash for pixel-perfect intervals

Really smart solution! “This trick uses the dash/gap length to calculate exact degree marks. This lightweight approach makes it easy to store all of the information for interval marks in a single stroke.”

🐦 Use a 1×1 frame to add overlapping elements

A nice trick to work around some of Auto Layout’s limitations.

🐦 Hide left sidebar

Command-\ hides all UI, while Command-Shift-\ hides only the left sidebar.

🐦 List of objects beneath your cursor

A good tip from Miguel – Command-Click on an object to show a list of all layers below.

Figma in 5: Design Systems: Components

In this part of Figma in 5, Rogie talks about Design Systems with a focus on components.

Figma tips: Adding a contents page to your prototypes

Design Advocate Luis shows how to set up a contents page to navigate through multiple flows.

Figma tips: Navigating Frames and Pages in Figma Design

“Quickly master your documents pages and frames using simple shortcut keyboard actions.”

Figma tips: Batch Import Workflow

“Here is a quick workflow with multiple batch operations that can show you how to import, rename, organize, componentize and publish assets.”

Figma tips: Scroll to map interactions

“Make scroll to map interactions in Figma Design. This demo uses placeholder frames in lieu of using the offset values for navigating a map with scroll to interactions.”

Office Hours: Tips and tricks from the teams that build Figma

“We brought ten Figmates together to share their tips and tricks with you. We dove into features, covered getting started in Figma, plugins, and speed tips. You’ll hear from engineers, designers, designer advocates, product managers, and researchers.”

Made in Figma

🖼 New illustration by Martin Bekerman

The lighting and reflections here are mind-blowing. Don’t miss the outline in replies.

🖼 Last of Us 4

And another fantastic illustration made completely in Figma by Martin Bekerman.

🐦 Visualizing lunchboxes

A creative way of using components to create custom graphics.

🐦 3D illustrations

Timo Lins makes impressive 3D illustrations with Figma components.

Resources

🌎 Font Awesome icons

Both Regular and Brand icon sets available as ready-to-use components.

🌎 Free Emoji Pack by Paca

Well-crafted pack with more than 1,700 emojis, which are nicely structured and easy-to-use.

🌎 FigmaStats

Figma plugin analytics page.

Plugins

Emailify HTML Email Builder

Emailify HTML Email Builder A new plugin by Figmatic. Design and export responsive, production-ready HTML emails from Figma. No coding is required, but it supports developer-friendly MJML exports.

Export Presets

Export Presets Create and automatically apply custom Export Settings. Share them across your files and projects. Includes default presets for the most popular platforms.

Book “Designing in Figma”Designing in FigmaNew book

Archive