For any aspiring UX designer, being able to create a prototype with Figma is essential. An interactive depiction of your product concept is called a prototype. You can quickly share your Figma prototype with others by sending them a link, which enables them to view and interact with your design in real time.

Simple wireframes to intricate, multi-page programs are examples of prototypes. Consider Instagram, which features a plethora of pages and interactions. Even with this complexity, the fundamental interactions are still the same. I'll go over the fundamentals of making a fantastic prototype today, with an emphasis on four important interactions: modals, cross-page interactions, component-level horizontal scrolling, and page-level vertical scrolling.

Setting Up Your Workspace

Launch Figma first, then make a new file called "Prototype Practice." Create a frame for your workspace that corresponds to the screen size of your mobile device.

1. Add Basic Elements:

To illustrate the application header, start with a rectangle at the top. To increase contrast, change the fill color to a deeper gray and add a text box with the label "Header."

2. Design the Footer:

Place a copy of the header at the bottom of the frame with the label "Footer." To symbolize icons, add three rectangles to the footer.

3. Add Content Cards:

Make a content card by creating a rectangle. To create the appearance of numerous cards on the app's homepage, copy and paste this rectangle three times.

Basic Interactivity

1. Enter Prototype Mode:

To set the device to your phone, click "Prototype" in the upper right corner.

2. Play the Prototype:

Click the play icon after selecting the whole frame. At this point, you have a simple, static prototype.

Adding Interactivity

Page-Level Vertical Scroll

1. Extend the Frame:

To fill the longer frame, choose the frame, make it longer, and then add more content cards.

2. Fix Header and Footer:

After grouping the header and footer components, select each one's "Fixed Position" option. They will remain motionless when scrolling as a result.

3. Test the Scroll:

Once the header and footer are fixed, play the prototype again to see the vertical scrolling in action.

Component-Level Horizontal Scroll

1. Narrow the Cards:

To make more cards side by side, make the first one thinner and then replicate it.

2. Frame the Cards:

Combine these cards into a single new frame, change the size of the frame to accommodate the mobile device, and activate "Horizontal Scrolling" in the prototype configuration.

3. Test the Scroll:

To see the horizontal scroll feature, play the prototype.

Cross-Pages Interaction

1. Create Multiple Pages:

Duplicate your initial frame to create a second page with different content.

2. Link the Pages:

In prototype mode, select an icon from the first page and drag the interaction handle to the second page. Do the same for an icon on the second page, linking it back to the first page.

3. Test the Navigation:

Play the prototype and click the icons to navigate between pages.

Modals

1. Create a Modal Frame:

Design a smaller frame to act as a modal and populate it with relevant content.

2. Link the Modal:

In prototype mode, link an icon or button from one of your pages to the modal frame, setting the interaction to "Open Overlay."

3. Enhance the Modal:

Add a background behind the overlay and enable closing the modal by clicking outside of it.

4. Test the Modal:

Play the prototype and trigger the modal to see the overlay effect.

Advanced Tips for Prototyping

1. Use the Figma Mobile App:

Download the Figma app on your mobile device and use the "Mirror" feature to view your prototype in real-time on your phone.

2. Utilize Components:

Make a component for features like navigation bars that span many screens. This ensures consistency and saves time by enabling you to edit the component only once and have changes reflected in all instances.

3. Shadow User Interactions:

Provide a user with a link to your prototype so you may monitor their interactions with it in real time. This helps you understand how users engage with your design and identify possible areas of concern.

Conclusion

Now that you understand the fundamentals of building a Figma prototype, you may incorporate modals, cross-page navigation, and both horizontal and vertical scrolling. You may produce interactive, user-friendly prototypes that clearly convey your design concepts by becoming an expert in these fundamental interactions. Try building a five-page prototype of your favorite app as a practice project. To keep developing your abilities, show off your work and offer criticism on other people's ideas. Have fun creating!