Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #3

December 9, 2019

I expected this issue to be very light because of Thanksgiving, but was I wrong! Figma shipped a big update last Thursday that gives all of its users something to be thankful for. Auto Layout is the main news, but in this issue of Figmalion we’ll also cover different ways to create animations, end-of-year surveys and reports, building and moving design systems, and a bunch of plugins (including one by me).

Eugene

Since The Last Time

Design more, resize less, with Auto Layout

It’s finally here! 🙌 The biggest news of the last week is a long-awaited release of Auto Layout. When adding it to a frame, the items inside are stacked next to each other vertically or horizontally. The frame’s size is then determined by the total size of the items within it. This is a game-changer for working with components. Make sure to also check out a video tutorial.

Figma: 5 ways to add animation to your designs

The article dives deeply into different methods of adding animations to designs in Figma — GIFs, Figmotion plugin, simple prototypes, and Smart Animate.

The State of UX in 2020

Figma is called “Tool of the Year” by this report. It’s not specifically about Figma but highlights some important trends in our industry related to it, like the death of design files and baked-in collaboration.

2019 Design Tools Survey

Over 3,000 designers participated in this survey. While Sketch is still a leading tool for user flows, wireframing, UI design, prototyping, and design systems, Figma showed consistent growth in every category and was called “The most exciting tool of 2020”.

Don’t make the mistakes I did moving your design system from Sketch to Figma

Zandre Coetzer shares 6 pieces of advice on moving design system to Figma — start building from scratch, don’t try to replicate your old system in Sketch, use both global and local components, highlight updated components, use plugins, and do it as a team.

How we’re using Figma as a CMS for Mixkit Art

Mixkit Art found a creative way to use Figma as a CMS for illustrations. Their team manually prepares uploaded illustrations for multiple formats, and when they are ready to be published runs a Lambda script that connects to the Figma API, exports high-resolution assets, uploads them to S3, and makes them live on a website.

How to integrate your favorite design tools with Storybook

Storybook is an open-source tool for developing UI components in isolation for React, Vue, and Angular. This article explores some of the Storybook addons for design. The Figma addon depicts the component design next to the implementation. Design changes will automatically be reflected in Storybook.

Videos

The Mandalorian Promo Site Figma Smart Animate

Nerdfox — whose motion design work was featured in the last issue — builds concept design for The Mandalorian promo website and animates it using Smart Animate.

Build a Design System in Figma

Jesse Showalter walks through his approach to building a design system for his company.

Community Projects

Stripe Elements

If you’re designing a payment form using Stripe, this set of components can be useful.

Plugins

Proper Title Case

Proper Title Case icon My first plugin for Figma just got released! Proper Title Case formats headlines and titles based on style guides from APA, The Chicago Manual of Style, and modern conventions. I realized that I need this while working on a landing page with a bunch of misformatted titles and seeing that the built-in Title Case was too primitive.

Google Sheets Sync

Google Sheets Sync icon Sync content from Google Sheets directly into your Figma file. Great for filling mockups with realistic data.

Edit in Place

Edit in Place icon This plugin enables you to select any instance of a local component (not from a library) and edit the master component in place from the context of wherever you are using the instance. Handy if your master components are on another page.

Snap to Grid

Snap to Grid icon Plugin for effortlessly arranging elements on the grid. When the plugin works, the canvas elements will snap to the grid when moving/scaling.

Useful Products and Services

💰 Neolex

A new Figma components library with responsive mobile and desktop templates.

💰 Ant Design System for Figma

The largest UI Kit with over 2,100 hand-crafted components built from scratch for Figma based on the popular React UI library.

From the Headquarters

Lynn Vojvodich Joins Figma’s Board of Directors

Figma announced the appointment of Lynn Vojvodich as the newest independent member of the company’s Board of Directors. “Ms. Vojvodich is an experienced leader who has built, grown and transformed businesses for more than 20 years. She served as Executive Vice President and Chief Marketing Officer for Salesforce.com and was a partner at Andreessen Horowitz where she helped portfolio companies accelerate their go-to-market strategies.”

Archive