Figma: The New King in Designing and Building Prototypes

Figma recently announced that it has successfully raised $50 million in Series D funding. The acquisition of more funding from various investors has increased Figma’s value, which Forbes now estimates at $2 billion.

The recent announcement is undoubtedly a big deal. Figma is a tool mainly used for designing and building prototypes. Its sales pitch is that Figma is superior by increasing collaboration between development and design teams. The recent funding round is expected to expand features the feature set and provide a better tool across the entire organization.

Figma, the collaborative interface design and prototyping tool, was the brainchild of then 20-year-old Dylan Field and WebGL prodigy Evan Wallace. The tool was built to rival Adobe and its Creative Cloud application suite. It was built to be a genuinely cloud-based tool that promotes collaborations among teams and makes the design process easier – something the “cloud-by-name-only” Adobe Creative Cloud lacks. 

UI and UX Design used to just be an afterthought. In software design, companies used to accomplish the workflows first then added the designs that fit into that workflow. Figma sought to change all that by shifting the focus to design using a design-centric collaborative approach. Today, many similar apps are eyeing a similar approach to make design a critical part of product development.

It all starts with a wireframe.

What is Wireframing?

At Jyst we are often approached with the following questions from people who wish to build an app or application.

I have an idea, can you build the app?

How much to develop this application?

How do I go about building an app?

The answers are, before even writing one line of code you should wireframe and prototype your idea.

Before you can even come up with a blueprint for your software, you will first need to come up with different concepts of the initial design. Initial ideas go through several iterations before they can be used as a final concept for an interface. During these initial stages of design, the use of actual text and images is meaningless and, quite frankly, at such an early stage of product development too tedious. 

Using wireframes as placeholders simplifies these initial stages. It lets you see how an interface would look like without any of the actual information that should otherwise be there. Think of it as the blueprints to your home. You can see what the structure looks like including its electrical and plumbing layout without using actual pipes and wires and interiors.

How did we Wireframe before Software?

The design process doesn’t begin with any software. As part of the pre-design phase, conceptualization starts with brainstorming. One of the most straightforward tools used by design teams is post-it notes. Boards and walls are filled with tons of ideas written on colourful post-its. 

Once a viable idea has been developed, they start to envision the content they want to show to users. They create wireframes on paper, which is later developed digitally, to visualize the content they want to show. The content is then sorted and labelled in a card sorting session. 

When building a prototype, and once the initial wireframes have been successfully created, they are then digitized and developed using Figma or any other prototyping tool to connect the wireframes to the information architecture. 

How Does Figma Stack Up Against Other Products?

Figma is relatively new to the design world, yet it is fast becoming the go-to tool for UI/UX designers around the world. Its success is thanks in no small part to its focus on improving the ease in which teams can collaborate on a project. It has a seamless user interface and a sleek feature palette. Here’s how it compares stacks up against similar apps such as Sketch, Adobe XD, and InVision Studio.

Pricing. All but one app use a subscription-as-a-service (SaaS) pricing model with free and paid plans. Adobe XD and InVision Studio offer free access for one document while with Figma you can have up to 3 projects for free. Figma provides team access at the lowest price at $12 per month. Sketch offers lifetime access for a one-time purchase of $99 per license. 

Platform. Only Figma has a powerful browser-based app that is universally-accessible while the Sketch app has been criticized for being offputting due to it being Mac only. (Does anyone still design on Windows?)

Prototyping and Interactions. Figma offers a powerful prototyping tool that rivals even that of Sketch and Adobe XD

Figma Prototyping

Collaboration. As the “Google Docs of UI design”, Figma follows through on its promise of offering a powerful live collaboration tool with a polished design UI. Adobe XD has only recently introduced real-time coediting at Adobe MAX 2019. With Sketch, you’ll need a plugin to promote collaboration while InVision Studio doesn’t support real-time collaborations at this time.

Figma built for collaboration
A complete product prototype

Is Figma the New King in Wireframing?

The early 2010s brought us a variety of innovative design tools that sought to change the way we viewed design. The introduction of Sketch was a welcome change to a design market that was dominated by design giants like Adobe. They offered innovations that were never before seen on the market, which kick-started a wave of design collaboration changes.

Then came the web-based Figma who many thought would never work. While many of those earlier apps focused on the actual design process, Figma took it a step further and focused on visual collaboration. 

Today, it is one of the best tools for wireframing and prototyping. Designers and design teams all over the world swear by the product. Even the best developers from the likes of Twitter, GitHub, Dropbox, and Microsoft swear Figma. In fact, they consider it to be the ultimate design tool today, as do the Jyst team.