How Figma can streamline UX processes

Why we chose Figma to streamline UX and development

Figma + Standard Beagle Image

It is important for companies to frequently reassess how they do things. One of the drawbacks of investing in new tools is the resources it takes to try out new software. Sometimes, a team may agree to try a new tool, but don’t necessarily take the time to learn. This can become a waste of valuable resources. There are risks associated with redefining a company-wide process. With the right strategy, the benefits outweigh the negatives.

At Standard Beagle, we knew our process could be improved. At the time, we weren’t sure which tool could help us do that. It was hard to justify the resources spent on learning new software. With that said, we took the risk to give Figma a try and haven’t looked back. See how Figma streamlined our UX processes.

What is Figma?

By definition, some would say that Figma is primarily a prototyping tool. In my opinion, Figma has much more breadth and depth than that. In my own workflow, I use Figma to create:

  • mood boards
  • users personas
  • journey maps
  • wireframes
  • iconography
  • redlines
  • mockups
  • prototypes

I use Figma for a lot of other things, but create those items the most in my day to day work life. Essentially, Figma simplifies standard vector-based design programs. It is more accessible and easier to master.

Benefits of Figma

Figma is beneficial to the work environment because it:

  • Improves ease of collaboration
  • Eliminates the need for switching between design programs
  • Allows for most design assets to live in one place
  • Improves the developer handoff experience
  • Automatically saves projects in the cloud

Ease of collaboration

Figma improves cross-disciplinary communication because a link to a file can be shared with non-design team members. Public link sharing allows for developers or stakeholders to view, inspect, and comment on a file without being included on the ‘Figma team’. This is important because traditionally, people who were not designers were not able to view design artifacts in their native format. The reasons non-design contributors could not view files is because:

  • The design platform was not downloaded locally
  • They didn’t have credentials to access the design platform

By using Figma, it is easier and more efficient to get feedback, not just from the design team you are working with. But also from everyone else. All opinions matter when creating innovative solutions and collaboration is important.

No more switching between design programs

Image of Figma Project Folder

By using Figma, there is no need to switch between design programs. Instead of:

  • Wireframing in Balsamiq
  • Adding the visual interface in Photoshop
  • Exporting screens as a PDF for stakeholders or developers to view
You can do everything in Figma!

Yes, some things are easier to do outside of Figma.

For instance, I find creating user flows to be a nightmare in Figma. With that said, any type of wireframe, mockup, or prototype work is easier in Figma. There is no need to switch between different design programs anymore. Before realizing I could create low fidelity wireframes in Figma — I would use Balsamiq to create wireframes. It seemed great until I realized I had to recreate the wireframes in another tool. As a designer, any time-saving technique is crucial to strengthening my process. When using Balsamiq, I couldn’t transfer screens into a different program. All of my work was stuck on a platform where I could not add visual interface elements. It was a total nightmare.

Master components

Instead, I can create wireframes in Figma which ultimately saves me time. I create components out of key elements. After sketching ideas and iterating on paper, it is easy to wireframe sketches in Figma. I create master components from repeating elements, allowing for quick iteration after user testing. Additionally, when I begin implementing visual interface elements for high fidelity mockups, it is so much easier to do in Figma. The elements already exist, therefore can be easily changed. The key takeaway is that moving into Figma:

  • Results in less switching between design programs
  • Saves more time
  • Is less of a headache

All assets are in one place

By using Figma, I don’t need to jump around to find different artifacts. Think of a time when a new user insight influence changes that impact several artifacts. They are easier to update because they all live in one space.

Additionally, consider developer handoff. When you hand off a design to a developer, they can easily access the artifacts that explain your thought process. When everyone on your team can understand your reasoning and logic, the entire project runs more smoothly.

Improves handoffs and redlining

Image of Figma commenting to improve developer handoff

The redlining process is streamlined because you can comment on elements of the mockups with your:

  • Rationale
  • Logic
  • Ideas for functionality

Therefore, you are pretty much are redlining your mockups while you are designing. Instead of trying to remember your logic like when you redline at the end of a project. You are marking them up as you go.

Being able to comment directly on specific elements improves the speed in which you are able to hand off to the developer. Additionally, when you implement color and text styles, it is easier for a developer to see what the style represents.

For example, when I begin designing mid-fidelity mockups, I use a modular scale to define typography sizes needed for the project. Then, I create text styles for the varying headers, hyperlinks, body copy, etcetera.

Image of Text Styles in Figma

When I move to hi-fi mockups, I can adjust the designated text styles to add in font families, weights, and other factors that are directly integrated into the design. When the developer clicks on different a text style, the naming convention I assign displays. Ultimately, eliminating the need to redline typography.

Projects live in the cloud

Figma projects live in the cloud. There is no need to have a file saved locally unless you want it locally. Being that everything lives on the cloud, there is no need to share new versions with other team members. Changes are immediately available to your team in Figma. Additionally, as mentioned above, having projects and files that live in the cloud allows for easier sharing.

Key Takeaways

If you want to improve workflow, developer handoff, save time, and increase the ability to collaborate. I would suggest giving Figma a try. We will continue to expand on how we use Figma at Standard Beagle Studio. Keep a lookout for Figma how-to articles and videos so you can learn how to improve your workflow.

Resources