Scribd
Upload
91 views10 pages

Prog 7

This document outlines the steps for designing and prototyping a dashboard UI using Figma, including creating a wireframe, adding statistics and graphs, and implementing dropdown menus. It provides detailed instructions on setting up a Figma account, understanding the interface, and creating interactive components with variants and interactions. The final step emphasizes testing the prototype and sharing it for feedback.

Uploaded by

deadshotlev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
91 views10 pages

Prog 7

This document outlines the steps for designing and prototyping a dashboard UI using Figma, including creating a wireframe, adding statistics and graphs, and implementing dropdown menus. It provides detailed instructions on setting up a Figma account, understanding the interface, and creating interactive components with variants and interactions. The final step emphasizes testing the prototype and sharing it for feedback.

Uploaded by

deadshotlev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

EXPERIMENT 7

Dashboard Design: Create a wireframe, Design and Prototype Dashboard UI


page, add some Dashboard details, statistics and graphs, Add dropdown options
for some dashboard details.

Pre-requisites:
o A computer with internet access.
o A Figma account (Sign up at figma.com).
o Basic knowledge of using a computer and web browser.

Step 1. Creating a Figma Account and Setting Up a New Project


o Open your web browser and go to figma.com.

o Click on Downloads and download for Windows or Mac.

o Finish the installation process.


o Click on Sign Up (if you don’t have an account) and complete the registration process.
o After logging in, click on New File to create a blank Figma project.
o Your new canvas will open with an empty workspace.

Step 2. Understanding the Figma Interface


o Left Panel: Layers and components.

o Bottom Toolbar: Tools to create and modify shapes.


o Right Panel: Properties and styling options.

o Canvas: The main working area where UI elements are placed.

Step-by-Step Guide to Designing & Prototyping a Dashboard in Figma

Step 1: Setting Up the Wireframe

o Open Figma and create a new Frame (Press F).

o Select a desktop frame size (e.g., 1440x1024).


Step 2: Designing the UI

1. Navigation Bar

o Create a Rectangle (R) with a width matching the frame.

o Add Text (T) for menu items like the Dashboard Name.

o Use Auto Layout to ensure items are evenly spaced.

o Add Icons using Figma’s built-in library or from plugins like "Material Design Icons"
for additional options, such as Profile.

o Convert the entire nav bar into a Component (Ctrl + Alt + K) for reuse.

Step 3: Main Content Area (Dashboard Statistics & Graphs)

o Create cards for key statistics (Total Sales, Sales Growth Rate, Average Sales).

o Use a rectangle with rounded corners.

o Add an icon, a number, and a label inside the card.

o Insert graphs using Figma’s Chart plugins (or use line, bar, and pie charts).

1. Dropdown Menus (Filters & Options)

o Create a button with text (e.g., "Filter by Years").

o Add a small chevron-down icon for the dropdown indicator.


o Duplicate and create a hidden dropdown list that appears when clicked.

o Use Auto Layout (Shift + A) for dropdown items to keep them dynamic.

o Add variants to the dropdown list.

2. Create the Dropdown Options

o Below the button, create multiple rectangles (R key) for the options:

• 2014-2016

• 2016-2019

• 2019-2022

• 2022-Present

• All Time

o Ensure each rectangle has the same width and consistent height (e.g., 40px).

o Add text (T key) inside each rectangle and centre-align it.

o Adjust the background colour and spacing.

3. Convert to a Component

o Select the entire dropdown (button + options).

o Click "Create Component" (Ctrl + Alt + K).

o Rename it to Dropdown in the layers panel.


4. Create Variants for Different States

o With the component selected, click "Add Variant" in the right panel.

• Create these states:

• Collapsed (Only button visible)

• Expanded (Options visible)

• Hovered Option (Change background color of an option)

• Selected Option (Highlight one option)

• Adjust properties for each variant.

5. Add Interactions

o Select the dropdown button.

o Click "Prototype" and set an "On Click" → "Change to Expanded Variant."

o For each option, set an "On Click" → "Change to Selected Variant."

o For hover effects, use "While Hovering" → "Change Background Color."

6. Test & Adjust

o Click "Present" (Play button on the top right).

o Test the interaction by clicking and hovering.

o Adjust padding, spacing, or colours if needed.


Step 3: Prototyping & Interactions

Prototyping & Interactions for the Dropdown and Variants in Figma

After creating the dropdown component and its variants, follow these steps to add prototyping
interactions:

1. Define the Variants

Ensure you have the following variants in your dropdown component:

o Collapsed (Default State) – Only the button is visible.

o Expanded (Open State) – Dropdown options appear.


o Hover Option – Background color changes when hovering over an option.

o Selected Option – One option is highlighted when clicked.

2. Set Up Interactions in Prototype Mode

Switch to Prototype mode (Shift + P) and do the following:

A. Toggle Between Collapsed & Expanded

1. Select the dropdown button in the Collapsed Variant.

2. In the Prototype panel, click “+” and set:

o Interaction: "On Click"

o Action: "Change to"

o Target: Expanded Variant

o Animation: "Smart Animate" (or "Instant" for no animation)

3. Select the dropdown button in the Expanded Variant.

4. In the Prototype panel, click “+” and set:

o Interaction: "On Click"

o Action: "Change to"

o Target: Collapsed Variant

o Animation: "Smart Animate"

B. Add Hover Effect for Options

1. Select any option (e.g., "2014-2016") in the Expanded Variant.

2. Click “+” in Prototype Mode.

3. Set:

o Interaction: "While Hovering"

o Action: "Change to"

o Target: Hover Option Variant


o Animation: "Smart Animate"

4. Repeat for all options.

C. Selecting an Option

1. Select an option (e.g., "2014-2016") in the Expanded Variant.

2. Click “+” in Prototype Mode.

3. Set:

o Interaction: "On Click"

o Action: "Change to"

o Target: Selected Option Variant

o Animation: "Smart Animate"

4. Repeat this for each option, making sure the selected variant updates.

D. Auto-Close After Selection

1. For each option in the Selected Variant, add another interaction.

2. Click “+” in Prototype Mode.

3. Set:

o Interaction: "On Click"

o Action: "Change to"

o Target: Collapsed Variant

o Animation: "Smart Animate"

3. Testing the Prototype

1. Click the Play Button (Present mode) in the top-right corner.

2. Test:

o Clicking the dropdown button should open/close it.

o Hovering over options should change their background.


o Clicking an option should highlight it and close the dropdown.

Step 4: Testing the Prototype

1. Click on the Play button (top-right) to preview interactions.

2. Adjust interactions if necessary.

3. Share the prototype link with teammates for feedback.

You might also like