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.
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.
Once you have created an account, you can start building from scratch or use their existing templates to execute your project.
All of this is held together by a comprehensive dashboard that gives you a very clear view of all your projects, tier status, etc.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
If you are working on your own or with a partner, then the free version is sufficient for your requirements.
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.
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.
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.