UI Component Library
Objective
Create a small, reusable component library that demonstrates how UI elements can be systematically built for reuse in future mockups. You are not building a prototype yet—just the components themselves.
Your library must include examples of:
Text variables (to control text labels dynamically)
Boolean variables (to show/hide elements or change states)
Variant systems (organized versions of a component)
Instance swaps (replaceable parts like icons or media)
You will also include a Testing Frame to demonstrate that your components work correctly.
Project Requirements
1. Create a Component Library Page
Title it Library in your Figma file.
Include your color, typography, and sizing variables from your previous exercise
Build at least 15 reusable components, representing multiple levels of complexity—atoms, molecules, and organisms (see section below).
Choose components that are most useful for your particular project (to save time later).
2. Component Examples (Pick 15)
Below are 30 common components organized by type and complexity. Feel free to adjust or rename based on your project’s theme (e.g., healthcare app, travel site, productivity tool, etc.).
Atoms (Fundamental Elements)
Button (default)
Button with Icon (leading or trailing)
Icon Only Button
Text Input / Field
Checkbox
Radio Button
Toggle / Switch
Tag / Chip
Tooltip
Avatar (image, initials, or icon)
Molecules (Combined Atoms)
Input with Label and Helper Text
Select / Dropdown (with item component)
Search Field (input + icon + clear button)
Tabs (horizontal/vertical variants)
Pagination Controls (prev/next, active states)
Card (title, image, and action area)
Modal / Dialog (title, body, actions)
Toast / Alert Message (type: success, error, warning, info)
Badge with Icon
Progress Bar (with label)
Organisms (Modular Structures)
Navigation Bar / Header (logo, nav items, user menu)
Sidebar / Drawer Navigation
Table Row / List Item (with selection and hover states)
Table / Data Grid (with header, rows, and pagination)
Profile Card (avatar, name, buttons)
Empty State (illustration + message + action)
Sign-In Form (input fields, button, helper text)
Filter Bar (search, filters, sort)
Content Card (media, metadata, buttons)
Dashboard Summary Widget (data, icons, actions)
💡 Tip: You may also create advanced or nested components, such as a button group, card with interactive content, or a list with embedded icons. Combining smaller parts into more complex, reusable structures shows higher design system thinking.
3. Create a “Testing Frame” Page
This page will make it easy for you to test that your components are set up correctly.
How to Set It Up
Create a new page titled 03 – Testing Frame.
On that page, create a large frame titled Component Proofboard.
Inside the frame, create 4 labeled sections — one for each test area:
Text Variables Test
Boolean Variables Test
Variant System Test
Instance Swap Test
What to Include in Each Section
Section | What to Show | Example |
Text Variables Test | Place 2–3 instances of components with text variables (e.g., buttons, modals). Change the variable values to show how text updates automatically. | Two buttons labeled “Save” and “Cancel” using the same component but different variable values. |
Boolean Variables Test | Show a component twice—once with the boolean ON and once OFF. Use this to toggle visibility or states (like showing/hiding an icon or footer). | A card with showFooter=true and one with showFooter=false. |
Variant System Test | Create a grid showing all variants of a component (e.g., buttons in different states, sizes, or intents). | A button set showing primary/secondary and default/hover/pressed. |
Tips
Keep the layout organized using Auto Layout.
Label each section clearly with headings.
Use your component names as captions underneath.
Keep everything inside one frame called Component Proofboard for easy viewing.
Foundations
Color tokens: Primary, Surface, Text, Border, Success, Warning, Error.
Typography: Display, H1–H5, Body, Caption.
Spacing scale: Based on 4px increments.
🎨 Accessibility
Make sure:
Text contrast is ≥ 4.5:1 for body text.
Hover, focus, and pressed states are visually distinct.
“Hit areas” for interactive elements that require clicks or taps are at least 40×40 px.
Use the ALLY or ABLE plugin to check for accessibility issues.
Grading Rubric (40 pts total)
Category | Points | What You’ll Be Graded On |
A. Foundations & Tokens | 10 pts | Consistent use of color, typography, and spacing tokens. |
B. Components & Variants | 15 pts | At least 2 well-organized variant sets with logical naming. |
C. Variables & Booleans | 15 pts | Text and boolean variables correctly implemented and functioning. |
Deliverable and Submission Information
You will be submitting two things.
Submit a Figma Link (set to “Anyone with link can view”).
Upload your local figma file (look for the option to save as a local copy)
Previous Semester Example
Locked Message