Figma Plugins for Better App Design Workflows

As a design team, we're always looking for a way to automate some aspect of our design process - especially things that can take a long time or do multiple times a day.

Figma has helped us in so many areas. Since the launch of Figma Community and the Figma plugins, we've been quick to bring some of our favorites into everyday workflows.

Below we share an evolving list of some of our favorite Figma plugins and how they fit into our process. If you have any plugin ideas, please send them our way!

‍

A11y

Color contrast analyzer tool

A11y is a color contrast checker, which helps us to deliver compliance-ready color combinations for our design project. When working on a project, it's important to establish a good color palette early on - namely, one that is going to be legible for all of our design work.

Merely selecting a frame will tell you where you stand with your current levels and give you the flexibility to make adjustments on the fly.

Accessibility is essential to delivering apps that everyone can use.

Key features:

• Check color contrast ratio of all visible text in a frame
• Provides feedback on whether it meets WCAG's AA and/or AAA level compliance
• Providers color sliders that allow users to adjust the colors

Why we love it

As a team, we've started to add this to our workflow process at the start of the project. We leverage our design system and library UI kits so that this work is distributed to the entire design.

Install A11Y!

‍

Status Annotations

Figma project status communication

Communicating the status of a screen is difficult sometimes. With the multiplayer nature of Figma and teams working asynchronously on things, you never know when a developer or a client might pop into your file.

Key features:

• Quickly and clearly communicate the status of your designs
• Ability to integrate with project management tools
• Allows for transparency across entire team and stakeholders

Why we love it

We're big believers in letting everyone into the file to see the status at any time, but we needed a way to communicate the status of our individual frames so things that aren't yet ready don't get handed off.

We initially established a manual process but it was a bit cumbersome. Then one of our designers stubbled onto status annotation. With a few clicks, we have a status showing over our frames. This has been extremely helpful in keeping communication clear across the team and also works well with the various project management tools we utilize.

Install Status Annotation!

‍

Color Designer

Color palette tool

When it comes to building out color palettes, there are a ton of great web tools out there. But having one in Figma has been super helpful. Not only does Color Designer help create your starting palette, but it can also help you work through your tint and shade levels and find color harmonies.

Key features:

• Generates tints, shades, and color harmonies
• Integrated with user selection and local styles
• Easy to use

Why we love it

Color Designer has been crucial at the start of every project. We leverage this the most when we're first establishing out design systems and UI kits.

Install Color Designer!

‍

Content Reel

Random data generator

Content reel provides a ton of data that you can quickly import into your designs. Address, names, avatars are all included out of the box.  If you create an account, you can also add your own and save it off for later use. So if you want a bunch of user names based on Keanu Reeves movie roles, you can do that!

Key features:

• Lets you create custom content and share with other Figma users
• Create text categories and populate them with your own text strings
• Browse the Content Library to find published collections

Why we love it

Having user data that looks real helps clients and stakeholders get a better understanding of what a design might look like once it's live. Even if it says, John Wick or Theodore Logan!

This is also helpful when working on character limits or checking to see if longer names work in your designs. So having a couple of shorter names as well as longer ones (like say, MVP Milwaukee Bucks power forward Giannis Antetokounmpo) can help you deliver a design that is more accessible to everyone.

Install Content Reel!

‍

Google Sheets Sync

Real data integration

We end up working on a lot of data tables, and putting all of that data into a design can take some time. With a clever naming convention on some nested components, you can quickly automate large data imports into our designs and leverage real customer or client data.

Key features:

• Easily sync data from a spreadsheet to elements in your design
• Ability to still manage your data with all of benefits of a spreadsheet
• Ability to include a URL with images in your columns

Why we love it

Google Sheet Sync has been a pivotal tool in building out large data tables. The power of Google Sheets to handle formatting and formulas has been effective when building out checkouts or large data tables that need summaries or percentages. Also, we can all be thankful for not trying to figure out the math ourselves one row at a time.

Install Google Sheet Sync!

‍

Annotate It!

Better communication in Figma

We get asked all the time by clients and developers "Can we just have the requirements written in Figma?" Annotate It! Allows us to do just that. Being able to put detailed notes right in your Figma files is super helpful and has solved a ton of communication barriers.

Key features:

• Drag to reorder
• Markdown text for smart formatting
• Smart annotation marker placement
• Assign a color for various intents

Why we love it

Developers love seeing the detailed notes right next to the screens and we can explain complicated items right inside of Figma. We're excited to see how this plugin might evolve in the future.

Pro tip:

If you'd like a second Annotate it! board in your file, rename the first one and you can generate a second board. Small workaround when you want a few more boards of notes in your canvas.

Install Annotate It!

‍

UI Faces

Avatar generator

Getting avatars is always a bit of work, but UI faces have made it very easy.  Grabbing a variety of faces from a few trusted sites this has been a great tool to spin up a quick user profile and avatar photos.

Key features:

• Filters thousands of avatars that can be filtered to your persona
• Aggregated from various sources
• Can filter by age, gender, emotion, etc.

Why we love it

This has been a great plugin to use early on in our design work. Once we build out personas we can carry that user profile across the entire design. Plus if you don't want any real people in your designs, you can use "AI-Generated" faces (which is not creepy at all).

Install UI Faces

‍

Improving as we go

While the above list of Figma plugins is not exhaustive, these are the ones that we've folded into our process. And again -  if there are any great plugins you've found, send them our way!

Tweet us at @headwayio!

‍

More Figma resources for product designers

Figma Tutorials for Beginners

Figma UI Kit and Design System - Shipwright

Customer Journey Maps & User Flows - FigJam Template

Live Stream Events

Getting Started with Design Systems in Figma

Intro to Design Tokens in Figma

‍

Want to join our design team?

We're always looking for talented and open-minded people to help us bring new ideas to life. See what it's like to work at Headway and the opportunities we currently have available.

Learn more about careers at Headway

‍