Move & swap components, designing icons, and community podcasts
Hello đź‘‹ Figmalion is back to its regular biweekly schedule after a short summer break.
While August is usually the quietest time of the year, the last three weeks have been quite busy for the Figma community. First, a long-awaited feature was released — now you can move published components between files without breaking their connection! In addition, Figma shipped a few improvements to libraries and components. Font Awesome (which is shipped with Figma by default) switched their entire icon design process to Figma. Smashing Magazine published a guide on useful plugins. A few members of the Figma community were guests on the podcasts — check out conversations with Miggi and Gleb. Lastly, there are a few great tips on using components and organizing design systems. Enjoy the issue!
— Eugene
App Updates
Design systems updates to help speed up your workflow
It’s finally possible to move published components between files without breaking links to instances in the design system! Besides that, now you can swap out an entire library in a single bulk action and find the right component in a quick search modal. Fantastic update that I’m really excited about. See a backstory by Sho Kuwamoto on how they were built.
Swap style and component libraries
Demo of how the new Swap Library feature works. Great for migrating to a new version of the design system or toggling between light and dark modes.
Quick component insert
Anthony DiSpezio shows the new component insert menu opened by a Shift+i shortcut.
Plugin parameters
Plugin parameters (currently in beta) provide a faster way to build more powerful plugins by using quick actions to accept user input, eliminating the need to create your own UI. Both plugins I built in the past don’t have any UI, so this would be a great way to easily add some configuration options.
You can now use Figma to create custom SF Symbols
“For historical reasons, Figma used to convert between spaces and hyphens when dealing with SVG files. This made it hard to export icons from Figma to SF Symbols, so we fixed it.”
What’s New
Figma Society
What started as a Twitter thread with the following suggestions resulted in a list of Figma experts who post educational and useful Figma-related content. Check it out and subscribe!
You’re rewarded for risks you take
Designer Advocate Miguel Angel Cardona is a guest at the Latinxs Who Design podcast. He talks about his background and path to design. Before joining Figma, Miguel was a tenure track professor in the New Media Design program at The Rochester Institute of Technology teaching user interface and product design, and before that, the first designer at imgix.
Gleb Sabirzyanov on Open Design and the Figma Plugin Ecosystem
Gleb Sabirzyanov is a guest at Sustain Open Source Design podcast. You may know Gleb from his popular Figma plugins (Master and Blend) and countless community contributions. In this episode, he talks about the plugins he built, a project he started working on called Pink Turtles, and where he sees the future of Figma evolving in the next couple of years.
The Beauty of BĂ©zier Curves
A beautiful deep dive into BĂ©zier Curves, explaining how they work and showing math behind them.
Using Figma
10 Reasons We Switched to Figma For Icon Design
Jory Raphael is a lead designer at Font Awesome, maker of the popular icon set. They recently switched to Figma to design and manage their icons, and here he shares ten reasons behind this decision. Lots of nitty-gritty vector editing details!
Ultimate Guide to Using Icons in Figma
Molly Hellmuth wrote a guide on everything you need to know about setting up icons, using icons in designs, and handing off icons for development in Figma. See also her top 10 tips from this guide on Twitter.
Useful Figma Plugins And Tools
Smashing Magazine’s new guide to useful Figma plugins, from color management and image assets to SVG shapes and animation.
How to build a Figma Plugin
Speaking of plugins, in this 3‑part blog series Clinton Halpin shows how he built one to automatically fill mockups with real data from his company’s API in a single click.
Navigating Quickly within Figma like a Pro — Part I
A few of the less known shortcuts and tips for effective use of Figma from Ansh Mehra.
Presenting responsive logos
Really cool way to use Figma and Breakpoints plugin to show logo adapts to different spaces.
Illustrating with components
A cute illustration built from components.
Reducing memory usage and file bloat in Figma
Great advice on improving Figma’s performance from Ana Boyer.
Stuff I wish I knew in Figma when I started
Rogie asks for great tips, and the community delivers in replies.
Use an IconWrapper to nest icons in your components
A smart way to resize icons without having to detach components, hide layers, or add variants.
Behind-the-scenes look at building a design system
Ridd shows his process for creating responsive and customizable templates.
File structure best practice guide
Luis prepared a best practice guide on how to structure your frames in Figma.
How to Hack a Slider with Auto-Layout
Danny Sapio shows how to create sliders and loading indicators with Auto Layout.
Plugins
Chromatic Figma
Chromatic Figma lets you use other color spaces than RGB, such as Lab and Lch, to create good-looking and perceptually uniform gradients and color scales. Recently, I had to dive deep into color spaces and built my own tool while creating an accessible color palette at work, so it’s nice to find a plugin that can be used in less demanding situations.
Scale››better
With Scale››better, you can scale any number of items in your current selection by percentage, width, or height. That’s something I always missed!
Backstage
How Figma Became Design’s Hottest Startup, Valued At $10 Billion
Figma was featured in Forbes’ The Cloud 100 list. ​“As Google Docs did for word processing and GitHub for code, so Dylan Field’s Figma is doing for design. Employees at companies like Netflix, Airbnb, Zoom, and Discord are all users.”
Inside Figma: building a more collaborative design process
The product design team at Figma shares how they use FigJam, their online whiteboard, to be more generative as a team and with their cross-functional partners. Make sure to also check out the full livestream of the conversation and the community file with some of the components they use.
Inside Figma: securing internal web apps
“Over the last few months, the Figma security team has built out a system to securely provide access to internal applications using reusable cloud components and modern security technologies. We think this is a powerful pattern that can help teams across the industry protect their most sensitive internal apps. Here, Security Engineer Max Burkhardt is sharing a look at how we built the system, what we learned, and how this fits into our broader approach to security at Figma.”
A Q&A with Figma’s VP of Product
Figma’s VP of Product, Yuhki Yamashita, shares what it was like to build FigJam and how things have changed since then. In this post, he reflects on the evolving role of design and product management, what it means to welcome ​“non-designers” into the process, and the future of FigJam.
The Strategies Behind Figma’s $10 Billion Valuation with CCO Amanda Kleha
In this episode of the podcast Go to Market Grit, Amanda talks about her very successful run at Zendesk, her current work as Chief Customer Officer at Figma, and the importance of keeping the voice of the customer in focus during decision-making.