The previous article walks you through creating digital wireframes in Adobe XD. In this article, we will walk you through creating digital wireframe in Figma. The interface of the two program is similar, so it should not be a big deal to switch from one program to the next one. As a reminder, there is no ground on the choice of the program. Gaining experience in designing is much more important on the program itself because most of the stuff you can literally Google for it.

Here are some steps to start creating digital wireframes in Figma:

1. Open the Figma web browser, and select the Design tab.

2. Import photos of the paper wireframes you created earlier, by dragging and dropping the photos onto the Canvas. Photos of your paper wireframes can be used as a guide when creating digital wireframes.
3. Create a name for the new page where you’ll create digital wireframes for a responsive website.
4. Click the Frame tool, which has an icon that looks like a hashtag and is the third icon from the left in the toolbar at the top of the screen.

5. Under the Design tab in the upper right corner, select Desktop 1440×1024.

6. To add shapes: Click the Rectangle tool, which is directly to the right of the Frame tool in the toolbar at the top of the screen. Draw a rectangle at the top of the frame that will become a naviation bar for your designs.

7. To add type: Select the Text tool, which has an icon that looks like a T and is the sixth icon from the left in the toolbar at the top of the screen. Click and drag within the frame to create a text box. Then, type on your keyboard to add text to the wireframe. You can adjust the text style and font size for each text grouping in the Text section in the right panel.

8. Continue to add shapes and types to create the wireframe of a desktop version of your responsive website.

Creating wireframes for additional screen sizes in Figma

Designing a responsive website means adjusting your digital wireframes to fit well on different screen sizes. The desktop version of a responsive website can include more content since the screen size is large, but the layout of the page will need to change when users access the website on a device with a smaller screen size, like a mobile phone or tablet.

To design the responsive website for this course in Figma, follow these steps to create digital wireframes for additional screen sizes:

1. Start by adjusting the layout of the homepage of your responsive website. Open the desktop version of your digital wireframes in Figma.
2. Click the Frame tool, which has an icon that looks like a hashtag and is the third icon from the left in the toolbar at the top of the screen.
3. Under the Design tab in the upper right corner of the screen, select mobile phone sized frame.
4. Create a name for these new wireframes, such as “Mobile phone version.”
5. To create a hamburger menu: Click the Rectangle tool, which is directly to the right of the Frame tool in the toolbar at the top of the screen. Draw a short, narrow rectangle in the top left of the frame. In the right panel, click Fill and choose a color for the rectangle, like dark gray. Copy and paste the rectangle two times, and create equal spacing between the three rectangles, to represent the hamburger menu.
6. To name a group of items: For example, name the group of three rectangles that represents the hamburger menu. Click the first rectangle, and hold down the Shift key on your keyboard while clicking the other two rectangles. Right click and select “Group.” In the Assets panel on the left side of the screen, name this group “Hamburger menu.”
7. To create a flyout menu: Click the homepage wireframe, and copy and paste it. Name the new, pasted version “Flyout menu”. Remember, the flyout menu can hold information that won’t fit on the mobile version of the website homepage. To move icons or information into the flyout menu, click each element and drag it onto the “Flyout menu” page.
8. To add icon placeholders: Click the Rectangle tool in the toolbar at the top of the screen, and select “Ellipse” to create a circle. You might want to use icons to represent important information in the mobile phone version of your responsive website, like Search or Cart.

Overall, creating wireframes for additional screen sizes in Figma is very similar those in Adobe XD. When creating addtional wireframes, be sure to consider ajustments to the layout of the website for a smaller screen size. For example, you might need to reduce the number of columns of content, to just one or two columns, in the mobile version of the responsive website. Or, you might need to vertically stack information in the mobile version that was listed side-by-side horizontally in the desktop version.

To learn more, visit this article on How to wireframe by Figma.

Good luck!