Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #17

June 29, 2020

Welcome, new subscribers from Designer News and Sidebar! It’s great to see so many new people joining the newsletter and sharing it over the last couple of weeks. Thank you for subscribing!

We have lots to cover in this issue. Kevin Kwok wrote a popular post on “Why Figma Wins” from a VC perspective that I highly recommend reading. Apple held their Worldwide Developers Conference online for the first time and presented major visual updates to both macOS and iOS. Figma community already built kits for iOS 14 UI and Widgets, and jumped on a challenge to recreate Big Sur icons. The team at Evil Martians shared tips on using Auto Layout, while a few other teams shared their experience of switching to Figma and how it compares to other tools. Enjoy!

— Eugene

App Updates

📄 Improved vector measurements

“Hold the Option or Alt key while in Vector Edit mode to see precise measurements between points.” The team at Figma is on fire lately — there was at least one app update in every issue since March!

What’s New

📄 Why Figma Wins

That blog post made the rounds lately, and for a good reason. If you’re curious about a bigger picture of why Figma is so important, it’s a must-read. Also, see the discussion on HackerNews.

📄 Creating a collaborative classroom remotely with Figma

David Hoang is a Director of Design at Webflow and teaches UX Design at General Assembly. He provides an interesting look at how COVID-19 forced him to lean on Figma to be the core foundation of how they’d approach learning.

Apple WWDC, macOS Big Sur, and iOS 14

Apple Design Resources

Official design resources with all the new stuff announced at WWDC, including files for all platforms and in multiple formats, except for Figma. This is a big omission on Apple’s part, but luckily we have a thriving community that quickly rose to a challenge.

🌎 iOS 14 UI Kit for Figma

Joey Banks built this whole kit before some people even watched a keynote! Awesome work and incredibly useful for anyone designing for iOS.

🌎 Apple Widgets UI Kit

The team at Doist recreated the just announced Apple Widgets from iOS 14.

🌎 macOS Big Sur Icon Template

A template provides a foundation for designing your Big Sur app icon.

🐦 @flyosity: Can Big Sur icons be designed without Photoshop?

Mike Rundle brought a good point, but I liked the most how soon it became a friendly challenge, and lots of talented designers proved that it’s possible. See some examples of recreations below.

@mds: Creating the Siri Icon in Figma

See also his Figma file.

🐦 @skirano: Recreated the new FaceTime icon

See also his Figma file.

🐦 @niclasernst: Recreated the new Messages icon

See also his Figma file.

🐦 @rogie: Contacts icon and Find My icon

In case you missed some textures lately.

🐦 @Gavmn: Getting started on my Big Sur dock

Beautiful adaptations of popular apps icons for Big Sur.

Using Figma

📄 Figma Auto Layout: Practical tips for dynamic designs

The team at Evil Martians shares how designers and engineers can speak the same language by using dynamic components built with Auto Layout. The article presents multiple techniques with good animated examples.

Office Hours: Mastering Components

“Join Designer Advocates Joey and Rogie as they dive into components: see them leverage constraints, apply auto-layout, explore negative frame spacing, styles, and more.”

🐦 @joeyabanks: Go to figma.com/new to quickly create a new file

A small timesaver if you’re designing in the browser.

🐦 @rogie: Set opacity by pressing the number keys

Useful keyboard shortcut to keep in mind!

🐦 @pablostanley: Press Cmd+Y to change the view to outlines

“Especially useful when designing icons, illustrations, and when you just wanna select that layer that is below tons of other layers.”

🐦 @fionaosaurusrex: Who’s using Figma for specs, documentation, etc?

There are some great examples in replies. Make sure not to miss charts shared by Rasmus Andersson.

Build it in Figma: Designing a Book App: Prototyping and Demos

The 3rd and final part of Rogie’s series on designing a book app.

Design Process

📄 The power of pair design

Nine things that team at Si digital learned while collaborating on projects in Figma. “If it’s a small project, two can be a crowd for side by side designing. Bring in a large project with a ton of pages and a tight deadline, two becomes the only way to deliver.”

📄 How to get closer with your developer

A recap from a presentation that product designer Helena Jaramillo from Coda recently gave. “In my experience, knowing how and when to collaborate with others plays a large factor in a project’s success. Here’s a look at how I’ve worked to bring engineers into the design process as early as possible.”

Switch

📄 Transitioning our Design System from Sketch to Figma

What makes this switch story interesting is their previous setup with the design system source of truth in React components and automatic generation of Sketch symbols from them. While switching to Figma, they ended up manually recreating components, and that resulted in a higher quality comparing to auto-generated Sketch symbols.

📄 Figma vs. Adobe XD: How we picked our next design tool

While the title mentions only Adobe XD, I liked how they also tried Sketch for Teams and Framer X before settling on Figma. Their final scoresheet is very detailed and seems quite accurate.

📄 Migrating to Figma

After leading two migrations from Sketch, Abstract, and Zeplin to Figma in the past two years, Iougo Huan shares what he learned to help your team in the migration process.

📄 How to evaluate design tools

A framework for evaluating design tools from the team at Figma. “To find the right fit, it’s not just about reading countless articles and reviews to identify the ‘best in class‘ option. Rather, there are a number of considerations — team size, distribution, workflow — that should inform the decision.”

⚙️ Convert Figma to Sketch files in one click

No idea who needs this, but worth bookmarking just in case.

Plugins

Pencil Pal

Pencil Pal Plugin to get a little more out of the pencil tool. Seems like an essential tool for people using Figurative app on an iPad Pro — see an impressive demo from Pablo Stanley.

🐦 @hyumankind: What are some of your current favorite plugins?

Lots of great recommendations in the replies.

Design Systems

🌎 G Suite Add Ons UI Design Kit

Design & Documentation kit of Card framework components used for building G Suite Add Ons.

🌎 Salesforce

Salesforce published multiple parts of their Lighting Design System.

🌎 GitHub Primer

Can’t imaging a better place for GitHub to share their design system.

Community

🌎 CSS.gg

The project provides 700+ open-source vector icons in multiple formats. Make sure to check out their website as well.

🌎 Figma Charts Infographics UI kit

“Figma charts library made of components. Contains most common data visualization patterns from simple bar charts to complicated heatmaps and financial candlesticks.”

🌎 SpaceX Crew Dragon Flight Control UI

Beautiful recreation by Rahul Chakraborty. Also on this topic, see the article ”How I recreated the SpaceX dashboard UI” by Ulises Siriczman.

🌎 Chess With Friends

It’s a simple design, but the idea is brilliant.

Archive

Book “Designing in Figma”Designing in FigmaComing this summer