Features

Design system updates

A few minor improvements to working with components and instances.

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.”

Issue #44
Jul 18, 2021
#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.

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.

Issue #44
Jul 18, 2021
#Prototyping
#Maze

Cropping images

Luis shows a few ways to crop images.

Happy Monday folks, here are a few ways to crop images easier in @figmadesign:

• Double click whilst holding Option (Mac) / Alt (Windows)
• Hold CMD (Mac) / Control (Windows) and drag the handles
• Use shapes and boolean operations

Happy croppin' ✂️ pic.twitter.com/Pex2IcerVF
— luis. (@disco_lu) July 12, 2021

Joey Banks recommends Figma shortcuts

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

A few @figmadesign keyboard shortcuts ⌨️✨ that help me move a bit more quickly while working:

⇧A: Add Auto Layout (⌥⇧A to remove)
⌥L: Collapse layers
⇧⏎: Select parent (⏎ to select children)
⌥W/A/S/D: Align top/left/bottom/right
⌘K: Create link from text
— Joey Banks (@joeyabanks) July 12, 2021

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.

PSA reminder: never use variants for different icons in @figmadesign!

Use regular separate components to:
- Preview icons when swapping instances
- Search via name and icon description (bonus tip: add synonyms for easier search)#FigmaTip pic.twitter.com/4oGqs2GxIb
— Gleb Sabirzyanov (@gleb_sexy) July 7, 2021

Randy Savage covers Procreate and Image Tracer plugins

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

Figma in 55 Seconds: Procreate Import and Image

Issue #44
Jul 18, 2021
#Plugins
#Figma55

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.”

Use a master component when working with variants

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

11 Figma Plugins to Supercharge Your Designs

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

Issue #44
Jul 18, 2021
#Plugins

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.

Edit names on canvas

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

Today at @figmadesign we shipped a fix for one of my longest standing pet peeves about the product — now you can edit frame names directly on the canvas! Just double click and start typing.

Thank you to Linda Zhang for making this happen! pic.twitter.com/iUqTmvl5dw
— Dylan Field (@zoink) July 13, 2021

Building a menu with nested components

Ridd shows how to build a menu component from multiple nested components.

Building complex nested components is one of my favorite parts of working in @figmadesign

I love seeing how people think about the building blocks!

So this is me peeling back the curtain and showing you exactly how I built this menu component below 👇 pic.twitter.com/2CvgBkPhyj
— Ridd 🏛 (@Ridderingand) June 24, 2021

Right and wrong ways to use Variants

Good thread by Ridd on creating variants from a single base component.

There's a right way and a wrong way to use variants in @figmadesign.

When used correctly, they can be the most powerful part of your entire workflow.

These are the 5 steps I do for every single component I create 👇
— Ridd 🏛 (@Ridderingand) June 20, 2021

Trick to Show/Hide Header on Scroll in Figma

“Here is a simple trick that you can use to hide and unhide the app header on scrolling down. This trick can be used in web and mobile app prototyping, as the user scrolls down the header will be hidden and as the user scrolls back to the top the header will be shown.”

Issue #43
Jul 4, 2021
#Prototyping

#Features