Design a Student Dashboard in Figma

Apply 6 core design principles to build a polished student dashboard in Figma.

Introduction

30 Second Summary

Every time you open an app and instantly know where to look, a handful of design principles are doing the work behind the scenes. These principles guide where your eye goes, what feels grouped together, and what stands out.

In this project, you will design a complete Student Dashboard in Figma, applying the 6 core design principles to build a professional interface from scratch.

What You'll Build

Present your finished dashboard and viewers will see a polished desktop interface where a bold welcome header, student stats, a course card grid, paired content panels, and a weekly schedule all sit on a shared grid and spacing system that makes every section feel cohesive and deliberate.

By the end of this project, you'll have:

A welcome banner and profile summary where a bold serif greeting towers over small caption text, showcasing Contrast and White Space that give the dashboard a clear visual entry point.
A grid of course cards built as a reusable component, where card spacing stays perfectly consistent regardless of content length thanks to Repetition and Alignment through Auto Layout.
Side-by-side assignment and announcement panels plus a weekly calendar that demonstrate Proximity and Balance, pulling all 6 principles together into one cohesive layout.
Secret Mission: Create component variants for your course card with default, in-progress, and completed states, each with distinct visual treatments.

Are there any prerequisites?

This project assumes you have a free Figma account and basic familiarity with frames, layers, and the right sidebar. If you've never used Figma before, try a quick beginner tutorial first.

Before We Start

Before We Start...

Before you open Figma, let's lock in what you're about to build and why it matters. This step is your moment to commit to the dashboard you'll design and the six design principles that will guide every decision.

Set Up the Figma File and Design System Foundation

You are about to design a complete Student Dashboard in Figma. Over the next few steps, you will build six distinct sections that each demonstrate a core design principle.

Without a shared grid, spacing system, and defined styles, every section you build would drift into inconsistent spacing and arbitrary color choices. Setting up the design system foundation first means every element you place snaps to a predictable system.

In this step, get ready to:

Create a 1440 x 1024px desktop frame with a 12-column layout guide and 8-point baseline grid.
Define reusable color styles and text styles that enforce consistency across every section.

Create the desktop frame and add the 12-column layout guide

Layout guides are visual overlays in Figma that help you align elements to a consistent grid structure. You will set up two: a 12-column guide for horizontal alignment and an 8-point uniform grid for vertical rhythm.

Open Figma at figma.com and sign in (or open the Figma desktop app if you have it installed).
From the Figma home page, create a new design file.

A blank canvas opens in the editor.

Select the Frame tool from the toolbar at the top of the canvas.
Click anywhere on the canvas to place a frame.
In the right sidebar, set W (width) to 1440 and H (height) to 1024.
Double-click the frame name at the top left of the canvas and rename it to Student Dashboard.

You should see an empty white rectangle on your canvas labeled Student Dashboard.

With the Student Dashboard frame selected, click Add layout guide in the Layout guide section of the right sidebar.

Figma applies a uniform grid by default. You need to change this to a column layout guide.

Click the Layout guide settings icon (next to the layout guide entry you just added) to open its settings.
Change the type from Grid to Column.
Set Count to 12.
Set Type to Stretch.
Set Margin to 72.
Set Gutter to 24.

You should see a pink or red column overlay appear on your frame, showing 12 evenly spaced columns with margins on each side.

What do these numbers mean?

This gives you 12 columns of approximately 86px each, with 72px margins on each side and 24px gutters between columns. Every spacing value (72, 24) is a multiple of 8.

The Stretch type means column widths adapt automatically if you ever resize the frame. The Width field is disabled and set to Auto because Figma calculates each column's width for you.

Click Add layout guide again to add a second layout guide to the same frame.
Keep the default Uniform grid type.
Set the Size to 8.

An 8px dot grid now appears across the entire frame, layered over the column overlay.

What does the 8-point grid do?

The 8-point grid is your baseline for vertical rhythm and spacing. Every padding value, gap, and margin you use in this project (8, 16, 24, 32, 48, 72px) is a multiple of 8.

This makes spacing decisions predictable. Instead of eyeballing gaps, you snap to the nearest 8px increment.

Don't see the grid overlay?

Make sure the Student Dashboard frame itself is selected, not a layer inside it. Layout guides are applied to frames, not individual elements.

If the overlay was visible but disappeared, press Shift+G to toggle layout guide visibility back on. You can also click the eye icon next to each layout guide in the right sidebar to show or hide it individually.

Still stuck? Ask for help here.

Define the color palette and type scale as reusable styles

Styles in Figma let you save a set of properties (like a specific color or font configuration) under a reusable name. Once defined, you can apply a style to any element with one click instead of re-entering hex codes or font sizes manually.

Click on an empty area of the canvas so nothing is selected.
In the right sidebar, click the + icon next to Local styles.
Select Color.
Name the style Primary / Blue and set the hex value to #1E3A8A.
Click Create style.

What is the slash naming convention?

The slash in Primary / Blue tells Figma to organize the style into a folder. Every slash creates another level of nesting.

Your color styles will automatically group into Primary and Neutral folders, keeping the palette organized as it grows.

Repeat this process to create the remaining 7 color styles:

