First Figma design - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ visualization

intermediate

Identify the best chart type for sales trends

You want to show how sales changed over the last 12 months. Which chart type in Figma best helps viewers see trends over time?

A Bar chart with monthly sales bars side by side

B Pie chart showing sales distribution by product

C Scatter plot with sales on one axis and months on the other

D Line chart showing sales points connected over months

💡 Hint

Think about which chart type connects points to show change over time.

A line chart is best for showing trends over time because it connects data points in order, making it easy to see increases or decreases.

❓ data_modeling

intermediate

Organizing data layers in Figma for BI dashboard

You are designing a BI dashboard in Figma. How should you organize your layers to keep the design clear and easy to update?

A Group related elements like charts, filters, and titles into separate frames or groups

B Put all charts and text on one layer to avoid confusion

C Use random layer order since Figma automatically manages it

D Place all text elements below all chart elements in the layer panel

💡 Hint

Think about how grouping helps you find and edit parts easily later.

Grouping related elements into frames or groups keeps the design organized and makes updates easier.

🧠 Conceptual

advanced

Understanding color contrast for accessibility in BI dashboards

Why is it important to use high color contrast in your Figma BI dashboard designs?

A It ensures that all users, including those with vision impairments, can read the data clearly

B It makes the dashboard look more colorful and attractive

C It reduces the file size of the Figma design

D It allows you to use more colors without restrictions

💡 Hint

Think about users who might have trouble seeing certain colors.

High color contrast helps users with vision difficulties read text and data clearly, making your dashboard accessible to everyone.

🎯 Scenario

advanced

Designing a responsive BI dashboard layout in Figma

You want your BI dashboard to look good on both desktop and mobile screens. What is the best approach in Figma to design this?

A Design only for desktop and let users zoom out on mobile

B Create separate frames for desktop and mobile layouts and adjust elements accordingly

C Use fixed sizes for all elements so they don’t change on different screens

D Design only for mobile since most users use phones

💡 Hint

Think about how different screen sizes need different layouts.

Creating separate frames for desktop and mobile lets you customize the layout for each screen size, ensuring usability and clarity.

🔧 Formula Fix

expert

Fixing overlapping elements in a Figma BI dashboard

Your Figma BI dashboard has overlapping charts and text that make it hard to read. Which option correctly fixes this issue?

A Delete the overlapping elements to remove clutter

B Send the text layer to back so charts appear on top

C Group the overlapping elements and apply auto layout with spacing between them

D Increase the opacity of all layers to 50% so overlaps are less visible

💡 Hint

Think about how to keep all elements visible and spaced nicely.

Using auto layout with spacing in a group arranges elements neatly and prevents overlap, improving readability.

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