How to Efficiently Create Wireframes in Figma: A Beginner's Guide to Steps and Tips
When building a website or app, do you start directly with the final design?
Of course, if you have a finished image in your head, you might want to proceed directly to the design.
However, in professional practice, it is very important to create a "wireframe" first rather than diving into detailed colors and decorations.
A wireframe is like a blueprint for a webpage or app screen.
It is created to organize where to place headings, where to position images, where buttons are needed,
and in what order to present information to the user.
Using Figma, you can create these wireframes efficiently.
Figma is strong in collaborative editing and is equipped with features useful for wireframe creation, such as frames, components, Auto Layout,
and comment functions.
Also, Figma officially introduces FigJam as an online collaborative tool for teams to brainstorm and organize ideas, making it an easy tool to use for information organization in the initial stages.
In this article, I will explain how to efficiently create wireframes in Figma in an easy-to-understand way for beginners.
What is a wireframe?
A wireframe is a blueprint that represents the "skeleton" of a website or app.
It is not meant to include colors, photos, or detailed decorations like a final design.
Its main purpose is to organize the page structure and the priority of information.
For example, for the top page of a corporate site, it would include:
Main visual
News/Announcements
Service introduction
Reasons for being chosen
Achievements
Customer testimonials
Frequently asked questions
Contact flow
Decide in what order to place elements such as these.
What is important at this stage is not visual beauty, but rather
whether the information is conveyed, whether the user will get lost, and whether it leads to the intended action.
Colors and decorations can be adjusted later, but if the structure is poor, no matter how much you refine the appearance, it will be difficult to achieve results.
Therefore, wireframing is an important process that serves as the foundation for web production.
Benefits of creating wireframes in Figma
Wireframes can also be created using paper, whiteboards, Excel, PowerPoint, and so on.
However, there are significant benefits to using Figma for web and app production.
Easy collaborative editing
Since Figma allows multiple people to edit simultaneously, designers, directors, coders, and
clients can all view and check the same screen.
For example, you can change the structure or leave comments during a meeting.
Opinions such as
“It would be better to move this section up,”
“I want to add a CTA here,” or “This amount of text is a bit long”
can be reflected immediately, making the review process smoother.
Easy transition to final design
If you create wireframes in Figma, it becomes easier to develop them directly into the final design.
If you create them on paper or in PowerPoint, you will eventually need to recreate them in Figma, Photoshop, or similar tools.
However, if you create them in Figma from the start, you can add colors, images, and decorations while keeping the frame sizes and element placements intact.
Reducing redundant work is a major benefit.
Can be componentized
Even in wireframes, the same parts appear repeatedly.
For example,
Header
Footer
Button
Card
News List
CTA
Form Fields
and so on.
If you turn these into components, you can reuse them across multiple pages.
Even if changes are needed later, you can simply edit the original component to update everything, which improves work efficiency.
The official Figma website also introduces how to use reusable components, Variables, and
brand assets to create designs using the same visual rules.
First, organize your objectives
Before opening Figma, first organize the purpose of the page.
A common mistake when creating wireframes is starting to build screens without defining the purpose.
For example, even when creating an LP, the structure will change depending on the goal.
Increase inquiries
Increase document requests
Lead to product purchases
Help users understand service details
Increase job applications
If the purpose is different, the necessary information and user flow will also change.
If it is a page where you want to increase inquiries, the appeal of the service,
reliable track record, resolution of common concerns, and the placement of inquiry buttons become important.
If it is a recruitment page, the company atmosphere, job details, employee testimonials, benefits, and the application process become important.
First,
“What do you want the user to do on this page?”
Let's clarify that.
List the information to be posted
Next, list the information to be included on the page.
It is recommended to write down the necessary elements first, rather than thinking about the layout directly in Figma.
For example, for a service introduction page,
Service name
Service overview
Problems that can be solved
Features
Benefits
Introduction track record
Pricing
Frequently asked questions
Inquiry button
and so on.
At this stage, you don't need to worry too much about the order.
First, list out all the information that seems necessary.
After that,
What information should be shown first?
Where should information that resolves concerns be placed?
How many times should the inquiry button appear?
Organize the information by following this flow.
In addition to Figma, it is also useful to use FigJam to list information like sticky notes,
group them, and then transfer them into Figma Design.
FigJam is officially recommended as a collaborative tool for brainstorming and organizing ideas.
Decide on the page structure
Once you have listed the information, decide on the page structure.
On a website, users view information in order from top to bottom.
Therefore, the order in which you present information is extremely important.
For example, for a service landing page, the following structure can be considered.
1. メインビジュアル
2. 課題・悩みの提示
3. サービスの概要
4. 選ばれる理由
5. 実績・事例
6. 料金
7. よくある質問
8. お問い合わせWith this structure, the flow is to first attract interest, then empathize with concerns, have the user understand the service content,
and then show evidence of trust before leading them to an inquiry.
In a wireframe, you visually organize this flow.
Prioritize whether the flow of information is natural rather than the beauty of the design.
Decide on the frame size
When creating a wireframe in Figma, first decide on the frame size.
For websites, a width of 1440px or 1366px is often used for PC designs,
and a width of 375px or 390px is often used for smartphone designs.
However, the standards vary depending on the project and the production company.
You don't need to worry too much about the details from the start.
If you are a beginner, it is a good idea to start by creating them with a width of 1440px for PC and 390px for smartphones.
The important thing is to keep the sizes consistent within the same project.
If the frame widths vary from page to page, it will be difficult to design or code later on.
Setting up a grid
To create wireframes efficiently, it is recommended to use a grid.
A grid is like a set of guide lines displayed on the screen.
Figma's official documentation also explains that layout grids are visual aids that can be added to frames, helping to align objects accurately and maintain a logical and consistent structure.
In web design, it is important to align the positions and widths of elements.
By setting up a grid, it becomes easier to organize:
the starting position of headings
the width of images
the horizontal alignment of cards
the position of buttons
margins
and so on.
For example, a 12-column grid is often used for PC designs.
Placing elements according to the columns makes it easier to create a balanced layout.
Beginners should start by deciding on rules such as the following.
PC：コンテンツ幅 1100px〜1200px
スマホ：左右余白 20px
セクション上下余白：80px〜120px
カード間の余白：24px〜32pxBy setting standards for margins in this way, the entire wireframe will have a sense of unity.
Start with low-fidelity wireframes
Beginners tend to try to make things look polished from the very beginning.
However, you do not need to aim for high perfection in wireframes from the start.
Start with low-fidelity wireframes.
A low-fidelity wireframe is one that represents the structure using only rectangles and text, without including colors, photos, or detailed decorations.
For example,
images as gray rectangles
headings as bold text
body text as dummy text
buttons as simple rectangles
are sufficient.
At this stage, the goal is to verify the order of information and the validity of the layout rather than visual perfection.
When getting feedback from clients or the team, having fewer decorations makes it easier for them to focus on the structure.
Turn frequently used parts into components
To create wireframes efficiently in Figma, you should turn frequently used parts into components early on.
For example,
buttons
headings
cards
CTAs
headers
footers
Form fields
FAQ
and so on.
At the wireframe stage, there is no need to over-design the visuals.
However, it is useful to turn parts that are used repeatedly in the structure into components.
For example, if you have a CTA placed on multiple pages, you can update it just by modifying the original component when you want to change the text or button position.
This is especially effective for projects with many pages.
Using Auto Layout to prevent layout breakage
Auto Layout is also extremely useful when creating wireframes.
Figma officially describes Auto Layout as a feature that can be applied to frames to dynamically adjust designs based on content changes, making them responsive and easy to adapt.
For example, when placing
images
headings
body text
buttons
inside a card, using Auto Layout makes it easier to maintain the spacing between elements even if the amount of text changes.
Also, if you create buttons using Auto Layout, you can maintain the left and right margins even if the text changes.
In wireframes, the amount of text often changes later on.
Therefore, using Auto Layout results in data that is resilient to revisions.
For beginners, we recommend starting by using Auto Layout for the following parts.
ボタン
カード
FAQ
フォーム項目
横並びのメニュー
CTAエリアBe mindful of text volume
When creating wireframes, it is important to anticipate the amount of text to some extent.
A common mistake is creating them using only short dummy text, which causes the layout to break when the actual copy is inserted.
For example, you might assume a card description will be only one line, but it could actually end up being three lines.
Button text can also change, for instance,
from "View Details"
to
"Request Free Materials"
as it may end up being.
As you can see, the size and margins change when the actual text is inserted.
Therefore, it is recommended to create wireframes with text volumes as close to the real thing as possible.
Even if all the copy hasn't been finalized, it is safer to design with some flexibility, such as:
Headings around 20 characters
Body text around 2-3 lines
Anticipating longer text for buttons
as a way to ensure a safe design.
Thinking about mobile display early
If you create only the PC design first and think about mobile responsiveness later, the layout may break significantly.
Since most websites today are viewed on smartphones, it is crucial to consider mobile display at an early stage.
Creating both PC and mobile versions during the wireframe stage will make the subsequent design process much smoother.
For example, even if you have a 3-column card list on a PC, it will become a 1-column list on a smartphone.
Even if you have horizontal navigation on a PC, you might use a hamburger menu on a smartphone.
By organizing these differences early on, you can prevent major rework later.
Streamlining reviews with the comment feature
One of Figma's useful features is the comment function.
When sharing wireframes, if you have people add comments directly in Figma, the areas needing revision become clear.
For example,
I want to move this section up
I want to add a case study here
I want to change the wording of this button
I want to add a few more FAQs
You can leave comments like these on the relevant sections.
If you communicate only via email or chat, it can sometimes be difficult to understand exactly what is being discussed.
By leaving comments directly in Figma, you can reduce oversight and misunderstandings.
Don't over-detail your wireframes
One thing to be careful about when creating wireframes is not to over-detail them.
You might be tempted to add colors, photos, and fine decorations.
However, the purpose of a wireframe is not to create the final design.
The purpose is to confirm the structure and information architecture.
If you over-detail the design at this stage, the reviewer might get distracted by the colors and appearance,
which can prevent discussions about the structure that should be the primary focus.
For example,
I want this color to be brighter
The mood of the photo is different
I'm concerned about the rounded corners of the button
These kinds of comments might arise, causing the essential review of the information architecture to be pushed to the background.
Therefore, it is important to intentionally keep wireframes simple.
Procedures for creating wireframes that are easy to use in practice
Here, I will organize the flow of creating wireframes in Figma.
First, determine the purpose of the page.
Next, identify the necessary information.
After that, organize the order of the information to create the page structure.
Create a frame in Figma and set up a grid.
As a low-fidelity wireframe, roughly arrange elements using rectangles and text.
Turn frequently used parts into components and use Auto Layout to prevent them from breaking.
Create both PC and smartphone versions to check how they look in responsive design.
Finally, use the comment feature to have your team or client review it.
Following this flow will allow you to create wireframes efficiently.
Checkpoints when creating wireframes
Once the wireframe is complete, check the following points.
First, check if it aligns with the purpose of the page.
If it is a page intended to increase inquiries but there are too few inquiry buttons, improvements are needed.
Next, check if the order of information is natural.
Check if the information the user wants to know is being delayed, or if the content that should be conveyed first is visible.
Also, consistency in margins and layout is important.
Use grids and Auto Layout to verify that the positions of elements are aligned.
Furthermore, check to see if the mobile display is reasonable.
Even if it looks good on a PC, information can sometimes feel too crowded on a smartphone.
Finally, it is a good idea to check if the structure is easy to code.
Wireframes with clearly defined element groupings and organized sections are easier to handle in later stages.
Tips for Improving Efficiency in Figma
There are several tips for creating wireframes efficiently in Figma.
First, turn frequently used parts into templates.
Instead of creating them from scratch every time, prepare headers, footers, CTA, cards, forms, etc., in advance so you can reuse them for future projects.
Next, it is important to learn shortcuts.
For example, you can add Auto Layout by pressing Shift + A.
Just learning shortcuts for creating frames, duplicating, and aligning can significantly change your work speed.
Also, keeping text styles and colors minimally organized will result in a more readable wireframe.
Even if it is not a complete design, making the differences between headings, body text, and supplementary text clear will make it easier for reviewers to understand.
Summary
A wireframe is the blueprint for a website or app.
By organizing the order of information, layout, and user flow before creating the final design, you can reduce rework later on.
Using Figma allows you to proceed with wireframe creation efficiently.
By utilizing frames, grids, components, Auto Layout, and the comment feature, you can create wireframes that are easy to read, easy to modify, and easy to share.
For beginners, it is recommended to proceed in the following order.
Determine the purpose of the page.
Identify the necessary information.
Plan the page structure.
Create low-fidelity wireframes in Figma.
Turn frequently used parts into components.
Use Auto Layout to prevent layout breakage.
Check both PC and smartphone versions.
If you make this workflow a habit, creating wireframes in Figma will become significantly more efficient.
Wireframing is a process for organizing information design, not for refining the visual appearance.
That is why it is important to keep things simple at first, rather than obsessing over details from the start.
Let's use Figma to create wireframes that are easy to edit and share with the team.