Click on an empty area of the canvas again to deselect everything.
Check the Local styles section in the right sidebar. You should see 8 color styles organized into Primary and Neutral folders.

Select the Student Dashboard frame by clicking on it.
In the Fill section of the right sidebar, click the color swatch.
Click the style icon (four dots) in the color picker, then select your Neutral / White style to apply it.

The frame background is now linked to your Neutral / White style rather than a raw hex value. If you ever change that style, the frame updates automatically.

Why styles instead of variables?

Figma also offers variables, which store single raw values and support multiple modes (like light and dark themes). Styles hold a composite set of properties expressed all at once.

For a project focused on visual design principles, styles are simpler and more direct. Variables add theme-switching scalability that would distract from the core learning goal here.

Now you will create your text styles using two font families: Inter for all UI text and Playfair Display for the welcome heading. Both are available through Figma's Google Fonts integration.

Select the Text tool from the toolbar and click anywhere on the canvas to create a text layer.
Type any placeholder text such as Aa.
In the right sidebar, set the font to Playfair Display.
Set the weight to Bold, the size to 40, and the line height to 48.
In the Typography section of the right sidebar, click the style icon (four dots) next to the font name.
Click the + icon to create a new text style.
Name it Title / Display and click Create style.

Your first text style is saved. You should see it listed under Local styles in the right sidebar.

Why two font families?

Inter is designed for exceptional legibility at small sizes, making it ideal for dashboard labels, body text, and captions.

Playfair Display is a serif font that creates a deliberate contrast against Inter's clean sans-serif shapes. Pairing them demonstrates the Contrast principle right from the type scale.

Repeat this process for each of the remaining text styles. For each one, create a new text layer, set the font properties, then create the style:

Click on an empty area of the canvas to deselect everything.
Check Local styles in the right sidebar. You should now see 4 text styles organized into Title and Body folders.
You can delete the temporary text layers you created on the canvas. Select each one and press Delete or Backspace. The styles themselves remain saved under Local styles.

Can't find the font?

Figma includes the full Google Fonts library by default. Type Playfair Display or Inter directly into the font family field in the right sidebar. Figma searches and loads the font automatically.

If you are using the desktop app and the font does not appear, make sure you have an internet connection so Figma can download it.

Help me find and apply the right font in Figma.

Before you move on, count the styles in your Local styles section. How many color styles and text styles do you expect to see?

You should see 8 color styles (organized into Primary and Neutral folders) and 4 text styles (organized into Title and Body folders). Your canvas should also show the 12-column overlay and the 8px dot grid on the Student Dashboard frame.

✔️ Awesome, I've got everything!

