Adding a Spell Check Feature to Figma

Mac Computer with a mockup of Elizabeth Mattfeld's website

Adding a Spell Check Feature to Figma

Figma wants to improve user work flow by adding spell check

Client: Figma

Roles: UX Design, Research, Testing

Tools: Figma, Adobe Illustrator

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.

Overview

Elizabeth Mattfield is in the process of career relocation and has wanted to start an online coaching business for professionals in the mental health community. 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

Research Goals

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

Objectives

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

Strengths:

Research the response to the spell check feature in Adobe XD and problem areas and understand what the users like as well as how it has improved the work flow.

Strengths:

Having spell check on Figma will help the user with writing text that feels more intuitive like their other features.

Strengths:

Invision takes the time to understand trends in the products and industry and applies the insight into new features.

Indirect Competitors

Strengths:

Canva is favored because of its easy use and wide verity of content possibilities for people who may not have experience with design projects. Did not like the way their spell check worked was confusing at first and felt like it took too many clicks to have the red line appear.

Strengths:

Grammarly has used the typical colors and distinctions that have been used in google doc, word and other general revising techniques e.g. red underline is a misspelled word

Summary

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.

Figma has steadily increased in users since its start in late 2016. It is very similar to the existing competitors; however, having access to Figma from browsers allows for quicker and easier testing and iterations. The creators of Figma have also put thought into the many stages of product design and have built-in CSS panels for better hand offs to developers. Having spell check be a built-in feature that can be turned on and off will relieve designers from frustrations, catch more mistakes, and help make wireframes faster. A common feature in all the competitors was accessible interfaces that allowed the user to navigate the tool freely without experience and confusion. Figma is favored for its intuitive interface and a wide variety of features that allow the user to accomplish more without needing other tools. Adding the feature spellcheck to Figma could add to this by not needing to cut and paste text or using a plugin that may not catch everything.

User Interviews

Goals

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

Objectives

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.

Notes:
Notes Question 3 may have been a little confusing. Maybe we should have rephrased the question as “do you use any outside programs to help with writing text i.e. google docs, grammarly etc”.

User Persona

Elijah Miller

Elijah Miller

Age29

OccupationUI/UX DesignerGenderMaleLocationDenver, Colorado

StatusMarriedArchetypeCareer Switcher

adventurous
curious
encouraging
thoughtful

Brands

Bio

Elijah was a teacher at a middle school for 5 years when he found he started getting interested in UI/UX design. He's been at his new job at a mid size tech firm as a junior UI/UX designer. He has been so used to working with programs that spell check automatically and working within Figma has been great except for that. He has had the usual learning curve with features like components and auto layouts but has had some trouble with spelling and grammar mistakes. He has used Sketch and really likes the new spell check feature but his work prefers him to use Figma. This has been something that his work friends have had some annoyances with and are surprised it's not already a feature with the variety of uses Figma has.

Goals

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

Frustrations

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

User Flow

User is working on a project for work and needs to change a word using spell check and then turn spell check off.

What was learned

Having a keyboard shortcut for this feature will increase productivity and decrease the amount of steps needed to toggle spell check on and off.

Sketching

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.

Low Fidelity Wire Frames

High Fidelity Wire Frames

Having multiple flows a user can enable spell check will increase productivy and help with any frustrations around navigating the new feature.

User Testing

Participants

4-6 Participants between the age of 28-69

Participants were male and female

Goals

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.

Objectives

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.

Prototype

Task

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

Figma Prototype

Affinity Map

What was learned

Line for errors was too thin
Users were very positive about adding spell check to Fimga

File was first looked placed for spell check
Overlooked mistakes cause negative feelings about the user and their skills

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.

Iterations

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

Conclusion

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.