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!
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.
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.
Now you can edit flow and frame names directly from the canvas. Just double-click the name and start typing.
A few minor improvements to working with components and instances.
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.
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.
The team at Blush recommends 11 of their favorite plugins for improving a workflow.
Great explanation of the differences between groups and frames in Figma.
Creating variants based on a master component makes it much easier to maintain multiple states.
“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.”
A special guest in a new video by Figma:55.
Figma:55 shows how to use a handy plugin by Pavel Laptev.
Gleb Sabirzyanov shows an easy way to create tiled patterns in Figma.
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.
A few of his favorites to move a bit more quickly while working.
Luis shows a few ways to crop images.
Ridd shares an idea of what a collaborative magazine made by a Figma community can look like.
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.
“Everyone is talking about the new Microsoft emojis and redesign. Here are high quality Microsoft emojis in all their 3D glory!”
“Windows 11 mockup is containing different frames created to give you the all-new Windows 11 feel.”
“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 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.”
“A library of high-quality illustrations made in Procreate, with peppy personalities, free to use in your projects.”
A chart kit with 15 different designs to use in your mockups.
Made in Figma
Vijay is a true Figma wizard. Look at his process on Twitter.
This one is from a few weeks ago, but another fantastic artwork by Vijay Verma.
Two Lokis is better than one! A different style but really cool artwork as well.
Joey Lamelas with a cool photo-realistic artwork. See the process on Twitter.
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.
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 plugin by Gleb Sabirzyanov allows you to copy any object along the path.
Previously, Damien was a Creative Lead at Material Design and Google Nest.
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.
Alek Mackie, a Senior Illustrator at Shopify, shares how he stays creative and productive.
“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.”