How Do You Make a Perspective Mockup in Figma?

As an aspiring UX/UI designer, one of the most important skills to learn is how to create a perspective mockup in Figma. A perspective mockup allows you to demonstrate the design of a product or website in three-dimensional space, showing how it will look from different angles. This can be extremely useful for communicating design ideas and gaining feedback from stakeholders. Fortunately, Figma provides several tools that make it easy to create a realistic perspective mockup quickly and effectively.

Step 1: Set Up Your Scene

To get started with your perspective mockup, you’ll need to set up your scene. This includes setting up a background image or color, adding any desired shadows and lighting effects, and adding any other elements that may be relevant to the design. You can also add a third-dimensional grid to give your mockup more depth.

Step 2: Add Your Elements

Once your scene is set up, you’ll need to add your elements. When working in Figma, you can add 3D shapes or imported images into the canvas.

You can also use the “Perspective” tool to rotate and move elements around in three-dimensional space. Be sure to pay attention to the placement of shadows and highlights, as they will help create visual depth.

Step 3: Animate Your Mockup

Once all of your elements are added into the canvas, you can animate them as desired. This is an optional step but it can help make your mockup look even more realistic by adding movement and life into it. You can use keyframes or the timeline panel in Figma for this purpose.

Step 4: Export Your Mockup

When you’re done creating your perspective mockup, you’ll need to export it for presentation purposes. In Figma, there are several options for exporting including exporting as an image file or as an animated GIF or video file. Depending on how you intend on using the mockup, choose whichever format is most appropriate.


: Creating a perspective mockup with Figma is relatively straightforward when following these steps: set up your scene; add elements; animate; and then export for presentation purposes. With its intuitive user interface and powerful tools, Figma makes it easy for aspiring UX/UI designers like yourself to quickly create engaging perspective mockups that effectively communicate design ideas.