A New Industry Standard

Being in the tech space means needing to adapt to an ever-changing market of products and tools to facilitate the design and development process. With new software being made to make designing more user friendly and accessible to non-designers, we as UX designers need to keep up to date with all the happenings in the industry. There are so many different types of software that exist which attempt to make their mark as a leading design tool. All offer their own affordances and drawbacks depending on the context used—being a team vs. individual context, novice vs. expert context, or a simple to complex experience context.

Despite there being so many options for designers to create awesome experiences, we at Lithios primarily use Sketch and Figma—with Figma being the more preferred tool. In this blog, we will discuss what Sketch and Figma are and why the Lithios team prefers to work in the Figma space.

What Are Figma and Sketch?

Sketch and Figma are both software design tools used to create mobile and web experiences in the UX/UI design space. They allow designers to create the UI—or visuals—of an app or website, as well as bring these designs to life with prototyping. The prototyping allows the designer to simulate a real coded experience through the use of hotspots. At a more detailed level, these tools allow designers to create repeatable components that they can use to streamline the design process and create a library of UI elements that can be used across a specific project. Sketch and Figma are both great tools for an up and coming designer to get plugged into UX/UI design as they are both highly regarded within the industry.

Why We Prefer Figma

Both Sketch and Figma are great tools if you are looking to get started in UX/UI design. They are both leading in the industry and are by no means perfect. Sketch has been leading in the industry for years and we believe Figma is it's new competition. Here are a few reasons why we think Figma is superior to Sketch:

1. Less Software, More Efficiency

At Lithios, we got our start through using Sketch but overtime as we scaled as a company we realized that we needed a tool that was more consolidated and convenient for our growing team. When using Sketch, we had to also have an additional 3 programs in order for it to be useful for our team: Craft, Invision, and Abstract. We do a lot of prototyping at Lithios and Sketch didn’t have the intuitive and user friendly prototyping tools that we would need to create our high quality prototypes—there was a point where Sketch didn’t even have a prototyping option. As a result, we needed a way to export our screen designs from Sketch into Invision—where we would then create hotspots for the clickable prototype. In order to do this, we needed an extension called Craft, which connects to our Sketch file and allows us to mass export screen designs that would then be uploaded to Invision through the Craft manager. Once Craft uploaded the screens to Invision, we would then need to go into our Invision account and actually create the hotspots for the prototype. That would mean that in order to create one prototype, we would need three different programs in order to get the job done.In addition to the two programs needed to actually create prototypes, we also needed a version control manager. Working on a team of multiple designers means that they each can make edits to the same design file over time. We needed a program called Abstract to connect to a Sketch document, so that the document can not only be saved in a place that is accessible to all designers, but would also update the document with any changes made to it , so that when a designer accessed the file it would be updated with the most recent updates. That brings our tally to a total of 3 additional programs needed in order to make the most of our Sketch experience.

With Figma, it brings the total programs needed from 4 to just 1. Figma is a great one stop shop for all things UX/UI design. It has user friendly and advanced prototyping directly in the software, so we no longer needed to have an additional two programs to prototype. It also is a web app, which allows the document to be housed and saved to the cloud—enabling it to be accessible to any designer added to the document project. It being housed on the cloud also means that the file autosaves in a secure location, limiting the chances of a file being lost. If you are looking for a program that has all that you would need in one space when it comes to file management, design, and prototyping we would recommend you check out Figma!

2. Newfound Collaboration

Another huge win for Figma is the fact that it allows for collaboration. When working with a group of designers, we often have to work together on a file potentially at the same time while brainstorming and building out designs. A limitation of Sketch is that the file can only be worked on one at a time, making collaboration non-existent. Figma being a web app and housing the projects over the cloud, allows it function like a Google Doc where multiple users can be working on the same document at once. This is a great must-have when wanting to streamline the design process, yet allowing projects to be more accessible. This definitely was a game changer for us and allowed our designers to be more collaborative than they ever had been before.

3. Wonderful Variants

During our design process, we like to create and use a library of UI elements that we may reuse and edit while building out UI’s. These are usually housed on a separate page within a project file and edited depending on the use cases. Although Sketch does have the ability to create components—which are the reusable UI elements—it doesn’t allow for the same level of organization as Figma. In Figma, there is a tool called Variants—which allows you to create a component along with it’s different variations in an organized container. This means that when you copy and use the component in a specific design, if you created variations of the element with a different layout, you would be able to click on that component and easily swap it out for the different layout version all in one menu. This can be expanded to include colors, fills, sizes and states, which can all be consolidated into a convenient menu. The Variants option in Figma means that you no longer need to scroll through a long list of components in order to get the one you want, it can all be organized in a much more streamlined way. Variants are the next best thing to sliced bread.

A Unanimous Winner

Figma is definitely ahead of its time when it comes to software design and is quickly becoming the industry standard for UX/UI designers. It’s ability for collaboration, efficiency of use cases, and user friendly organization are no match for the long reigning industry standard that is Sketch. Figma is always adapting and updating its software with new tools to help make it more consolidated as a central design platform. With new features like FigJam coming along to offer a place for UX flow creation, we are excited to see how the program continues to progress to become a leading figure in the UX/UI design space.