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).
Since The Last Time
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.
The article dives deeply into different methods of adding animations to designs in Figma — GIFs, Figmotion plugin, simple prototypes, and Smart Animate.
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.
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”.
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.
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.
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.
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.
Jesse Showalter walks through his approach to building a design system for his company.
If you’re designing a payment form using Stripe, this set of components can be useful.
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.
Sync content from Google Sheets directly into your Figma file. Great for filling mockups with realistic data.
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.
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
A new Figma components library with responsive mobile and desktop templates.
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
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.”