Great. Double check that your frame fill is set to the Neutral / White style (not just a raw #FFFFFF hex value) and you are ready for the next step.

ⓧ I'd like to double check my setup

Walk through this checklist to confirm everything is in place:

Frame: Named Student Dashboard, sized 1440 x 1024px, fill set to Neutral / White style.
Layout guide 1: Column type, Count 12, Type Stretch, Margin 72, Gutter 24.
Layout guide 2: Uniform grid, Size 8.
Color styles (8 total): Primary / Blue #1E3A8A, Primary / Violet #7C3AED, Primary / Emerald #059669, Neutral / 900 #111827, Neutral / 500 #6B7280, Neutral / 200 #E5E7EB, Neutral / 50 #F9FAFB, Neutral / White #FFFFFF.
Text styles (4 total): Title / Display (Playfair Display, Bold, 40/48), Title / Section (Inter, SemiBold, 24/32), Body / Base (Inter, Regular, 16/24), Body / Caption (Inter, Regular, 12/16).

If anything is missing, scroll back up to the relevant substep and follow the instructions to add it.

Your design system foundation is locked in. Next up, you will use these styles and this grid to build the dashboard's welcome banner and profile summary.

Build the Welcome Banner and Profile Summary

Your design system foundation is locked in. The 12-column layout guide, 8-point baseline grid, color styles, and text styles give every element you place a shared system to snap to.

Right now, though, your frame is blank. Without a strong visual anchor at the top, every section you add later will compete for the viewer's attention equally. This step creates a clear entry point by pairing a bold welcome heading with restrained metadata, putting Contrast and White Space to work.

In this step, get ready to:

Create a welcome banner with a bold greeting and a subtle subtitle that demonstrate Contrast.
Build a profile summary row with 4 stat cards that give at-a-glance student metrics.
Review the spacing and hierarchy to confirm White Space and Contrast are working together.

Create the welcome banner

The welcome banner sits at the very top of the dashboard. It gives the viewer's eye a clear landing spot with a large greeting and a smaller line of context underneath.

Press R to select the Rectangle tool.
Inside your Student Dashboard frame, draw a rectangle that spans from the left margin to the right margin of your 12-column layout guide.
In the right sidebar, set the width to 1296 and the height to 160.
In the Fill section, click the color swatch and apply your Primary / Blue color style.
Set the Corner radius to 16 in the right sidebar.

You should see a dark blue rounded rectangle at the top of your frame, stretching across the full content area between your margins.

Press T to select the Text tool.
Click inside the blue rectangle and type Welcome back, Alex.
In the Typography section of the right sidebar, click the style picker and apply the Title / Display text style.
In the Fill section, click the color swatch and apply your Neutral / White color style so the text is visible on the dark background.
Click below the greeting text inside the rectangle and type You have 3 assignments due this week.
Apply the Body / Caption text style to the subtitle.
Set the subtitle's fill color to #FFFFFF, then use the opacity field next to the fill swatch to change the opacity to 70.

Both text layers should now be visible on the blue banner. The greeting appears large and bold in Playfair Display, while the subtitle is noticeably smaller and slightly transparent.

Why not apply the Neutral / White style to the subtitle?

You need the subtitle at 70% opacity, not full white. Applying a color style and then changing its opacity detaches the style. Setting the hex value to #FFFFFF with a reduced opacity gives you the exact look without a style conflict.

Select both text layers and the blue rectangle by clicking one, then holding Shift and clicking the others.
Press Shift+A to add Auto Layout.
In the Auto Layout section of the right sidebar, set the direction to Vertical.
Set the padding to 48 on all sides.
Set the gap between items to 8.

The two text layers snap into a neat vertical stack with generous padding around them. The banner should already feel spacious and intentional.

How do Contrast and White Space show up here?

The 40px Playfair Display greeting next to the 12px Inter caption creates a 3.3x size ratio. This deliberate Contrast establishes visual hierarchy instantly. The viewer knows exactly where to look first.

The 48px padding (6 units of 8) gives the content room to breathe against the dark background. That generous White Space keeps the banner from feeling cramped, even though it only contains two lines of text.

Text not visible on the banner?

If the text blends into the background, check that you set the greeting's fill to Neutral / White and the subtitle's fill to #FFFFFF at 70% opacity. Dark text on a dark background is invisible.

If Auto Layout rearranged your layers unexpectedly, check the Layers panel on the left sidebar. Drag the greeting text above the subtitle text to restore the correct order.

Help me fix my welcome banner layout in Figma.

Create the profile summary row

Below the banner, a row of stat cards gives the student an at-a-glance snapshot of their academic status. You will build one card first, then duplicate it three times.

Press F to select the Frame tool, then click inside your Student Dashboard frame below the welcome banner to create a small nested frame.
With the new frame selected, press Shift+A to add Auto Layout. Set the direction to Vertical and the padding to 24 on all sides.
Press T for the Text tool and click inside the frame. Type Current GPA and apply the Body / Caption text style. Set the fill color to your Neutral / 500 color style.
Below the label, add another text layer. Type 3.7 and apply the Title / Section text style. Set the fill color to your Neutral / 900 color style.
Select the card frame. Set its fill to your Neutral / 50 color style.
Set the Corner radius to 12.
In the Stroke section, click the + to add a stroke. Set it to 1px and apply the Neutral / 200 color style.

You should see a single light-gray stat card with a small caption label on top and a bold number below it.

Duplicate the stat card by pressing Cmd+D (macOS) or Ctrl+D (Windows). Repeat twice more so you have 4 stat cards total.
Update the second card's label to Courses and its number to 5.
Update the third card's label to Assignments Due and its number to 3.
Update the fourth card's label to Attendance and its number to 96%.

You should see four stat cards, each with a different label and value.

Select all 4 stat cards. Press Shift+A to wrap them in an Auto Layout frame.
Set the direction to Horizontal and the gap between items to 24.
Select each stat card individually. In the right sidebar, change its width resizing from Fixed to Fill container so all four cards distribute evenly.
Position this profile summary frame 24px below the welcome banner. Hold Option (macOS) or Alt (Windows) while hovering between the two frames to verify the spacing shows 24.

The four stat cards should now sit in an even row, each taking equal width across the content area. The 24px gap between them matches your grid gutter.

What does Fill container do?

When a child frame inside an Auto Layout parent is set to Fill container, it stretches to take up all available space. With four cards all set to Fill, each one gets exactly one-quarter of the parent frame's width.

This is the difference between a hand-measured layout and a system-driven one. If you added a fifth card later, all five would resize automatically.

Cards not distributing evenly?

Make sure every card's width resizing is set to Fill container, not Fixed or Hug contents. If even one card is Fixed, it breaks the even distribution.

If the cards are stacking vertically instead of sitting side by side, check that the parent Auto Layout frame's direction is set to Horizontal, not Vertical.

Help me fix my stat card layout.

Review the welcome section

Before you move on, take a step back and evaluate the section as a whole. Before you zoom in, ask yourself: can you read the visual hierarchy in under two seconds?

Zoom to 100% by pressing Cmd+0 (macOS) or Ctrl+0 (Windows).
Look at the top of your dashboard. The welcome heading should be the first thing your eye lands on, with the stat cards forming a secondary layer below.
Verify your spacing values: the 48px internal padding in the banner, the 24px gap between the banner and the stats row, and the 24px gap between stat cards should all be multiples of 8.
If the banner feels cramped, increase the padding. If the stat labels blend into the numbers, lighten the label color further or reduce the label text size.

You should see a welcome banner spanning the full 12 columns at the top of the frame, with the Display text visibly larger and bolder than the caption text below. The section should feel spacious, not cramped.

What makes this hierarchy work?

Every spacing value in this section is a multiple of 8 (8, 24, 48). This consistency is the 8-point spacing system in action. It removes guesswork from layout decisions and creates a visual rhythm the viewer can feel, even if they cannot name it.

The Contrast between the 40px heading and the 12px caption does the heavy lifting. The size difference is so large that the hierarchy reads instantly, even at a glance from across the room.

Your dashboard has a clear visual entry point. Next up, you will build a grid of course cards that put Repetition and Alignment to work.

Design the Course Cards Grid

Your dashboard has a clear entry point now with the welcome banner and profile stats. The next layer of content is the one students care about most: their current courses.

Displaying 4-6 courses in a grid is where two design principles earn their keep. Repetition makes the grid scannable by giving every card the same structure. Alignment keeps spacing consistent so nothing drifts out of place. In this step, you will build a course card, duplicate it manually, watch the spacing break, and then fix it with Auto Layout's grid flow.

In this step, get ready to:

Build a single course card with a progress bar and turn it into a reusable component.
Duplicate the card manually and see how the layout breaks when content changes.
Fix the layout with Auto Layout's grid flow so spacing stays consistent automatically.

Build a single course card frame

Every card in the grid will share the same structure: a colored accent bar, a course title, an instructor name, and a progress indicator. You will build this structure once, then turn it into a component so every copy stays in sync.

Select the Frame tool in the top toolbar (or press F).
Draw a frame on the canvas that is 320px wide. The height does not matter yet because Auto Layout will control it.
With the frame selected, press Shift+A to add Auto Layout. In the right sidebar, set the flow to Vertical.
Set padding to 24 on all sides and gap to 16.
Set the fill to your Neutral / White style (#FFFFFF) and corner radius to 12.
In the Effects section of the right sidebar, click + to add a Drop shadow.
Click the shadow settings icon and set X: 0, Y: 2, Blur: 8, color #000000 at 8% opacity.

You should see a white rounded rectangle with a barely-visible shadow lifting it off the background. This is the card's outer shell.

Card looks flat with no shadow?

Make sure the frame fill is set to Neutral / White and the parent frame (Student Dashboard) also has a white fill. A shadow on a transparent frame against a white background is invisible.

Also check that the shadow's Y value is 2 and the Blur is 8. A Y of 0 pushes the shadow equally in all directions, making it harder to see at 8% opacity.

Help me debug my drop shadow settings.

Add the card's inner content

Each course card has five inner elements stacked vertically: a colored accent bar, a course title, an instructor name, a progress bar, and a progress label. The accent bar is a Repetition anchor. Every card will have this bar, creating visual rhythm across the grid.

Inside the card frame, draw a rectangle for the accent bar. Set its width to fill the container (use Fill container horizontal resizing) and its height to 4px.
Fill the accent bar with your Primary / Violet style (#7C3AED).
Add a text layer below the accent bar. Type Introduction to Psychology and apply the Title / Section text style. Set the color to Neutral / 900.
Add another text layer below it. Type Dr. Sarah Chen and apply the Body / Caption text style. Set the color to Neutral / 500.

You should see the violet accent bar, the course title, and the instructor name stacked vertically inside the card with 16px gaps between each element.

Why a 4px accent bar?

The accent bar is thin enough to feel like a subtle design detail, not a dominant element. Its real job is to anchor the Repetition principle. When you see six cards in a grid, that consistent violet stripe across every card top creates a visual rhythm that makes the grid feel unified.

Build the progress indicator

The progress bar is made of two overlapping rectangles: a full-width background track and a shorter foreground fill that represents completion.

Inside the card frame (below the instructor name), create a new frame for the progress bar container. Set it to horizontal Auto Layout with no padding and no gap.
Set the container's horizontal resizing to Fill container so it stretches to the card's full inner width.
Inside the container, draw a rectangle for the background track. Set its width to Fill container (100% of the container), height to 8px, corner radius to 4, and fill to Neutral / 200 (#E5E7EB).
Draw a second rectangle on top of the background track. Set its width to 65% of the container width, height to 8px, corner radius to 4, and fill to Primary / Emerald (#059669).
Below the progress bar container, add a text layer. Type 65% Complete and apply the Body / Caption style. Set the color to Primary / Emerald.

Your finished card should show the violet accent bar at the top, followed by the course title, instructor name, a progress bar that is roughly two-thirds filled in green, and the "65% Complete" label in green text.

What does the progress bar structure look like?

The progress bar uses a layering technique. The Neutral / 200 background track shows the total length. The Primary / Emerald foreground bar sits on top, filling only 65% of the width. The green-on-gray contrast instantly communicates how far along the student is.

Progress bar elements stacking vertically instead of overlapping?

Make sure both rectangles are inside the same progress bar container frame. If the foreground bar ended up as a sibling of the container instead of a child, it will stack below the background track. Drag it into the container in the Layers panel on the left sidebar.

Help me fix my progress bar layout.

Turn the card into a component

Select the entire card frame.
Press Cmd+Option+K (macOS) or Ctrl+Alt+K (Windows) to create a component.
Name the component Course Card in the right sidebar.

The frame's border should turn from blue to purple, and you will see a diamond icon in the Layers panel. This means it is now a main component. Every copy (instance) you make from it will stay linked to this original.

What is a component in Figma?

A component is a reusable design element. The original is called the main component (purple border). Copies are called instances. When you change the main component, every instance updates automatically. This is the backbone of the Repetition principle in a design system.

Place cards manually and see the spacing break

Before you use Auto Layout's grid flow, you need to see the problem it solves. You are going to duplicate the card several times, arrange them by hand, and then break the layout with a simple text edit.

Hold Option (macOS) or Alt (Windows) and drag the Course Card component to create an instance. Repeat until you have 5 instances alongside the original (6 cards total).
Arrange the 6 cards roughly in two rows of 3 below the profile summary row. Try to space them evenly by eye.

Before you make the next edit, predict what will happen: if you change one card's title to a much longer name, will the rest of the grid stay aligned?

Double-click one of the card instances to enter it.
Select the course title text layer and replace it with a longer name: Advanced Computational Neuroscience and Machine Learning.
Click outside the card to deselect it.

Look at the grid. The longer title pushes that card taller, and it now overlaps or misaligns with its neighbors. The gaps between cards are uneven. Some cards sit higher, some lower. This is exactly the problem that Alignment solves.

Why break the layout on purpose?

This is a designed obstacle. Manual positioning works when every card has identical content, but real dashboards have variable-length text. The moment content changes, manually-placed elements drift. Experiencing this breakage firsthand makes the value of Auto Layout's grid flow obvious.

Fix the layout with Auto Layout grid flow

Auto Layout's grid flow arranges objects into rows and columns automatically. It will absorb the height difference from the longer title and keep every gap consistent.

Select all 6 cards (the main component and the 5 instances).
Press Shift+A to wrap them in an Auto Layout frame.
In the right sidebar, switch the Auto Layout flow to Grid.
Set Number of columns to 3.
Leave Number of rows set to auto so rows adjust to accommodate the cards.
Set column gap to 24 and row gap to 24.
Select each card individually and set its horizontal resizing to Fill container so all cards stretch evenly across the available columns.

The 6 cards should now sit in a clean 3-column, 2-row grid with perfectly even 24px gaps. The row that contains the longer title is taller, but all three cards in that row share the same height. No overlap, no manual nudging.

What does the grid flow do differently?

Grid auto layout places objects into cells organized into rows and columns. When one card gets taller, the entire row stretches to match. The gaps stay locked at 24px no matter what.

This is two design principles working together. Repetition: every card shares the same structure (accent bar, title, instructor, progress). Alignment: the grid locks every card to the same column structure, eliminating the manual positioning errors you just saw.

Position the grid frame 24px below the profile summary row inside the Student Dashboard frame.

Now test the grid's resilience. Do you think changing the long title back to something short will cause the grid to reflow automatically?

Double-click the card with the long title and change it back to a shorter name, like Data Structures.

The grid reflows instantly. The row height shrinks, and every gap stays at exactly 24px. This is the Alignment principle enforced by automation rather than by careful manual placement.

Cards not distributing evenly across columns?

Check that every card's horizontal resizing is set to Fill container in the right sidebar. If any card is set to Fixed width or Hug contents, it will not stretch to fill its column and the grid will look uneven.

Also confirm the parent frame's Auto Layout flow is set to Grid (not Horizontal or Vertical). The grid option is what creates the column/row structure.

Help me fix my Auto Layout grid.

✔️ Awesome, I've got everything!

Great. Double check that you have saved your Figma file and that the grid shows 6 cards in 2 rows of 3 with consistent 24px gaps.

ⓧ I'd like to double check the full design

Here is what your Course Card component and grid should contain. Scroll up and confirm each piece is present in order:

Course Card main component: vertical Auto Layout frame, 320px wide, 24px padding, 16px gap, Neutral / White fill, 12px corner radius, drop shadow (X: 0, Y: 2, Blur: 8, #000000 at 8% opacity).
Inside the card: 4px Primary / Violet accent bar (full width), course title in Title / Section (Neutral / 900), instructor in Body / Caption (Neutral / 500), progress bar (Neutral / 200 background, Primary / Emerald foreground at 65%, 8px tall, 4px radius), 65% Complete label in Body / Caption (Primary / Emerald).
Course cards grid: 6 card instances in a 3-column Auto Layout grid with 24px column gap and 24px row gap. Each card set to Fill container width. Grid positioned 24px below the profile summary row.

Your dashboard now has a scannable course grid that stays perfectly aligned no matter what content you put inside each card. Next up, you will build the Assignments and Announcements panels side by side, putting Proximity and Balance to work with an asymmetric column split.

Build the Assignments and Announcements Panels

Your course cards are locked into a responsive grid that maintains consistent spacing regardless of content length. The dashboard's main content area is taking shape.

The dashboard still needs two more information sections: upcoming assignments and recent announcements. These carry different urgency levels, so they need distinct visual treatments. You'll place them side by side in an 8:4 column split that puts Proximity and Balance to work.

In this step, get ready to:

Create the assignments panel with status-colored rows and right-aligned due dates.
Build the announcements panel with timestamped entries and dividers.
Combine both panels into an asymmetric side-by-side layout.

Create the assignments panel

The assignments panel is the primary content area for this section. It uses color-coded status dots and right-aligned due dates so learners can scan urgency at a glance.

Below your course cards grid, create a new frame. Position it with a 24 px gap from the grid above.
With the frame selected, press Shift+A to add Auto Layout.
Set the flow to Vertical.
Set padding to 24 on all sides.
Set gap to 16.
Set fill to your Neutral / White color style.
Set corner radius to 12.

Now add the shadow and the section header.

Add a drop shadow effect: X 0, Y 2, Blur 8, color #000000 at 8% opacity.
Add a text layer inside the frame with the text Upcoming Assignments.
Apply the Title / Section text style.
Set the text color to your Neutral / 900 color style.

You should see a white, rounded card with a subtle shadow and the heading "Upcoming Assignments" at the top.

Don't see the shadow?

Make sure you added the effect from the Effects section (the + icon next to Effects in the right sidebar), not from Fill or Stroke.

Double-check that the shadow type is set to Drop shadow and not Inner shadow.

help me troubleshoot my drop shadow in Figma

The panel's gap is set to 16, which spaces the header from the content below. The assignment rows need tighter 8 px spacing between them, so you'll nest them inside their own frame.

Inside the assignments panel, create a new frame below the header.
Press Shift+A to add Auto Layout.
Set the flow to Vertical and gap to 8.
Inside this rows container, create another new frame for the first assignment row.
Press Shift+A to add Auto Layout.
Set the flow to Horizontal.
Set padding to 16 and gap to 8.

Now populate the row with its three elements.

Draw an ellipse sized 8 x 8 px inside the row.
Fill the ellipse with your Primary / Violet color style. This dot marks the assignment as upcoming.
Add a text layer: Midterm Essay Draft.
Apply the Body / Base text style and set color to Neutral / 900.
Add a second text layer: Due in 3 days.
Apply the Body / Caption text style and set color to Neutral / 500.
Set the due date text layer's horizontal resizing to Fill container.
Set the due date text's alignment to right so it pushes to the far end of the row.

You should see a single row with a small violet dot on the left, the assignment name in the middle, and the due date pushed to the right edge.

Why does Fill container push the date to the right?

When a text layer is set to Fill container, it stretches to fill all remaining horizontal space inside the Auto Layout row. Combined with right text alignment, the text sits at the far edge. The dot and assignment name only take as much space as they need, leaving the rest for the date.

Select the first assignment row and duplicate it twice to create 3 rows total.
In the second row, change the assignment name to Lab Report: Chapter 5.
Change the second row's due date to Due in 5 days.
In the third row, change the assignment name to Reading Response 4.
Change the third row's due date to Submitted.
Change the third row's status dot fill to your Primary / Emerald color style to mark it as submitted.

You should now see three assignment rows stacked inside the panel with 8 px between them. The two upcoming assignments have violet dots, and the submitted one has an emerald dot.

Proximity in action

The 8 px gap between assignment rows is much tighter than the 16 px gap separating the header from the rows. This difference signals that the three rows belong together as a group, while the header is a separate element. Tight spacing between related items is the core idea behind the Proximity principle.

Create the announcements panel

The announcements panel carries lighter, less time-sensitive content. It will sit next to the assignments panel and take up roughly one-third of the width.

Next to the assignments panel (still inside the Student Dashboard frame), create a new frame.
Press Shift+A to add Auto Layout.
Set the flow to Vertical.
Set padding to 24 on all sides.
Set gap to 16.
Set fill to your Neutral / White color style.
Set corner radius to 12.
Add a drop shadow: X 0, Y 2, Blur 8, color #000000 at 8% opacity.

Now add the header and the announcement items.

Add a text layer inside the frame: Announcements.
Apply the Title / Section text style and set color to Neutral / 900.
Below the header, create a new frame for the first announcement item.
Press Shift+A to add Auto Layout.
Set the flow to Vertical and gap to 12.
Add a text layer: Campus closed Monday.
Apply the Body / Base text style and set color to Neutral / 900.
Add a second text layer: 2 hours ago.

Apply the Body / Caption text style and set color to Neutral / 500.

You should see one announcement item with a title and timestamp stacked vertically.

Duplicate the announcement item frame twice to create 3 total.
In the second item, change the title to New library hours.
Change the second item's timestamp to Yesterday.
In the third item, change the title to Exam schedule posted.
Change the third item's timestamp to 2 days ago.

Now add visual dividers between the items to separate them.

Between the first and second announcement items, draw a line or rectangle that is 1 px tall and spans the full width of the panel.
Fill the divider with your Neutral / 200 color style.
Add the same 1 px divider between the second and third items.

Your announcements panel should show three items separated by thin gray lines, each with a bold title and a lighter timestamp beneath it.

Dividers not lining up?

If the divider line is not stretching across the full panel width, select the divider and set its horizontal resizing to Fill container. This tells it to span the available width of the parent Auto Layout frame.

help me fix my divider lines in the Figma announcements panel

Combine into an asymmetric layout

Both panels exist on the canvas, but they are not connected yet. Wrapping them in a horizontal Auto Layout frame locks them into an intentional side-by-side relationship with a consistent gutter.

Select both the assignments panel and the announcements panel.
Press Shift+A to wrap them in a horizontal Auto Layout frame.
Set gap to 24. This matches your grid gutter.
Set the assignments panel's width resizing to Fill container.
Set the announcements panel's width to a fixed value of approximately 400 px. This gives the assignments panel roughly two-thirds of the available width, matching the 8:4 column ratio.
Position the combined row 24 px below the course cards grid.

Why an 8:4 split instead of equal halves?

Assignments are time-sensitive and have more detail per row (status dot, name, due date). Giving them two-thirds of the width lets each row breathe. Announcements are shorter, punchier text that reads well in a narrower column.

This is asymmetric balance: the wider panel carries more visual weight, but the announcements panel compensates with higher-contrast, punchier content. The layout feels stable even though the two sides are different sizes.

Before you zoom out to review, think about what you expect to see. Will the assignments panel look noticeably wider than the announcements panel? Where will your eye go first?

Zoom out to see the full Student Dashboard frame from the welcome banner down to the new panels section.

The assignments panel should visually dominate, occupying roughly twice the width of the announcements panel. Within each panel, individual list items are grouped with tight spacing (8-16 px), while the two panels are separated by a 24 px gutter. Related things are close. Unrelated things are far apart.

Panels not side by side?

If the panels are stacking vertically instead of sitting side by side, check that the parent Auto Layout flow is set to Horizontal in the right sidebar. Figma may default to Vertical when you press Shift+A.

If the announcements panel is the same width as the assignments panel, double-check that you set it to a fixed width of approximately 400 px, and that the assignments panel is set to Fill container.

help me fix the side-by-side layout of my assignments and announcements panels in Figma

Your dashboard now has a clear visual hierarchy from top to bottom: welcome banner, profile stats, course cards, and an asymmetric information row. Next up, you'll add the final section that ties all six design principles together.

Add the Calendar/Schedule Preview

Your dashboard now has five sections working together. The welcome banner anchors the top, stat cards deliver quick numbers, course cards form a scannable grid, and the assignments and announcements panels sit in an intentional asymmetric split.

One final section is missing: a weekly schedule preview. This is where all 6 design principles converge in a single element, letting you practice applying every principle consciously in one cohesive design.

In this step, get ready to:

Create a calendar container with a header and 5 day columns.
Add time-blocked class entries to each day.
Run a final design review across all 6 dashboard sections.

Create the calendar header and day columns

The calendar section is a self-contained card that sits below the assignments and announcements row. It follows the same visual treatment as every other section: white fill, rounded corners, padding, and a subtle shadow.

Click on an empty area below the assignments/announcements row on your canvas.
Create a new frame and apply Auto Layout by pressing Shift+A. Set the flow to Vertical.
Set the fill to Neutral / White (#FFFFFF), corner radius to 12, and padding to 24 on all sides.
Add a drop shadow matching your other cards: X 0, Y 2, Blur 8, color #000000 at 8% opacity.
Position this frame 24px below the assignments/announcements row.

You should see a white rounded card on your canvas below the two panels. It is empty for now.

Add a text layer inside this frame with the text This Week's Schedule.
Apply the Title / Section text style and set the color to Neutral / 900 (#111827).

Your card now has a section header that matches the style of your other panel headers.

Below the header (set the gap to 16 in the parent Auto Layout), create a new horizontal Auto Layout frame inside the calendar card.
Set this inner frame's gap to 16.
Add 5 text layers inside this horizontal frame, one for each weekday: Mon, Tue, Wed, Thu, Fri.
Wrap each day label in its own vertical Auto Layout frame. Set each frame's width resizing to Fill container so they distribute evenly across the row.
Apply the Body / Caption text style to each day label. Set the color to Neutral / 500 (#6B7280) and the alignment to center.

You should now see 5 evenly spaced day labels (Mon through Fri) in a single row inside your calendar card.

Day columns not distributing evenly?

Make sure each day label is inside its own vertical Auto Layout frame, and that each of those frames has its width set to Fill container. If a frame is set to Hug contents, it will shrink to fit the text instead of stretching.

Also confirm the parent horizontal frame has its flow set to Horizontal, not Vertical.

Why aren't my day columns filling the row evenly?

Add time-blocked class entries

Each day column needs 1-3 class blocks to represent a realistic student schedule. The blocks use a subtle tinted background to create visual distinction without heavy color fills.

Inside the Monday column frame (below the Mon label, with an 8px gap), create a new vertical Auto Layout frame for your first class block.
Set the class block's fill to Primary / Blue (#1E3A8A) at 10% opacity. Set corner radius to 8, padding to 12, and gap to 4.
Add a text layer for the time: 9:00 - 10:30. Apply Body / Caption style and set the color to Primary / Blue (#1E3A8A).
Add a second text layer below for the class name: Psychology 101. Apply Body / Base style and set the color to Neutral / 900 (#111827).

You should see a soft blue-tinted block inside the Monday column, with the time in blue and the class name in dark text.

Duplicate this class block and place copies in the other day columns. Vary the number of blocks per day to create a realistic schedule.
Update each block's time and class name. For example: Tuesday could have 11:00 - 12:30 for Calculus II and 14:00 - 15:30 for Data Structures.
Leave some days with only 1 class and give others 2 or 3. The variation is intentional.

Your calendar now shows a realistic weekly schedule with different numbers of classes per day.

All 6 design principles in one section

This single calendar section demonstrates every principle you have learned. Contrast appears between the filled class blocks and the empty white space around them. Alignment keeps all blocks locked to the column structure.

Repetition shows up in the identical block format used across every day. Proximity groups the time and class name tightly within each block.

Balance comes from the 5-day layout, even though each day has a different number of entries. White Space is the empty slots between classes that give the schedule breathing room.

Class blocks overflowing the column?

Check that each class block frame has its width resizing set to Fill container. If a block is set to a fixed width, it may extend beyond the column boundary.

Help me fix my calendar class blocks that overflow their columns.

Run the final dashboard review

Your dashboard now has all 6 sections. Before you call it done, take a step back and evaluate the whole design as a single composition. Think about what you expect to see when you zoom out. Does every section edge line up? Does the spacing feel consistent from top to bottom?

Zoom out to see the entire 1440 x 1024 frame. Scroll from top to bottom and check each principle:
Every section edge aligns to the 12-column grid (Alignment).
Every gap between sections is 24px (Repetition of spacing).
The welcome banner dominates the top with clear typographic hierarchy (Contrast).
Items within each section are grouped more tightly than sections are from each other (Proximity).
The layout feels stable despite the asymmetric assignments/announcements split (Balance).
No section feels cramped. Padding is generous and consistent (White Space).

What if something feels off?

If a section looks slightly misaligned, toggle your layout guide visibility on and off. The 12-column overlay makes it easy to spot elements that have drifted outside the grid.

If spacing between sections varies, select each section frame and check the gap values in the right sidebar. Every section-to-section gap should be 24.

Now rename your page and frame so the file is easy to navigate later.

In the left sidebar under the File tab, double-click the page name Page 1 in the Pages section. Type Student Dashboard and click outside the page list to apply.
Double-click the frame name on the canvas (currently Student Dashboard) and rename it to Student Dashboard / Desktop.

Your Figma file now has a descriptive page name and a frame name that follows the slash naming convention. The Layers panel should show Student Dashboard / Desktop as your top-level frame.

Frame name not updating on the canvas?

Make sure you are double-clicking the frame's name label directly above the frame on the canvas. If you click somewhere else, you may be editing a text layer inside the frame instead.

You can also rename the frame in the Layers panel by double-clicking its name there.

Help me rename my frame in Figma.

Secret mission

Create Course Card Component Variants

Your Course Card component works for a static mockup, but a real dashboard shows courses in different states. Can you extend your design system with Default, In Progress, and Completed card variants that use distinct color treatments while keeping the Repetition principle intact?

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely in Figma on the free plan, so there are no ongoing costs.

Resources you used:

Figma design file containing the Student Dashboard page and Student Dashboard / Desktop frame.
Local styles (8 color styles and 4 text styles) stored in the design file.
Course Card component set with 3 variants (Default, In Progress, Completed) stored in the design file.

Keep everything running

No action needed. Choose this if you are still actively building or want to revisit the dashboard later.

Your Figma file is automatically saved in your Figma account. You can access it anytime from your Figma drafts or recent files.
All color styles, text styles, and component variants remain inside the file and are ready to use whenever you open it.
Since Figma's free plan has no storage limits for drafts, keeping the file costs nothing.

Pause - I'll come back to this later

There is nothing to shut down or pause for this project. Your Figma file is cloud-saved automatically.

Your Student Dashboard file stays in your Figma drafts until you choose to delete it.
No running processes or services need to be stopped.

Delete - I don't want to use this again

Remove your project file from Figma entirely.

In Figma, go back to the file browser by clicking the Figma logo in the top-left corner of the editor.
Find your Student Dashboard file in your recent files or drafts.
Right-click the file thumbnail and select Delete.
The file moves to your trash. To permanently remove it, open the Drafts section in the left sidebar, click Deleted, find the file, right-click it, and select Delete forever.
Deleting the file also removes all the color styles, text styles, layout guides, and component variants you created. They are stored inside the file, not separately in your Figma account.

Nice Work!

You just designed a complete, professional Student Dashboard in Figma from scratch. Every section, from the welcome banner down to the weekly calendar, is grounded in a shared design system and demonstrates real design principles you can apply to any future project.

You've learned how to:

Build a high-fidelity Student Dashboard with 6 distinct sections (welcome banner, profile summary, course cards, assignments, announcements, and calendar preview) that work together as a cohesive interface.
Establish a reusable design system foundation with a 12-column layout guide, an 8-point baseline grid, color styles, and text styles using Inter and Playfair Display that enforces consistency across every element.
Translate all 6 design principles into concrete Figma decisions: Contrast in the type hierarchy, Alignment through the column grid, Repetition in the card components, Proximity in the list groupings, Balance in the asymmetric panel layout, and White Space in the generous, consistent padding.
(Secret Mission) Created component variants with 3 status states (Default, In Progress, Completed) that extend the design system while preserving visual consistency.

Ready to quiz yourself?