Issue #44 •

Multiple prototype flows, new Microsoft emoji, and two Lokis

Last week, Figma shipped several nifty updates, the most exciting of which is added support for multiple flows in prototypes. Presenting before/​after or alternative flows is much easier now!

Design community shared a lot of great tips recently – make sure to find time and go through them all! Microsoft released the new emojis, and they are beautiful – already available as a Community file, along with two other projects by their design team. If you’re into Marvel Universe, there are two incredible Loki artworks created in highly distinctive styles. If they inspire you to work on illustrations in Figma, Rogie King created a useful plugin for importing Procreate files straight to Figma, complete with layers, masks, and blend modes.

Enjoy the issue!

— Eugene

Promo

Book “Designing in Figma”

My practical guide to Figma, showing how to create layouts that will evolve over time, build design systems at scale, and stay organized and efficient in the process.

Learn more →

App Updates

Create multiple flows

Compare, test, and present multiple interactive ideas from a single page. Check out a couple of quick tips for using the new feature by Miguel Cardona.

Edit names on canvas

Now you can edit flow and frame names directly from the canvas. Just double-click the name and start typing.

Design system updates

A few minor improvements to working with components and instances.

Updates to quick create for faster diagramming in FigJam

Hover over the quick create icon on a shape or sticky to see a preview of what will be created, or drag it to add connectors between shapes. See a quick demo by Ana Boyer.

What’s New

An Introduction to Figma Interactive Components

In this Smashing Magazine article, Emiliano explains why Interactive Components (now in beta) will improve how we create prototypes. The new feature reduces the time and effort needed to create interactions by bringing down the cost of design exploration.

11 Figma Plugins to Supercharge Your Designs

The team at Blush recommends 11 of their favorite plugins for improving a workflow.

Why you should use Frames, not Groups, in Figma

Great explanation of the differences between groups and frames in Figma.

Use a master component when working with variants

Creating variants based on a master component makes it much easier to maintain multiple states.

5 Tips to Design Maintainable Inputs in Figma

“I build several design systems every year and have learned a lot about designing components that are easy to use and maintain. One of the most important ones being inputs. They deserve to be built with great care because of how important, frequently used, and complex they are.”

Randy Savage covers Procreate and Image Tracer plugins

A special guest in a new video by Figma:55.

JSON to Figma

Parse JSON files and populate any layers with text or images.

Make a pattern in Figma

Gleb Sabirzyanov shows an easy way to create tiled patterns in Figma.

Reminder: never use variants for different icons

Gleb is right – icons as variants can’t be previewed or searched. In fact, Figma doesn’t recommend using variants to group different icons either. If you have different sizes or versions of the same icon, then you could combine these as variants instead.

Joey Banks recommends Figma shortcuts

A few of his favorites to move a bit more quickly while working.

Cropping images

Luis shows a few ways to crop images.

Figma Community “magazine” concept

Ridd shares an idea of what a collaborative magazine made by a Figma community can look like.

Product design + rapid testing = better outcomes

Figma hosted the Maze team to discuss the best practices for all things user research, building a robust product process centered on insights, and how best to your Figma files for scale.

Resources

New Microsoft Emojis 2021

“Everyone is talking about the new Microsoft emojis and redesign. Here are high quality Microsoft emojis in all their 3D glory!”

Windows 11 Mockup by Presently

“Windows 11 mockup is containing different frames created to give you the all-new Windows 11 feel.”

Surface Duo Design Kit

“The Microsoft Surface Duo Design Kit includes safe areas, design patterns & guidelines, dual screen postures, and components for designing Dual Screen apps that users love.” (The last link about Microsoft for now, I promise!)

Browser Kit for Figma

“Browser Kit is a set of components for getting screenshots onto your Figma designs. Screenshots go from your browser directly into your design file, all thanks to the magic of Figma components.”

Abstract illustration Library

“A library of high-quality illustrations made in Procreate, with peppy personalities, free to use in your projects.”

Smart Charts Kit

A chart kit with 15 different designs to use in your mockups.

Made in Figma

Loki by Vijay Verma

Vijay is a true Figma wizard. Look at his process on Twitter.

Design potion

This one is from a few weeks ago, but another fantastic artwork by Vijay Verma.

Loki by Likith Mouli

Two Lokis is better than one! A different style but really cool artwork as well.

Toro y Moi Illustration

Joey Lamelas with a cool photo-realistic artwork. See the process on Twitter.

Plugins

Procreate Import

Rogie King built a plugin to import .procreate files into Figma, complete with named layers, groups, blend modes, and clipping masks. Make sure to check out a Twitter thread on his challenges during development.

Breakpoints

Preview responsive design layouts inside a Figma frame. It works even without the opened plugin window, and anyone on your team can resize frames without the plugin installed.

Blend

Blend plugin by Gleb Sabirzyanov allows you to copy any object along the path.

Backstage

Damien Correll joins Figma as a new Creative Director

Previously, Damien was a Creative Lead at Material Design and Google Nest.

Introducing Figma’s New York City hub

Now it’s official! Katie Szeto, a product manager and member of the New York City landing team, shares a bit about why Figma is growing in New York City, how they’re thinking about the hybrid work model, and what she’s excited about in the months ahead.

Keeping creativity flowing

Alek Mackie, a Senior Illustrator at Shopify, shares how he stays creative and productive.

Behind the plugin: Cards for Humanity

“Idean is a design consultancy that has recently joined frog, a global design and strategy consultancy and part of Capgemini Invent. Last year, they built Cards for Humanity, an online card game that helps teams design accessible, inclusive products. We interviewed them to learn more about how they built the Figma plugin, what they learned, and the power of inclusive design.”

Features

Topics

Design Tools

Figmalion

Issues:
161
Links:
3,056