First Figma design - Step-by-Step Guide

Introduction

This feature helps you create your first design in Figma. It solves the problem of starting a new project by guiding you through making a simple layout with shapes and text.

When you want to create a dashboard mockup for a business report

When you need to design a simple chart layout before building it in Power BI

When you want to share a visual idea of a report page with your team

When you want to practice basic design skills for BI presentations

When you need to create a wireframe for a data visualization project

Steps

Step 1: Click

- Figma home screen on 'New File' button

A blank design canvas opens ready for your first design

💡 You can also press Ctrl+N (Cmd+N on Mac) to create a new file quickly

Step 2: Select

- Toolbar on the left, click the 'Frame' tool (looks like a square)

You can draw a frame on the canvas which acts like a page or screen

💡 Frames help organize your design and set boundaries for your layout

Step 3: Click and drag

- Canvas area

A rectangular frame appears on the canvas with adjustable size

💡 You can resize the frame later by dragging its edges

Step 4: Select

- Toolbar, click the 'Rectangle' shape tool

You can add shapes inside your frame to represent charts or buttons

💡 Use shapes to build simple placeholders for your dashboard elements

Step 5: Click and drag

- Inside the frame on the canvas

A rectangle shape appears inside the frame

💡 Resize and move the shape to position it where you want

Step 6: Select

- Toolbar, click the 'Text' tool (T icon)

You can add text labels to your design

💡 Text helps explain what each part of your design means

Step 7: Click inside the frame

- Canvas area

A text box appears where you can type

💡 Type a title or label for your dashboard or chart

Before vs After

Before

Figma home screen with no files open

After

Blank canvas with a frame, a rectangle shape, and a text label arranged as a simple dashboard layout

Settings Reference

Frame size

📍 Right sidebar under 'Design' tab when frame is selected

Defines the size of your design page or screen

Default: Blank frame with no size until set

Fill color

📍 Right sidebar under 'Design' tab when shape or frame is selected

Sets the background color of shapes or frames

Default: Transparent for frames, solid color for shapes

Text font and size

📍 Right sidebar under 'Text' section when text is selected

Controls how your text looks in the design

Default: Roboto, 12pt

Common Mistakes

Not selecting the frame before adding shapes or text

Shapes and text may appear outside the intended design area and cause confusion

Always click inside the frame or select the frame before adding elements to keep them organized

Using very small text size that is hard to read

Text becomes unreadable and the design loses clarity

Use at least 12pt font size for labels and titles for better visibility

Summary

Create your first design by opening a new file and adding a frame as your page

Use shapes and text tools to build a simple layout representing your BI dashboard

Remember to organize elements inside frames and use readable text sizes

Practice

1. What is the main purpose of using Figma in Business Intelligence dashboard projects?

easy

A. To perform data cleaning and transformation

B. To write SQL queries for data extraction

C. To plan and share dashboard designs before building

D. To run complex data models and calculations

Solution

1. Step 1: Understand Figma's role in BI projects

   Figma is a design tool used to create and share visual layouts before actual development.

2. Step 2: Compare options with Figma's function

   Only planning and sharing dashboard designs fits Figma's purpose; others relate to data processing.

3. Final Answer:

   To plan and share dashboard designs before building -> Option C

4. Quick Check:

   Figma = design planning and sharing [OK]

Hint: Remember: Figma is for design, not data processing [OK]

Common Mistakes:

• Confusing Figma with data tools like SQL or Excel
• Thinking Figma runs calculations or data models
• Assuming Figma cleans or transforms data

2. Which of the following is the correct way to create a frame in Figma?

easy

A. Import a frame from Excel

B. Write <frame> tags in the code editor

C. Use the SQL command CREATE FRAME

D. Select the Frame tool and drag on the canvas

Solution

1. Step 1: Identify how frames are created in Figma

   Frames are created by selecting the Frame tool and dragging on the canvas area.

2. Step 2: Eliminate incorrect options

   Options A, B, and C relate to Excel, coding, or SQL, which are not how Figma frames are made.

3. Final Answer:

   Select the Frame tool and drag on the canvas -> Option D

4. Quick Check:

   Frame creation = Frame tool drag [OK]

Hint: Use the Frame tool button, not code or SQL [OK]

Common Mistakes:

• Trying to code frames instead of using the tool
• Confusing Figma with programming or database commands
• Looking for import options instead of drawing

3. Given a Figma design with a frame containing a rectangle and a text label, what will happen if you move the frame?

medium

A. The frame and all its contents move together

B. Only the frame moves, rectangle and text stay in place

C. Only the rectangle moves, text stays fixed

D. The text moves but the rectangle stays fixed

Solution

1. Step 1: Understand frame grouping in Figma

   A frame groups its contents so moving the frame moves everything inside it.

2. Step 2: Apply this to the rectangle and text inside the frame

   Both rectangle and text are inside the frame, so they move together with it.

3. Final Answer:

   The frame and all its contents move together -> Option A

4. Quick Check:

   Frame moves contents together = The frame and all its contents move together [OK]

Hint: Remember: Frames act like groups moving all inside [OK]

Common Mistakes:

• Thinking only the frame moves but contents stay
• Assuming individual elements move separately
• Confusing frames with layers that are not grouped

4. You created a component in Figma but when you edit one instance, the others do not update. What is the likely problem?

medium

A. You edited an instance instead of the main component

B. You forgot to save the file

C. You need to restart Figma to apply changes

D. Components cannot be edited after creation

Solution

1. Step 1: Understand component behavior in Figma

   Editing the main component updates all instances; editing an instance changes only that one.

2. Step 2: Identify the cause of no update

   If other instances don't update, likely you edited an instance, not the main component.

3. Final Answer:

   You edited an instance instead of the main component -> Option A

4. Quick Check:

   Edit main component to update all instances [OK]

Hint: Edit main component, not instances, to update all [OK]

Common Mistakes:

• Editing instances expecting all to update
• Thinking saving or restarting fixes component updates
• Believing components are uneditable after creation

5. You want to share your Figma dashboard design with a team member for feedback but want to restrict editing. Which sharing option should you choose?

hard

A. Export as PNG and email it

B. Share with 'Can view' permission

C. Share with 'Can edit' permission

D. Duplicate the file and send the copy

Solution

1. Step 1: Understand Figma sharing permissions

   'Can view' allows others to see but not change the design; 'Can edit' allows changes.

2. Step 2: Choose the option that restricts editing but allows feedback

   Sharing with 'Can view' lets team members comment and review without editing.

3. Final Answer:

   Share with 'Can view' permission -> Option B

4. Quick Check:

   Restrict editing = 'Can view' sharing [OK]

Hint: Use 'Can view' to share without edit rights [OK]

Common Mistakes:

• Giving 'Can edit' permission by mistake
• Sending static images instead of live designs
• Duplicating files unnecessarily causing confusion