Figmalion – A regular newsletter about Figma

In this issue, we’ll look at public projects from Figma Maker Week, talk about remote design as a new reality for many teams, learn how other designers and developers use Figma, and how design systems are organized in large teams. There is also an unusually large number of products built for Figma — iPadOS and Linux clients, a collaborative workspace for planning work, and plugin for creating and customizing illustrations. Enjoy!

— Eugene

P.S. Thank you to everyone who showed interest in my upcoming book “Designing in Figma”! After writing this newsletter for six months, I thought I know the app pretty well, but I keep discovering new features and tricks as I work on the book. Makes me appreciate a fantastic tool we have in our hands even more!

App Updates

📄 Bringing Live Figma Embeds to Your Team’s Favorite Tools

Now it’s possible to embed private Figma files into the tools used by the whole team, like Dropbox Paper, Notion, Coda, Jira, etc.

Maker Week at Figma

⏯ Figma In Quarantine: The Musical

Twice yearly Figma holds a Maker Week, where the team gets the chance to work on whatever project they want. This epic musical takes the cake this time!

🐦 Been missing the beautiful Figma office so much that I’ve painted it

Beautiful paintings by a software engineer at Figma.

🐦 I drew pictures of our office! Here’s a digital tour

And another set of beautiful artworks! What a talented team they have.

🐦 Monument Valley level recreation with components and Auto-Layout

The link to a community project is in the replies.

🐦 A time-lapse visualization of the main internal Figma code repository

Impressive demo by Thomas Wright.

Web Cards Plugin

Noah Levin built his first plugin for turning URLs into little cards. Great for organizing shopping inspiration and visually including relevant links to the project. Now waiting for their API to support links.

Using Figma

⏯ Meng To’s UI Design Livestreams

Lots to learn from the founder of Design+Code.

⏯ Introduction to Figma for Developers

Jason Lengstorf and his guest Ryan Warner give a feature tour and teach the fundamentals of Figma to developers.

⏯ Build an Adaptive Button with Figma Auto Layout

Ryan Warner once again, this time at Egghead: “By adding auto-layout to our button component, we can change the text within the button while automatically maintaining consistent horizontal and vertical padding, just like we would in code.”

⏯ Build It in Figma: Designing a Book App for Designers

Rogie designs an app for discovering useful books for leveling up as a designer. In the first part of this 3 part series, he wireframes the ideas for the app. In Part 2, he works on visual design explorations.

📄 For Those 10 Companies Figma Was a Starting Point to New Heights

“How design tool played a decisive role for businesses such as Microsoft, Uber and 8 more well-known companies.”

🐦 Thoughts on Figma UI and UX

Alex from Doist shared his feelings about trying Figma, and Rafa from Netlify pointed to some specific problems in its interface. My favorite part — Koen Bok from Framer showed up in replies to remind how much Sketch team raised the bar for the design tools.

Tips and Tricks

🐦 Copy-pasting SVGs in Figma is a breeze

One of my favorite time-savers!

🐦 Open Figma file URL from clipboard

I’ll piggy-back on this advice and suggest always opening Figma links in the app by setting the preference.

🐦 Wondering how many frames or instances you’ve created?

That’s a really smart workaround to gather stats!

Design Systems

⏯ In the File: Creating Multi-Brand Design Systems

Designers from Shopify, Condé Nast, and Harry’s share their experiences with creating and maintaining a design system across multiple brands.

🐦 Buzz Usborne: How we organize Help Scout design system

“Basically everything is centered around parity with React and proving designers/UI engineers with enough flexibility to use, extend and remix without detaching.”

Design Process

📄 How to Pair Design (and Convince Your Boss to Invest in It)

Nina Mehta from Mailchimp discusses what design pairing is, how to structure it, and tips for convincing your boss that it’s a good idea. This is a recap from a livestream featured in Issue #13.

Working Remotely

📄 Finding Design Inspiration at Home

“Knowing that we could all use a little dose of imagination, we asked members of the Figma design team to share the places they turn to for inspiration. Here, you’ll find their tips: making stickers, the power of social media, and how your camera roll can get you out of a rut.”

📄 Designing a Workflow for the New Normal

Christine Lancaster thinks Figma is the right fit for designing in the challenging times of 2020. “Down with design elitism and preciousness. Let’s include the copy writers, the dev team, the client, the PMs, the whole shebang in our design process. Better collaboration means we end up building the right things for the right people.”

⏯ 5 Resources to Help You Bring Your Remote Team Together

Designer Advocates Joey Banks and Rogie King share resources they’ve found that help make remote work feel less remote.

Products

Figurative

Figurative brings the desktop-class editor experience from Figma to iPadOS. Compatible Magic Keyboard, Trackpad, or even Mouse.

Pixelic

Pixelic is a collaborative workspace for Figma users to sync Figma pages, manage frame-level versions, exchange feedback, and manage design tasks in one place. Post ”When Figma isn’t enough for product teams” shares their vision on how a “third workplace” for Figma users could help designers save time and work better. Looks really promising.

FigPickle

Automatic daily backup of high-resolution images from Figma (.fig is not supported by the API yet). I thought that there could be a place for a 3rd-party tool like this when Cameron Moll couldn’t locate his Figma files.

Figma Linux

Unofficial desktop application for Linux made with Electron.

Plugins

Blush

The biggest new release: “Create and customize illustrations in your designs with Blush. Just choose a collection, pick a composition, and place it on the canvas. You can keep playing with the variations in the illustration to create something unique that fits your brand.”