Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #22

September 7, 2020

Are you ready for Config Europe? It’s happening next Thursday, and I can’t wait to see if new features will be announced in the opening keynote. Now may be a good moment to review features announced on the first Config earlier this year. The Figma team shipped a lot since then, but it seems like something happened to the Font Picker redesign along the way!

If you haven’t registered yet, there is still time until September 10th. (I assume the video recordings will be shared later.)

— Eugene

App Updates

🚀 A new experience for Figma Organization admins

Figma redesigned admin settings for Figma Organizations. To introduce the changes, they recorded the whole playlist of demo videos.

What’s New

📄 Figma Community: the Github for designers

“An appreciation piece on how well-modeled the Figma Community feature is and how it can possibly change the way the world designs digitally.”

📄 The Case Against Figma

A former designer at Lyft makes the case against using Figma in a large organization. Because Abstract uses a real Git repository to store Sketch files, it’s “allowing for a structured approach to file organization at a micro and macro level.” I’m not familiar with permissions on an Organization plan, but that sounds like a nightmare: “…imagine you have thousands of business-critical files shared by 250 designers all of which are editable by the whole team by default!”

📄 Writing my first Figma plugin as a designer

Lennon Cheng shares his experience of creating Figma plugins to improve and automate the design process. He is a designer without much development experience, and this makes his take especially interesting.

📄 Creating a document finder plugin for Figma

Jason Jun shares the whole process of building a plugin, from the idea, to developing a data structure, interface design, and writing code. “The process of repeatedly finding relevant documents while using design tools can be cumbersome. This gap between the documentation and design tool seemed to be very suitable for a plugin to fill.”

📄 React Figma Plugin – How to get data from the canvas to your app

“I struggled with the Figma Plugin examples to understand how to access data from the canvas and into my app. The Figma Plugin examples have a React application sample which sends data to the canvas, but not the other way around. While this is seemingly straight forward, I didn’t immediately absorb the explanations from Figma Plugin website. In retrospect, the way to do this is quite simple.”

📄 Creating multi-brand design systems

The team members from Shopify, Condé Nast, and Harry’s shared their experiences creating multi-brand design systems in a livestream a few months ago. This post shares some of the highlights from it.

Using Figma

📄 Everything Developers Need To Know About Figma

A solid guide to Figma for developers from Smashing Magazine. It’s focused on navigating the app, measuring dimensions, exploring styles, exporting assets, getting CSS from the Code panel, and other parts of the developer handoff.

📄 Making Design Within Reach for online shoppers

A branding and digital agency BASIC worked with Herman Miller on redesigning a Design Within Reach (DWR) website to replicate the experience shoppers might have in a showroom. They used Figma prototypes for usability testing and took the redesign as an opportunity to create the first design system for all of Herman Miller brands.

🐦 Use shiki-svg-renderer to render code to SVG

A smart way to export code with syntax highlighting to Figma.

🐦 Combine Layout Grids with Constraints

Joey Banks shows a nice use case for combining Layout Grids with Constraints. For a deeper dive, check out my older article on this feature.

🐦 Organizing design files

A Twitter thread on organizing design files in Figma. The approach includes adding a mini doc and a thumbnail, annotating elements and edge cases, grouping components, marking Work in Progress, and organizing pages.

🐦 Demo of Vector Networks

Miguel Cardona shows how cool and powerful Vector Networks are. The vector editing toolset in Figma is unique and worth getting familiar with.

🐦 A compilation of Figma tips

Pablo Stanley from Blush has been making Instagram Reels with Figma tips and shares a compilation of them in this short video.

Tim Tries: Figma, Zeplin and Storybook

Tim Benniks looks at how Figma, Zeplin, VS Code, and Storybook can work together to provide a much better experience for developers.

Building a Data Visualization UI Kit in Figma

Alex from the Headway team explains how to build a simple data visualization kit in Figma. He also discusses the pros and cons of building a library vs. using a plugin for this kind of work.

Community Spotlight: Design Starter Kits

Three Figma community resources to get you started on your next web, iOS, or Android design project. Hope Community Spotlight will become regular series!

Office Hours: Complex Component Architecture

Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms, and other forms of complex components.

Build it in Figma: Create a Design System IV — Testing

Testing a design system to see if the component library is robust enough in real-world scenarios.

Build it in Figma: Create a Design System V — Documentation

Rogie shows the best practices for documenting your design system using Figma and other tools.

Resources

💰 Shape 2

A gorgeous library of fully customizable icons and illustrations from Meng To. Includes a custom app that lets you change style, stroke width, and size of the assets.

🌎 Avocode Write

Avocode Write is a tool for copywriters, UX writers, and content editors to seamlessly collaborate with designers and design teams.

🌎 Shipwright UI Kit

Headway published a good-looking design system built in Figma with over a thousand components, 96 icons, and 58 templates.

🌎 Material Theming + Android 10

A comprehensive UI Kit containing Material Components and Android 10 system components is designed to be the most faithful recreation of the MDC library for Android.

🌎 User Research Resources

A toolbox of user research resources from Figma to help you visualize and organize the insights you gain from your research.

🌎 Virtual Figbooks

“Virtual Figbooks is for everyone who is looking for a title to read or would like to contribute by adding titles and help out the amazing community of figmates.”

Plugins

Gifmock

Gifmock Create high-quality GIFs from static images and mockups. Make sure to check out a fun demo.

Workshops

Workshops Easily facilitate collaborative design sessions directly in Figma.

Color Name

Color Name Ever wondered what’s the best name for that specific shade of the color? This plugin lets you select any node with a solid fill and see the closest color’s name.

Backstage

📄 Inside Figma: enterprise, explained

Engineer Aashima Garg shares an inside look at Figma’s enterprise team and their work, spotlighting a recent project to improve the Organization admin experience.

Book “Designing in Figma”Designing in FigmaNew book

Archive