How to wireframe a website with Figma

Figma is a great collaborative tool for wireframing and prototyping a website. We'll walk you through how to use it.
Apr 27, 2020 • 6 minute read
Gauri Gautam @GauriMelb
Technical Co-pilot
Cover photo for How to wireframe a website with Figma

Μείνε Ενημερωμένος/η

Κάνε εγγραφή στα ενημερωτικά μας δελτία για να μείνεις ενημερωμένος/η για τα θέματα που έχουν σημασία.
Ευχαριστούμε για την εγγραφή! Για την επόμενη μας ενημέρωση δες τα εισερχόμενα σου.

Figma is an excellent web-based wireframe tool that is ideal for real-time collaboration 

Wireframes are, essentially, visual guides that go beyond simply jotting down your ideas. They help you clearly outline a framework and allow you to bring your idea that much closer to the final product. Being a powerful cloud-based tool, executing a website wireframe project using Figma is that much quicker and straightforward. Once you have designed or uploaded your UI components you can conveniently create artboards, add text and shapes, view the prototype, share the progress, take the feedback, etc., while ensuring that everything is kept organized in one place. If all of this sounds interesting, then read on to find out how you and your team can use Figma to wireframe a website.

Understanding Figma

It is very natural for a designer to hand sketch wireframes using dot grid journals or computer paper sheets. However, designing on-screen is fast becoming the new norm and Figma’s wireframe template allows you to do just that. The moment you begin using a wireframe app like Figma, you will realize the difference between a low-fidelity wireframe and the benefits of using a high-fidelity product like this one.

Being a web-based tool, Figma offers both ideating, prototyping and UI, along with brilliant vector features all in a single app that can be easily downloaded on a native desktop app. Moreover, Figma is free for individual use. There is absolutely no cost involved in the standard version. However, if you do want to upgrade to team-based price plans, they are fairly reasonable as well. More on this is discussed in later sections.

Building a website wireframe with Figma

Figma’s high fidelity wireframe has all the elements including branding signifiers, visual marker, graphics, font styles, colors, etc. In short, it has all the basics to help you create a perfect high-fidelity wireframe. Here, we have compiled a step-by-step process of starting a Figma project to wireframe a website.

Onboarding with Figma

With just a few clicks on https://www.figma.com/templates/wireframe-kits/, you can create an account on the Figma website and get started on your project.

signing up for figma

Once you have created an account, you can start building from scratch or use their existing templates to execute your project.

figma templates screen

All of this is held together by a comprehensive dashboard that gives you a very clear view of all your projects, tier status, etc.

figma dashboard

You can click on the toolbar to create new projects. Once you do that, you will be presented with a new page to work on. All of this gets stored and can be viewed in the dashboard.

starting a new project in figma

The Figma interface

The black color toolbar is the main access point from where you can access different drop-down menus and view various options.

figma wireframing interface

You can create custom artboards or use the suggested templates. In addition to this, the slice tool from the toolbar allows you to access any specific region for exporting and the pen icon helps you create custom shapes with anchor points for modifications and adjustments.

Using layers in Figma

The layers are situated to your left and give you enough and more artboard options to work with. Upon each expansion you get access to more groups, elements, and components. The gray section is essentially where you will create your wireframe project. Apart from this, the properties panel will showcase whatever properties get updated. Here, you can switch between Design, Prototype and Code for ease of access.

using layers in figma

Shape modification in Figma

You can enter edit mode by double-clicking on any shape. You can change the shapes as per your requirements by moving the anchor points. Likewise, you can also duplicate, copy, and paste shapes using simple functions. It is also easy to drag and drop photographs onto your artboard. Here, you can use layer blend modes to ensure that these objects and images fit in aesthetically.

The Figma artboard

Interestingly, Figma gives frames within the frames. The Figma frame is essentially the artboard where you can draw and create. And a Group helps you to group all the layers to ensure that your document is more streamlined. You also get enough and more presets depending on the device you are configuring for.

figma artboard

Figma team library

As one of Figma’s most talked of features, the team library allows all users to have a repository of components that are shared with the entire team or across teams. It is very convenient to publish and get all components reviewed by the stakeholders using the Library feature. Of course, this feature is only available in higher versions. Overall, it is very useful if you are working with a larger team as it provides an added consistency to your project.

