7 ways to level-up in Figma

We’re big fans of Figma. It’s now our go-to for all things web design.

Having switched from Sketch to Figma a while ago, here’s a round-up of some of the things that we’ve found useful when working on design projects.

It’s a combination of tips, hints and recommendations.

We’ll explore:

1. Which plugins to install first
2. How to effectively use the Commenting feature
3. How to make your prototype more maintainable
4. How to place multiple images at the same time
5. How we integrate Tailwind into Figma, including Creating a reusable grid Library and Accessing the default Tailwind colour palette
6. How we organise text styles
7. How to add cover images to design files

1. Which plugins to install first

Plugins add another tool to your designer tool belt. They can extend existing functionality and provide access to third-party solutions to speed up your workflow.

Following its beta launch in July, the Figma plugin store has gone from strength to strength.

We’re yet to fully delve into the wide range of plugins available, but a couple of plugins that we were quick to add are Mapsicle and Unsplash. Unsurprisingly, they are two of the most popular plugins.

Mapsicle

Mapsicle is a plugin that integrates with Mapbox to provide you with instant access to custom maps from right within the Figma editor. When designing websites, more often than not, you’ll find yourself in need of a map or two - so rather than having to head over to Google Maps, take a quick screenshot and import it into Figma, Mapsicle does the work for you.

Unsplash

Unsplash has become the go-to resource for high-resolution images that are free for commercial use. Community-driven, Unsplash provides a library of high-quality images to use as placeholders in your designs. And, as Unsplash is entirely free with no licensing restrictions, you’re free to use their images in your final designs too - but a thank you is always nice, so give a shout out the creator by adding an accreditation if you can.

2. Effectively use the Commenting feature

Figma’s Commenting feature is great. It allows you to request feedback on your designs from right within Figma.

Using the commenting feature provides a useful alternative to the typical process of gathering feedback - which can often involve a meeting, note-taking, and lengthy discussion to collate actionable feedback. Whilst that approach is valuable, sometimes it’s good to gather opinion in context to iterate faster - commenting in Figma allows you to do just that.

Not only is Commenting a good way to collect feedback, but it also doubles up as a checklist. You can mark a comment as “resolved” when an action has been taken. This reduces the likelihood of feedback points being missed.

3. Make your prototype more maintainable

We love the built-in prototyping that Figma provides. It removes the need to use a third-party solution and your prototype is always kept up to date.

Figma allows you to define Hotspots, which can be any object in the frame - such as a button, image or icon. To that Hotspot, you add an Action, which defines what happens when you click a hotspot. A common example being, clicking a button to take you to another page.

To ensure your prototype is easy to maintain, any instances where you have a component that contains multiple Hotspots (a good example being a navigation bar), you will need to put the master Component on the same page as the designs that are currently using that component. That way you only have to define the hotspots once and not on every page. Phew!

4. Place multiple images at the same time

Being able to import multiple images at a time might not seem all that helpful, but the Place Image feature certainly is. Because it makes the process of swapping out multiple images much quicker.

To do so, select File › Place Image from the menu and select which images you would like to import. Figma then lets you quickly select where you would like each image to be placed. Neat.

5. Integrate Tailwind into Figma

Creating a reusable grid Library

When beginning a new design project, you need to define a grid system across the various breakpoints. We’re big fans of Tailwind, the utility-first CSS framework. Tailwind ships with a set of default Containers which define the breakpoints for desktop, tablet and mobile. This provides a great starting point for our design.

To avoid having to setup this grid each time we start a project, we have a Library in Figma that contains the Tailwind grids. We can then pull in this Library when we need it; saving time and making sure the grid is correct and consistent across each project.

Accessing the Tailwind colour palette

In the same way that we pull in the default Tailwind grid, we also find it useful to have access to the entire Tailwind colour palette.

Again, we use this as boilerplate and can adjust it accordingly, but it’s useful to have access to from within Figma. Just like we’ve done with the grid, we have a library that contains all of the Tailwind colours as Styles, which you can then enable on any of your design files via the Libraries panel.

6. Organise your text styles

Grouping your text styles into subcategories is highly recommended. We group our text styles according to how we structure our UI Kit. When it comes to typography, the UI Kit acts as a single source of truth.

Every design project will have an accompanying UI Kit and this is where we create our text styles and we currently group them in the following way:

• Headings (H1-H6)
• Body ( Paragraph Large, Paragraph, Paragraph Small)
• Other (Blockquote, Button, Link, Image Citation)

This acts as a good starting and we can add to this where necessary, such as introducing weight variants. Having consistently named text styles makes it easier to know what style to apply and when.

7. Add cover images to design files

It’s nice to keep things organised. And one way to do that is by adding cover images to your design files.

At present, our files are colour coordinated. Without a thumbnail, Figma will default to showing you a zoomed-out snapshot of the contents of the file, which isn’t always useful.

To add a cover image to your file:

1. Add a new page to the file you’re working in - make it the first page in the sidebar list
2. Create a Frame that is 620px by 320px and make the background transparent
3. Change the Canvas background to the colour you want the cover image to be
4. You can now start adding artwork to the frame you just created

Note: It may take a few minutes for your new cover image to appear.

The thumbnails are visible within the Figma app and so having consistent cover images just makes it easier to navigate at glance. Your fellow designers will thank you!

Summary

We’re really enjoying designing in Figma. It’s fast, intuitive and makes for a better workflow with designs that are easy to maintain.

We’ve shared what we’ve found to be most useful since making the switch from Sketch. We’re in no doubt that as we continue to use Figma, we’ll discover new and different ways to make our design process even more enjoyable and as efficient as possible.

If you're anything like us, you spend a lot of time in Figma so it’s important that it helps you to produce your best work. By mastering tips and tricks you’re free to focus on designing instead of needing to think ‘what’s that shortcut to do X again?’

We hope these tips are useful!