How to Create Mockups in Figma?

Creating mockups in Figma is a straightforward process that allows you to showcase your designs in a realistic context. Here's a step-by-step guide:

1. Prepare Your Assets: Gather the device image (e.g., a phone, laptop) you want to use for the mockup and the design you want to display on the screen. This design can be a frame or an image already in your Figma file, or you can upload a new one.

2. Add the Device Image: Import or paste the device image into your Figma canvas. This will be the frame for your mockup.

3. Create a Screen Rectangle: Use the Pen tool (or the Rectangle tool, but the Pen tool offers more flexibility for angled screens) to draw a shape that closely matches the screen area of the device in the image. This rectangle will be the destination for your design.

4. Select the Destination (Screen Rectangle): Ensure the rectangle you just created is selected.

5. Select the Source (Your Design): Choose the frame or image you want to display on the screen. This is the design you'll be projecting onto the device.

6. Use a Plugin (Example: Mockuuups Studio or Artboard Studio): While Figma doesn't have a built-in "transform" feature for mockups like this directly, you'll need to use a plugin.

   • Install a Plugin: Go to the Figma Community and search for mockup plugins like "Mockuuups Studio" or "Artboard Studio." Install one that suits your needs. These plugins often have free tiers with limitations and paid tiers for expanded access.
   • Run the Plugin: After installation, select both your device image (the one with the screen) and your screen design (the frame). Then, run the installed plugin from the Plugins menu.
   • Adjust the Mockup: The plugin will typically automate the process of projecting your design onto the screen. You may have some control over the perspective, lighting, and other elements to refine the mockup's realism. Follow the specific plugin's instructions.

Alternative Method (Manual Perspective Transformation):

This method is more manual and time-consuming, but it doesn't require a plugin.

1. Create a Screen Rectangle: As before, create a rectangle matching the device's screen.

2. Convert to Vector: Right-click on the rectangle and select "Edit Vector."

3. Adjust Points: Individually drag the corners of the rectangle to match the perspective of the device's screen. This requires a careful eye to get the perspective correct.

4. Apply Image as Fill: Select the rectangle. In the "Fill" settings, choose "Image" instead of a solid color.

5. Choose Image: Upload your screen design as the image fill.

6. Adjust Fill Settings: Use the fill settings (Fit, Fill, Crop, Tile) to appropriately display the design within the warped rectangle. "Fit" is often a good starting point.

Key Considerations:

• Resolution: Use high-resolution images for both the device frame and your design to ensure a crisp and professional-looking mockup.
• Lighting and Shadows: Pay attention to the lighting and shadows in your device image. Add subtle shadows to your screen design to make it blend seamlessly. Some plugins help with this automatically.
• Perspective: Accurately matching the perspective of the device screen is crucial for a realistic mockup. Take your time with this step, especially if using the manual method.

By following these steps, you can easily create realistic and visually appealing mockups in Figma to showcase your designs.