Create
C
Discover
D
Startups
S
Investors
I
Talent
T
Learn
L
News
N
About
A
Arabic German English Spanish Finnish Italian
Login
Register
Design Reusable UI Components
Art
Level 2 - Application

Design Reusable UI Components

Taught by Marcus Reeves

About This Challenge

Build the visual building blocks of digital products by designing consistent, reusable UI components. This challenge focuses on buttons, forms, cards, navigation elements, and other interface components that combine into complete user experiences.

What You'll Learn

  • Design complete component sets with all necessary visual states and variants
  • Apply WCAG accessibility standards to every visual component you create
  • Create responsive components that adapt gracefully across screen sizes
  • Document components with clear specs for developer implementation
  • Organize components into logical, scalable design systems

Challenge Content

22 lessons
Component Fundamentals
Introduction to UI Component Design
10 Min
Anatomy of a UI Component
7 Min
Design Tokens and Shared Foundations
7 Min
Component Fundamentals Check
10 Min
States and Interactions
Designing for Every State
9 Min
Interactive State Design Patterns
8 Min
Form Component States
7 Min
Design a Button Component with All States
30 Min
Accessibility Integration
Accessibility in Component Design
10 Min
Color Contrast and Visual Accessibility
8 Min
Keyboard Navigation and Focus Management
7 Min
Accessibility Standards Assessment
10 Min
Accessibility Audit of Your Button Component
25 Min
Responsive Component Design
Responsive Design for Components
9 Min
Responsive Patterns for Common Components
8 Min
Figma Auto-Layout for Responsive Components
7 Min
Design a Responsive Card Component
30 Min
Documentation and Developer Handoff
Bridging Design and Development
9 Min
Component Documentation Best Practices
8 Min
Design-to-Code Translation
7 Min
Documentation and Handoff Assessment
10 Min
Create a Mini Component Library with Documentation
45 Min

Related Challenges

Explore Brand Identity Design
Explore Brand Identity Design

Discover how visual identity shapes perception and builds trust between businesses and their audiences. Analyze iconic brands to understand why their visual systems work, learn the vocabulary designers use, and understand the strategic thinking behind visual decisions.

Art
Level 1
Master Digital Design Fundamentals
Master Digital Design Fundamentals

Embark on your journey into digital creation by mastering the essential principles that underpin all visual design. Learn color theory, typography, composition rules, and navigate professional design tools to create commercial-quality digital assets.

Art
Level 1
Master Digital Photography for Content
Master Digital Photography for Content

Elevate your visual content with photography skills tailored for digital creators and marketers. Learn camera fundamentals, smartphone optimization, lighting setups, and composition techniques to produce images that compete with professional stock photography.

Art
Level 1
Design High-Converting Email Campaigns
Design High-Converting Email Campaigns

Master the art and science of email design that drives opens, clicks, and conversions. This challenge navigates the unique constraints of email, from rendering differences across clients to optimal image-to-text ratios and responsive layouts.

Art
Level 2

Ratings & Reviews

Challenge Info

Level
Level 2 - Application
Subject
Art
Progress
0%
Rewards
Sign in to Start

Requirements

  • Basic understanding of digital interfaces and common UI patterns
  • Access to Figma (free tier is sufficient)
  • Familiarity with basic design principles such as color and typography
Back to Challenges