Optional — Create digital wireframes in Figma

It’s an exciting time in the course because you are ready to create digital wireframes for your responsive website designs! You just watched Dave demonstrate how to create a digital wireframe for the library website he’s working on in Adobe XD. If Adobe XD is not available on your device, you can create your digital wireframes in Figma.

If you have been completing the courses of this certificate program in order, you’ve already created digital wireframes in Figma for your mobile app designs. You should be able to easily transition to create digital frames for a responsive website now!

As a reminder, here are some steps you can take to start creating digital wireframes in Figma:

1. Open the Figma web browser, and select the Design tab in the upper right corner.
2. You can 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 located in the toolbar at the top of the screen.
5. Under the Design tab, select Desktop 1440x1024. This will ensure you’re working with the right dimensions for a website design.
6. To add shapes: Click the Rectangle tool in the toolbar at the top of the screen. Draw a rectangle at the top of the frame that will become a navigation bar for your designs.
7. To add type: Select the Text tool, which has an icon that looks like a T and is 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 type to create the wireframe of a desktop version of your responsive website.

Check out the Figma Help Center for more detailed guidance on creating a wireframe.

You can also revisit this video about creating digital wireframes in Figma from earlier in the certificate program, when students designed a mobile app. Or, you can check out this article from Figma about how to wireframe.

Sources: Google UX Design Professional Certificate

Coursera | Responsive Web Design in Adobe XD