Mastering Foundational Skills to Create Mockups in Figma

Are you excited to embark on your journey to create stunning mockups in Figma? Before diving into the creative process, it’s crucial to grasp the fundamental skills that will lay the groundwork for your Figma adventures. In this guide, we’ll explore these foundational skills step by step, ensuring that you have a strong footing in Figma’s interface and functionalities.

Getting Started: Create a New Page

The very first step in your Figma journey is to create a new page. A page serves as the canvas where you’ll bring your design ideas to life. Here’s how to do it:

  1. Log in to Figma: If you’re not already logged in, make sure to do so.
  2. Create a New File: Look for the “+” icon in the upper right corner of your screen and click on it. This action will initiate a new file where your designs will reside.
  3. Access Pages: On the left side of your workspace, you’ll find “Page 1,” which represents the default page. It’s here where all your pages will be listed.
  4. Add a New Page: To create a new page, click on the “+” icon next to “Page 1.” This will add a fresh page to your file, ready for your creative touch.Screenshot of Figma UI showing layers and how to rename them
  5. Renaming Pages: You can instantly rename your new page or any existing one by double-clicking its title. The text will be highlighted in blue, and the row will be outlined in blue, making it easy to edit.

To further explore the page creation process, consider checking out this comprehensive tutorial from Figma. It offers detailed steps on creating pages, duplicating them, managing your pages, and more.

Explore Figma’s Page Tutorial

Creating Frames: The Foundation of Your Design

Now that you have your canvas set up, it’s time to create frames, which will serve as the structure for your designs within Figma. Think of frames as picture frames hanging on a blank wall (the canvas). Here’s how to create frames:

  1. Select the Frame Tool: In your toolbar, look for the icon with four lines crossing in a grid pattern. It’s the third icon from the left and represents the frame tool.The toolbar on Figma with the frame icon highlighted
  2. Choosing Frame Size: You have several options for determining the size of your frame:
    • Clicking inside the canvas will create a default frame with dimensions of 100×100 pixels.
    • Click and drag within the canvas to create a frame with custom dimensions. Width and height will adjust automatically based on your drag distance. If you need precise measurements, use the Frame section in the Design panel on the right side of the screen.
    • Select a predefined size for your frame, such as specific phone models or tablets, from the Design panel’s list on the right side.

    On Figma, the frame button is highlighted to the left, and the template sizes are to the right, including phone, tablet, desktop, presentation, and watch.

For a more in-depth understanding of creating and utilizing frames, you can explore this Figma tutorial:

Learn More About Figma Frames

You Have the Tools: A UX Designer’s Journey

As you embark on your journey with Figma, remember that these foundational skills will be your tools in crafting exceptional digital mockups. Whether you’re a UX designer or working in a similar field, mastering Figma and its features will empower you to create mockups efficiently. Importantly, the knowledge you gain in Figma is transferable to other digital design tools.

Before you start designing, here’s a pro tip: Open multiple windows to view your files simultaneously. This allows you to work on different files without closing your current one. To create a new window, simply right-click on the “Files” in your “Draft and Recent” folders and select “Open in a new tab.”

Additional Resources

For those looking to speed up their design process and become Figma pros, utilizing keyboard shortcuts is a must. Check out the website, which has compiled a list of useful Figma shortcuts.

Explore Figma Keyboard Shortcuts

Additionally, Figma offers a library of preloaded device sizes, making it easier for you to design for various screen dimensions and platforms. You can also download a library of device sizes to expand your design capabilities.

Access Figma’s Device Size Library

With these foundational skills and resources at your disposal, you’re well on your way to becoming a proficient Figma user and a skilled digital mockup creator. Happy designing!