Add A Feature

Figma Spell Check

At the time I designed this project, Figma didn’t have a native spell check option, this design was to envision how the option might look and operate.

Project Information

  • My Role: UX/UI Designer

  • Team: DesignLab UX Academy

  • Tools Utilized: Figma, Miro, Survey Monkey, Whimsical, and Google Docs

  • Skills Utilized: User Research, Competitive Analysis, User/Task Flows, Wireframing, Usability Testing, and Prototyping

  • Duration: Four Weeks

Why Figma Spell Check?

I love Figma, and it’s a wonderful, user-friendly tool. Figma has many advantages over competitors. Figma offers real-time collaboration with team members, or anyone else with access to a project file; something no other complex design software offers. Figma can accommodate anyone, from students, small to large teams, as well as small to large companies and enterprises.

Problem

Figma does not offer a native Spell Check option within the program, which poses an issue for users.

Goal

Determine how important having a spell check option would be for current Figma users.

Competitive Analysis

In my initial research, I wanted to find out more about Figma’s main competitors, so I constructed a Competitive Analysis. I soon learned that Figma’s main competitors are Adobe XD, Sketch, and InVision.

  • All four programs have the capability to prototype, and support the Anima plugin, which allows users to create responsive and interactive prototypes, as well as the ability to convert to code.

  • Figma and Sketch both offer collaboration capability, but because Figma is web-based, it can be accessed from anywhere.

  • Adobe XD and Sketch function offline, whereas Figma does not.

  • Sketch has the biggest disadvantage, as it’s only available for macOS.

  • Of these options, Figma offers the most advantages for users, with real-time collaboration, prototyping, web-based access, and code-sharing for Developers.

  • Figma’s biggest advantage is also its biggest disadvantage: there is no option to work offline.

User Survey

Common Themes

  • Nine Figma users responded via SurveyMonkey, 78% of which have been using Figma for less than six months

  • All users reported it would be useful to have native Spell Check capability in Figma

  • 67% of the users have used another design tool with native Spell Check capability

  • 56% of the users are currently using a Figma plugin to check for spelling errors

  • 55% of the users would like the option to enable Spell Check and 33% would like to see this option automatically enabled

User Pain Points

  • Because a majority of people are accustomed to having a spell check capability available in many products, it is very inconvenient to not have this option readily available

  • Misspellings could easily mean the loss of business and income

Opportunities

Since Adobe has acquired Figma, I’m assuming Figma will have Spell Check in the future, as Adobe offers the feature; this will/would be a huge addition to all the great things Figma already offers

I utilized SurveyMonkey to build and conduct a survey. I posted the link on the DesignLab Slack channel and received completed responses from nine people.

User Persona

Based on the User Survey responses, I designed the User Persona. The Persona indicates that Figma users are typically UX/UI Designers, use a plethora of tools to aid with research and design, and are generally unhappy with the fact that Figma does not have a native Spell Check tool natively available.

Sitemap

I utilized Miro for the Sitemap. I really learned a lot from designing the sitemap for Figma, as there are so many capabilities within Figma that I had never seen, despite using the tool for four months.

Initially, I thought the Spell Check tool would be best located in the “Edit” field, as that’s where Adobe XD has it located. But, I decided to place the option in the “Text” field, as it made sense to have the option located there, as well as in the “Text” field on the “Design” page, so a user would be able to enable the option directly in a file.

High-Fidelity Wireframes

I re-created Figma’s main screen, as well as the Design screens, as I envision the users being able to access the Spell Check capability from both the main menu dropdown under “Text”, and within the “Design” page within the “Text” field. I believe it would be very convenient if users were able to simply click a box to indicate they would like to enable/disable the Spell Check option.

For illustration purposes, I chose to show the full Figma screen, rather than the overlays. Because there are so many Figma ingredients that are distinct to Figma, I also chose to digitally create the screens as they actually appear within Figma, rather than utilizing wireframes.

  • Main Screen

  • Main Screen with Dropdown

  • Spell Check Dropdown

  • Spell Check Enabled

  • New Project Page

  • Spell Check in Text Field

  • Text Field Checked

Brand Ideation

Figma uses the Inter typography, as well as the bright colors represented, for their color palette. I designed the Figma Spell Check project pages with these items, as well as icons I found on Iconify.

I designed the top navigation bar as a component, along with the aforementioned typography, icons, and color palette found in Figma.

Initial Prototype

The prototype is intended to show where the Spell Check capability would be located within Figma, as well as how it would function.

I envision the option being located on the Main Dropdown, under the “Text” area, and allowing the user to have the option to permanently enable, or disable case-by-case.

I tested the prototype in-person with three users. The users’ prompt was to:

  • Locate and enable the Spell Check option.

  • Enable Spell Check initially, while beginning a design

For simplicity of viewing, I have not included the overlays below.

  • Main Figma Screen

  • Figma Main Screen with Text Dropdown

  • New Project Page

  • Spell Check in Text Field

  • Spell Check in Text Field Checked

Affinity Map

As it always is, the user feedback was very helpful and interesting. Some of the feedback and suggestions I received were:

  • The dropdowns are choppy

  • Confusion as to where the Spell Check option would be located

  • Would like the capability to check spelling while hovering over a particular word

  • Would like to ability to ignore the Spell Check recommendation, as well as be able to “Ignore All”, or “Change All”

  • Can there be a pop-up to indicate whether Spell Check has been enabled?

Final Prototype with Iterations

Based on user testing, there were several things I updated from the original prototype:

  • Added the capability for a user to change, ignore, and/or add Spell Check suggestions, as well as view the Dictionary

  • Worked on the main menu transition smoothness, so it’s a better user experience

  • Decreased the size of the Spell Check Box in the design, so it was more consistent with the other sizing

  • Eliminated a step in the Spell Check in the Design screen, so it’s a smoother transition

  • Better aligned areas throughout the design

Key Insights & Reflection

  • This project was very interesting, as I learned a lot about Figma’s capabilities and make-up.

  • Now that Adobe has acquired Figma, I hope one of the advantages will be that Spell Check will be added to Figma; this seems likely, as Adobe’s other products have Spell Check.

  • Figma Spell Check capability would make an already fantastic product even better!

Previous

Paws Permitted
Next

Grondel Therapy