Adding a Spell Check Feature to Figma

Mac Computer with a mockup of Elizabeth Mattfeld's website

Adding a Spell Check Feature to Figma

Client: Figma

Roles: UX Design, Research, Testing

Tools: Figma, Adobe Illustrator

Figma Prototype

Problem Statement

Figma does not have a spell check and this causes the user to either take time to copy and paste the text into Figma, or install a plugin. Plugins can be irritating and costly. Writing text in a doc and copying and pasting it over is inconvenient and slows down quick iterations and increases the chance of not catching errors.


She is looking for a site that is dedicated to revitalizing clients current work and assist in planning steps for achieving professional and personal goals in the fields of public health.


Research Goals

  • Find out what plugins are commonly used in Figma for spell check.
  • Understand how users think Figma could be improved.


  • Understand common patterns in users feelings about the writing process in design within Figma.
  • Understand user frustration levels with spell check plugins and copy/paste process.

Direct Competitors


Grammarly has easy to understand real time suggestion that are mostly accurate. Canva You do not need to have experience or skills to use it. Invision takes the time to understand trends in the products and industry and applies the insight into new features. Sketch is the tool that designers are familiar and have a longer history of use. Adobe has integrated spell check in their product which allows the user to make real time changes without using a plugin.

User Interviews


  • Find out what plugins are commonly used in Figma for spell check.
  • Understand how users think Figma could be improved.
Figma Logo


  • Understand common patterns in users feelings about the writing process in design within Figma.
  • Understand user frustration levels with spell check plugins and copy/paste process.

What was learned

As expected Fimga is highly rated overall. There were not as many issues with spell check as was expected but a larger sample will be needed to understand the representation of this problem area. A very important aspect of this feature will need to be able to toggle this feature on and off. And look into how spell check works for languages other than English in programs like Google Docs and Microsoft Word. More competitor research is needed to understand better how programs accommodate fields like healthcare that use a lot of abbreviations and medication names.

User Persona

Elijah Miller

Mac using laptop
OccupationUI/UX Designer
ArchetypeCareer Switcher
  • adventurous
  • curious
  • encouraging
  • thoughtful


Apple Logo
Skillshare Logo
Figma Logo


  • Make more time for side projects.
  • Help his friend with creating Figma tutorials.
  • Mentor an intern this summer for his job


  • Spend a lot of time on little problems like spelling and grammar mistakes for work.
  • Not being able to find solutions to problems he has with auto layouts and components when his coworkers are busy or in a meeting.
  • Spending double the time on projects because of intermediate skill level.

Site Map


Thought process of sketching

Quick sketches of the basic layout of Figma and how we could demonstrate a familiar visual for the words with spelling and grammar mistakes.

Sketch 1

Low Fidelity Wire Frames


High Fidelity Wire Frames


User Testing


4-6 Participants between the age of 28-69

Participants were male and female


  • Understand if there are any errors that cause the user to not complete the task.
  • Find inconsistencies with text, pictures, or general message of the purpose of the site and who it is for.


  • Understand the feelings and actions that come from overlooked mistakes.
  • Learn where users expect spell check to be and how the errors are expected to look.



You need to turn on spell check and correct the misspelled words

Figma Prototype

User Testing Summary

All users felt having spell check within Figma wouldincrease productivity, and lessen negative feelings around making mistakes or overlooking mistakes.
I expected users to instinctively navigate to thetext icon in the navigation however users went to file or the upper left corner, which is where file is located first. The lines that indicate which words had spelling or grammar mistakes need to bethicker and easier to see. Multiple users had trouble finding the errors which can add frustration and can waste time.

Grammarly is a favorite spell and grammar checking site that many users mentioned wishing to have a spell check plugin for Figma. I thought this was notable since there were no questions or comments in the user test about grammarly.


The major change that was needed with the spell check feature was making the line indicating spelling errors thicker.


As I have been learning Figma over the past year one of my biggest problems was recognizing I had spelling mistakes and consistently using the plugin to help correct these errors. Adding spellcheck to Figma was the perfect project for my bootcamp. When doing research I found that Figma competitors like sketch and adobe XD already had spell check as a built-in feature and when user research found that spell check would increase productivity and ease anxieties around mistakes made with spelling.

Creating the UI for this project I assumed that turning spell check on and off in the text Icon in the navigation would be the most intuitive. However usability testing showed that the majority of users went to the main menu icon to turn on the feature. Iterations were also made to make the red error indicator thicker and more pronounced. About six months after this project was completed Figma added spell check to their features and is very similar to my solution. The main difference is Figma turns on spell check when you are in the text box and turns off spell check when you click out. This difference was great to see because it made me understand that the solution I came up with was good but may have involved too much manual work to turn the feature on and off which will be something I take into account in future projects.

Next Steps

The line showing that shows error suggestions need to be thickened so the easier user is able to find it faster and with ease. The user test also showed the majority of users went to file first when looking for spellcheck. These iterations will be made and more user testing will be done to evaluate if the changes were positive and beneficial.