Auto Layout. 2019 Design Tools Survey. The State of UX.
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
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
Sync content from Google Sheets directly into your Figma file. Great for filling mockups with realistic data.
Edit in Place
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
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.”