How to Get Started on Figma

The first thing you need to do is create a new project. Once you’re logged into Figma, navigate to the left-hand panel and click “All Projects.” In this section, click “New Project” and give it a descriptive name. This will help keep things tidy as your project grows. If you’re collaborating with others, you can invite team members by entering their email addresses. For now, click “Create Project.”

Next, inside your new project, you can create a new design file by clicking “Create New” in the top-right corner and selecting “Design File.” This opens a blank canvas where your design journey begins. Don’t forget to rename your design file to keep it organized.

Pages in Figma are like chapters in a book—they help organise your design file. You can create different pages for various sections of your project, whether it’s a homepage, a product page, or multiple screens for an app.

To create a new page, go to the “Pages” panel at the left of your screen. Click the “+” icon to add a new page, and be sure to give each page a meaningful name. This keeps things clear, especially when your project gets more complex.

The Region Tool helps define specific areas of your design workspace, making it easier to organize, navigate, and structure your designs. It includes three key tools: Frame,  Section, and Slice. Here’s a quick breakdown of each:

• Frame: The Frame Tool is the backbone of your design. Frames act like containers that hold and structure your design elements. Think of them as artboards—they help define the boundaries of different screens, sections, or components. Frames also allow you to create responsive layouts that adjust to various device sizes, which is especially useful when designing for different platforms, like mobile and desktop.
• Section: Sections are perfect for grouping related frames or design elements. They allow you to logically organize your workspace, especially for complex projects with many components. By using Sections, you can visually separate parts of your design, making it easier to navigate and manage larger files. For instance, you can group all your header or footer designs into one section, which helps keep things organized.
• Slice: The Slice Tool is used to define specific areas for export. It’s useful when you want to export a part of your design, like a specific button, icon, or a section of your layout, without exporting the entire frame. Slices help you export assets precisely and efficiently, which is ideal for handing off design elements to developers.

Frames are the core of your design structure. Select the Frame Tool from the toolbar or press “F” on your keyboard. Click and drag on the canvas to create a frame, or choose a preset device size from the right sidebar for mobile, desktop, or tablet screens. To get started, let’s select a Mobile Screen preset (iPhone 16 screen size) to build a design for a mobile app.

Layout Grids are essential tools for maintaining structure and consistency in your design. They help align elements and keep everything neatly spaced. Whether you’re designing for mobile or desktop, using Layout Grids ensures your layout is clean and professional.

To set up a Layout Grid, select your frame, and navigate to the right sidebar. In the “Layout Grid” section, click the “+” icon to add a grid. Switch from “Grid” to “Columns” in the settings. Let’s refine the layout by setting the Count to 4, Margin to 16, and Gutter to 16. These adjustments will help ensure a consistent, organised design, making it easier to align your elements as you start designing.

So, that’s the basic setup in Figma! By creating a project, organising pages, using the Region Tools, and setting up Layout Grids, you’ve laid a strong foundation for your design. Stay tuned for our next post, where we’ll jump into designing your first screen. Thanks for following along!