Download and import the provided token pack:

hw07.zip

In Figma:

1. Open the Variables panel
2. Create a new variable collection
3. Import the provided JSON files

Figma will create multiple modes (themes). These modes allow the interface to switch between themes (e.g., light-color, dark-color, light-grayscale, dark-grayscale)

What Are Design Tokens?

Design tokens are named values that control visual properties of the interface. Instead of manually choosing colors or font sizes everywhere, we use tokens.

Using tokens ensures that the interface stays consistent and can easily support themes (like dark mode).

Example: Instead of writing Fill: #3C5E96, you use Fill: button.primary.bg. If the theme changes, the color updates automatically.

In Figma, frames are containers that hold interface elements.

You can think of a frame as similar to a generic container (like a div tag). There are also some special, pre-defined frames for desktop, mobile, and tablet screens. Frames can contain text, images, buttons, and other frames.

For this assignment, each screen should be built inside a frame, and you will also make use of frames inside of frames.

Suggested sizes:

• Desktop: 1440 × 1024
• Mobile: 390 × 844

More often than not, your frames will need to utilize Figma’s Auto Layout feature, which works very similarly to CSS Flexbox.

It allows elements to:

• align automatically
• maintain spacing
• adapt to different screen sizes (responsiveness)

For example, Auto Layout can:

• stack items vertically
• distribute items horizontally
• maintain consistent spacing between elements

This makes responsive design much easier.

Tutorial Video: Watch this short video on auto layout (just watch the first 5 minutes – don’t worry about Grid).

A component is a reusable UI element. Instead of redesigning the same thing many times, you design it once and reuse it. Examples of components include:

• buttons
• navigation bars
• cards
• input fields

If you create a button component, you can reuse it on many screens. If you update the main component, all copies update automatically.

Tutorial Video: Watch this short video on components to learn more. It’s extremely useful for building complex wireframes.

Variants

Components can have variants, which represent different versions of the same element.

Example: Button component

Variants might include:

• Primary
• Secondary
• Ghost (transparent version of the button with a border)
• Disabled

All of these belong to the same component, but have slightly different styling. This helps keep designs consistent.

Tutorial Video: Watch this short video on components + variants to learn more.

Figma Plugins save tons of time, and we will eventually use more of them.

• To get started, please install the Tabler Icons plugin for simple, consistent icons.

Create the following reusable components:

Button

• Include variants for: Primary, Secondary, Ghost (transparent version with a border)
• Use the design tokens for: colors, font styles, spacing

Input Field

• Include: Label, Input field, Helper text, Error state

Card

• Contains: Title, Body text, Optional button

Create three screens for a simple application based on the stakeholder and journeys you defined in HW6. Each screen should exist in both desktop and mobile layouts, and should feel like it could realistically support the tasks you identified in HW6.

Each screen might be a dashboard, home screen, daily overview, or another screen that represents the main entry point for your user’s most important journey. It should:

• clearly communicate where the user is and what the screen is for
• surface key information or actions that matter most for your stakeholder
• provide at least one obvious next step (primary action) the user can take

• Use the variable modes from the token file to switch themes.
• Demonstrate at least two themes. (e.g., light-color and dark-color)

Duplicate your screen frame and apply different variable modes to show the same layout under different themes.

Organize your file like this:

Page: Design System

• Tokens Preview
• Typography Styles
• Components

Page: Screens

Example (this will be based on your screens)

• Dashboard:
  • Desktop
  • Mobile
• Activity Detail
  • Desktop
  • Mobile
• Profile
  • Desktop
  • Mobile

Submit according to your instructor’s directions (e.g. Canvas, Figma link, or course site):