Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #29

December 14, 2020

Figma celebrated five years since its public launch! Before that, a small team been working on it for over three years. Dylan Field wrote an excellent essay, “Meet us in the browser”, on their choice of the platform, the initial negative reactions, and a cultural change it delivered. Figma also ran its biannual Maker Week, and while the event is internal, I collected a few publicly shared projects and experiments.

I’m taking some time off during the holidays, so the next issue will be sent on January 4th, 2021. Happy holidays! 🎄

— Eugene

P.S. Readwise is one of my new favorite apps, and they’re currently looking for a Principal Product Designer. Passion for Figma is one of the requirements! They didn’t pay me to share this, but as a user I have skin in the game and want them to find someone great 😎

App Updates

👀 See what you’re typing

Text color now defaults to white when typed on a dark canvas.

🍝 New prototype action: Scroll to

Scroll to selected objects or layers within the same top-level frame.

🌎 Figma Scroll to Playground

Use scroll interactions to create fast navigation of your designs. This playground will walk you through everything you need to know to help users explore landing pages, carousels, and more.

Figma Tutorial: Horizontal & Vertical Scrolling

Sebastiaan Schillebeeckx quickly recorded a tutorial on using Scroll To in prototyping. BTW, great choice of the book on his desk! 😉

🐦 Using ScrollTo Interactions to traverse spaces

As soon as Figma releases something new, Miguel Cardona comes up with a great use case.

Using Figma

📄 How to make tables in Figma 2020 — finally well (AutoLayout 3.0 update)

Using the power of AutoLayout 3 to build a table with reorderable and resizable columns and rows.

📄 The only Figma plugins you need for your workflow

A comprehensive list of Figma plugins for an overall design process.

📄 Our Favorite Figma Plugins

A few plugin recommendations for working with content and data from the team at Simple Thread.

Creating and Using Variants in Figma

A new video by MDS.

Figma’s Auto Layout

Pablo Stanley released the first chapter of his Figma Crash course with five videos on Auto Layout.

Figma in 5: Auto Layout

A new video in Rogie’s short video series.

Figma For Beginners

New introductory videos from Figma, with four parts focused on exploring ideas, creating designs, building prototypes, and preparing files for handoff.

🐦 Hiding only Layers panel

Miguel Cardona with a good tip: use Cmd-Shift-\ to hide the Layers panel, and Cmd-\ to hide both panels when sharing a screen.

🐦 Animate Angular gradient strokes

And another tip from Miguel for making simple animated spinners.

🐦 Change Starting Frame in a prototype

Nifty little time-saver.

🐦 Change text block to Auto Width

It’s not clear from the video, but all it takes is a double-click anywhere on a text frame.

🐦 Hack to create a zero width/height frame

A smart hack that can be useful with Auto Layout. (In the last issue, I included a different solution.)

Community

🌎 Dark Figma

I haven’t tried it myself, but know that many people desperately want it. It’s a side project made by Giel, so the app is different from the official client.

🐦 Noir illustration No 1

Martin Bekerman shows a mind-blowing illustration made 100% in Figma. Here is a community file.

🐦 Noir Illustration No 2

Look at the process of creating this artwork in the 2nd tweet! Also, check out this poster reusing both illustrations.

🌎 Synth Circuitry

Justin Mezzell with a complex circuity illustration with lots of neon glow.

🌎 The Child / Baby Yoda

Another incredible illustration by Joey Lamelas.

🌎 Cup Icon

What a fun application of Variants!

🌎 3D shapes

This Community template by Vic includes 9 different 3D shapes, each in 10 color variations, that could be used in your designs.

🌎 FontBot

FontBot automatically generates your very own font from a single shape, line, or object.

🌎 Holiday Cards

Beautiful holiday-themed cards made in Figma.

Plugins

Chikin Icons For Everything

Chikin Icons For Everything Bureau Gorbunov is one of my all-time favorite design companies. Its designer Sergey Chikin has been drawing a new icon every day for over three years, and now this set is available as a plugin. 266 icons are completely free, and the commercial license includes over 1,200 icons.

Maker Week

🐦 Four competing “houses”

Dylan Field introduces four “houses” on Day 1 of Figma’s biannual Maker Week.

🧵 Making a house mascot

Seems like the Haus of Jorts has won this competition!

🌎 One Hundred Patterns

Toni Gemayel runs an open design experiment to collaboratively create 100 patterns.

🐦 Variants Pal plugin concept

Alex built a plugin concept to automatically generate missing variants and add labels.

🐦 Gameboy emulator

Sawyer Hood made a plugin that runs a Gameboy emulator inside of Figma and renders the output as vectors to the canvas. Not available in the community yet, but the source is already on GitHub.

🌎 Play Asteroids in Figma

Another Maker Week project — a plugin to play Asteroids with friends.

🐦 Virtual Office

A fun team exercise to express themselves.

Backstage

📄 Meet us in the browser

Great essay by Dylan Field on their decision to build Figma in the browser. "Initially I didn’t understand the negative reactions to Figma’s closed beta launch. I only saw the obvious benefits: a single source of truth for files, cross platform support, and multiplayer editing. Now I understand that the power of the browser lies in the broader cultural change it delivers — and this change can be scary. The browser is natively multiplayer. It forces a mindset shift on access. It strips away the need for expensive hardware. And it pushes us to embrace working together, especially when we are blocked and our default might be to hide.”

📄 Adding it all up: the math behind designing your career

In this guest post Kylie Poppen, Design Lead at Google, shares a framework for thinking about the 90,000 hours that make up your career — whether you’re looking for a new role, hiring for your team, or just evaluating your next step.

Book “Designing in Figma”Designing in FigmaNew book

Archive