figma team library

Figma components

The instances in the master components can be given different appearance in terms of text color, background, border, etc. without detaching them from the Master instance.

changing components in figma

Testing design in real time with Figma

Most of us who are working solo, or with a few people, may be skeptical about co-designing in real time. However, this can come in handy if you are working remotely. Sharing the file in real time and receiving the feedback and comments immediately can help bring down the overall duration and cost of the project while increasing your level of efficiency.

testing design in figma

Prototyping your website with Figma

Once you are satisfied with what you have created, you can hit the Prototype button in the toolbar and move onto the next stage. This in-built prototyping element allows the user to switch without a break in the process flow. You are not required to go to another platform or app to upload your framework and create a prototype. Once the connection is created, you can press the play button and begin using the prototype. Also, since everyone is on the same platform, it is easy to receive feedback at all the stages.

prototyping website in figma

Photo editing with Figma

On the whole, we found editing to be simple and flexible, especially the photo editing feature. It is not very fancy but works well as an integrated photo-editing component.

figma photo editing tools

Handing over your Figma prototype to the developer

This is, by far, one of the most thoughtful features of the Figma app. Interestingly enough, you can share your design with the developer via the app, or they can view your design in the app but can’t make any changes to it. The development team can also easily export assets from your design without modifying the original. In other words, you can handover to the development team without having to upload your screens to another app.

Figma plans and pricing

Now that we have established how convenient and feature-full this app is, let us look at the pricing and the plans that are available. Overall, Figma comes across as extremely affordable in comparison to most other apps. This is mainly because even the free version contains a host of features that work brilliantly well irrespective of whether you are a small-scale designer working individually or as a part of a larger team.

You can use Figma for free unless you want to use the professional versions that include features like shareable team libraries, unlimited projects, to name a few. Even then, the month-on-month cost is relatively low.

figma plans and pricing

Starter/Free

If you are working on your own or with a partner, then the free version is sufficient for your requirements.

Professional

Since the starter version is limited to only 2 editors and 3 projects, it makes sense to use Professional if you have more than 2 team members, a team working on more than 3 projects, or a few numbers of teams. Here, you are not limited on the number of files and this can come in handy when you are working with shared UI elements or user settings, etc. The Figma professional plan runs $15 USD billed monthly, or $144 billed annually.

Organization

It is recommended to use the organization tier if there are multiple teams working on Figma and your work requires organization level features. It keeps elements and components organized and allows you to freely share designs among various members as well as teams. You can also integrate across the organization with SSO.

While there is no doubt that Figma is one of the best apps available in this field, selecting the type of plan is entirely dependent on individual requirements. If you are unsure of your requirement itself, then beginning with a standard or free version is the way to go. This will allow you to assess your requirements, where you stand, and what you may need in future.

The Figma Organization plan runs $540 billed annually.

Final words

The wireframe stage for a website gives best results when it is a collaborative effort. This is where Figma scores the maximum points as it makes it highly convenient to collaborate with others and helps solve any workflow or design related problems seamlessly. This web-based tool allows you to share in real time, keep everyone in the loop, and give access to anyone over the web encouraging full disclosure. And all of this is possible purely because it is an extremely user-friendly app.

Μείνε Ενημερωμένος/η

Κάνε εγγραφή στα ενημερωτικά μας δελτία για να μείνεις ενημερωμένος/η για τα θέματα που έχουν σημασία.
Ευχαριστούμε για την εγγραφή! Για την επόμενη μας ενημέρωση δες τα εισερχόμενα σου.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Προτεινόμενα Άρθρα Μόνο Για Εσένα
Wireframe creation is critical to website design, but it doesn't need to be complicated. We will teach the stress-free process.
5 MIN READ
The process of creating a website is very daunting if you have no experience. In this process we break down the complexity into 15 actionable steps.
13 MIN READ
Getting a high-fidelity website mockup created is a vital part of building your site. We'll show you how to get it done on a budget.
7 MIN READ
Mobile responsiveness isn't just a nice feature for your website to have. It's a must. We'll show you how to get it there.
6 MIN READ