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.
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 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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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).
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!
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.
See all the ways we can help you grow through design, development, marketing, and more.
A podcast about building successful software. We provide actionable advice around product validation, execution, and promotion.
A show where we go behind the scenes on what it really takes to bring a new product to market.
Receive the latest articles, resources, events, and more!