10 MORE Figma Tricks I Wish I Knew Earlier

More Figma hacks you might not know yet.

After writing 10 Figma Tricks I Wish I Knew Earlier, and receiving such awesome feedback, I decided to take it a step further and share more ways that I’ve been using Figma and Figma plugins to design at warp speed.

1. Breakpoints

The breakpoints plugin makes your designs nearly identical to CSS flexbox right in your design file. By first designing the different breakpoints for your design, you can then easily plug them into an adaptive frame and watch as it magically adapts while you drag the edges.

2. Add status tags to frames

When collaborating with clients, stakeholders, or other designers in Figma it can be confusing to communicate the status of designs. At last, the Frame Tags plugin allows you to add quick status updates to frames so there’s no need to clarify to other collaborators. Choose from a pre-set list of statuses or create your own!

3. Go incognito

If you get designer anxiety like I do, and don’t want other people in your Figma file to see your in-progress designs, then simply disconnect from Wi-Fi.

I know it seems strange but going offline is the only way to work in a design file without having other cursors snooping on you — it’s also an added bonus that you won’t be distracted by Slack and YouTube.

Just be sure not to close your file before you reconnect to WiFi to avoid losing your progress. You can also save an offline version (.fig) if needed since Figma currently does not save local copies.

4. Remove Backgrounds in one click

I used to drag my images into Photoshop and spend time with the pen tool or magic wand deleting backgrounds to make them transparent — forget that! The Remove BG plugin lets you do it with just a click.

5. Create private styles and components

To prevent Figma from publishing your styles and components, you can add a prefix to the component’s name in the layers panel.

Add “.” or “_” (ie “_Component Name”) before a components name and Figma will skip over these styles and components during the publishing process and list them in the “Private to this file” sections of the Assets panel and library modal.

6. Chat inside of Figma

Do you also leave text inside your Figma file for your other designer friends to see? Well, you can still do that but a somewhat more sophisticated solution is the Figma Chat plugin which creates a chat window for you to send clever messages to your coworkers.

7. Shades of any color in one click

I usually use the Material color tool to get accessible color shades but recently I’ve also been using the Color Shades plugin which generates all the shades of any color in one click.

8. Add a stroke to specific sides

Tutorial:

It frustrates me that I can’t specify a stroke to only one side of an object. My workaround for this is to set a drop shadow, turn off the blur then set it to one of the following:

• y: 1 (bottom)
• y: -1 (top)
• x: 1 (right)
• x: -1 (left)

You can also mix and match values, so y:1 and x -1 for example would be a stroke on the bottom and right. And of course, you can increase those values past 1 if you want the stroke to be thicker

9. Round to the nearest whole number

Round>>All is a plugin that will stop you from pulling your hair out with frustration over Figma not rounding to whole numbers. Especially when you scale with the scale tool (press K) things just never seem to land on a whole number.

To fix this press CMD (CTRL) + A to select all artboards in your file then run the Round>>All plugin for pixel perfection.

10. Create isometric designs with a click

Every cool designer has some isometric designs in their portfolio these days — ever wonder how they do it? It’s easy, just get the Isometric plugin, set a value, and boom you’re officially a trendy designer.