Component Library
A deep dive into my component design methodology—from Figma structure to implementation. Each component is built with consistency, scalability, and accessibility in mind.
Design Philosophy
My approach to components centers on creating a systematic, scalable design language that works across products and platforms.
Atomic Structure
Components are built from the smallest elements up—tokens, atoms, molecules, organisms. This ensures consistency and reusability.
Variant System
Every component uses Figma variants to handle states, sizes, and types. This reduces file bloat and maintains a single source of truth.
Auto-Layout First
All components leverage auto-layout for responsive behavior. This ensures components adapt naturally to content changes.
Accessibility Built-In
Color contrast, focus states, and semantic structure are considered from the start—not added as an afterthought.
Component Examples
Here's how I structure key components in Figma and translate them to code.
Button Component
The button is structured with a base frame using auto-layout, containing an icon slot (optional) and text layer. Padding is responsive to content.
- Base: Auto-layout (horizontal, 16px gap)
- Padding: 12px vertical, 32px horizontal
- Corner radius: 6px
- Min-width constraint: Hug contents
Input Field
Input fields use a container frame with label, input, and helper text slots. Each element is independently controlled via component properties.
- Container: Fixed width with auto-layout
- Label: Optional, 14px text
- Input: 16px text, 48px min-height
- States: Default, focused, error, disabled
Card Component
Cards are flexible containers using auto-layout with slots for header, content, and footer. Background and border are customizable via properties.
Card Title
This is a flexible card component with customizable content slots.
- Layout: Vertical auto-layout, 16px gap
- Padding: 24px all sides
- Elevation: Subtle border, no shadow
- Slots: Header, body, footer (all optional)
Badge Component
Badges are compact status indicators using auto-layout with text content. Background opacity is controlled for subtle visual hierarchy.
- Layout: Horizontal auto-layout, hug contents
- Padding: 4px horizontal, 12px vertical
- Corner radius: Full (pill shape)
- Background: 20% opacity of accent color
Toggle Switch
Toggle switches use a track frame with a thumb element that transitions position. State is managed through boolean properties.
- Track: 48px width, 24px height
- Thumb: 18px circle, slides on state change
- Animation: 200ms ease transition
- States: On (primary color), Off (gray)
Checkbox Component
Checkboxes combine a custom-styled input with a label using auto-layout. Check mark appears as pseudo-element on checked state.
- Layout: Horizontal with 12px gap
- Box: 20px square with 2px border
- Corner radius: 4px (slightly rounded)
- Check: Unicode character, centered
Select Dropdown
Select components use native HTML with custom styling that matches the design system. Options are managed through content properties.
- Min-width: 200px for content stability
- Padding: 12px vertical, 16px horizontal
- States: Default, focused, disabled
- Native arrow: Browser default (accessible)
Avatar Component
Avatars are circular containers that display user initials or images. Size variants are controlled through component properties.
- Sizes: Small (32px), Medium (48px), Large (64px)
- Shape: Perfect circle (border-radius: 50%)
- Content: Text or image, centered
- Background: Primary color with white text
Component Organization
How I structure Figma files for maximum efficiency and scalability.
Figma File Structure:
Product Design System
│
├── 00 - Documentation & Guidelines
│ ├── Cover / Getting Started
│ ├── Component Usage Guide
│ ├── Accessibility Standards
│ ├── Changelog & Version History
│ └── Brand Guidelines
│
├── 01 - Foundation / Design Tokens
│ ├── Color System
│ │ ├── Semantic Colors (Primary, Secondary, Tertiary)
│ │ ├── Functional Colors (Success, Warning, Error, Info)
│ │ ├── Neutral Palette (50-900 scale)
│ │ └── Theme Modes (Light, Dark, High Contrast)
│ ├── Typography
│ │ ├── Font Families (Heading, Body, Code)
│ │ ├── Type Scale (12px - 72px)
│ │ ├── Font Weights (Light - Black)
│ │ └── Line Heights & Letter Spacing
│ ├── Spacing System
│ │ ├── Spacing Scale (4px base grid)
│ │ ├── Layout Grid (12-column responsive)
│ │ └── Breakpoints (Mobile, Tablet, Desktop)
│ ├── Elevation & Shadows
│ │ ├── Shadow Tokens (Levels 1-5)
│ │ └── Blur & Depth Guidelines
│ ├── Motion & Animation
│ │ ├── Timing Functions (Ease, Spring, etc.)
│ │ ├── Duration Tokens (Fast, Normal, Slow)
│ │ └── Animation Patterns
│ └── Effects & Borders
│ ├── Border Radius Tokens
│ ├── Border Widths
│ └── Opacity Scale
│
├── 02 - Primitives / Atoms
│ ├── Buttons
│ │ ├── Primary, Secondary, Tertiary
│ │ ├── Ghost, Outline, Text
│ │ ├── Sizes (XS, S, M, L, XL)
│ │ └── States (Default, Hover, Active, Disabled, Loading)
│ ├── Form Inputs
│ │ ├── Text Input, Textarea
│ │ ├── Number Input, Date Picker
│ │ ├── Checkbox, Radio, Toggle
│ │ ├── File Upload
│ │ └── All States & Validation
│ ├── Labels & Tags
│ │ ├── Badges, Pills
│ │ ├── Status Indicators
│ │ └── Tooltips
│ ├── Icons
│ │ ├── System Icons (16px, 20px, 24px)
│ │ ├── Product Icons (24px, 32px)
│ │ └── Illustrations
│ ├── Images & Media
│ │ ├── Avatar (Sizes XS-XL)
│ │ ├── Image Placeholders
│ │ └── Video Player Controls
│ └── Dividers & Separators
│
├── 03 - Components / Molecules
│ ├── Form Groups
│ │ ├── Input + Label + Helper Text
│ │ ├── Search Bar
│ │ ├── Password Input (with visibility toggle)
│ │ └── Input with Icons/Buttons
│ ├── Cards
│ │ ├── Basic Card, Image Card
│ │ ├── Product Card, Profile Card
│ │ ├── Stat Card, Dashboard Widgets
│ │ └── Interactive Cards (Clickable, Expandable)
│ ├── Navigation Components
│ │ ├── Breadcrumbs
│ │ ├── Tabs (Horizontal, Vertical)
│ │ ├── Pagination
│ │ └── Stepper
│ ├── Data Display
│ │ ├── List Items (Simple, Complex)
│ │ ├── Key-Value Pairs
│ │ ├── Progress Bars & Indicators
│ │ └── Stat Display
│ ├── Notifications
│ │ ├── Toast Messages
│ │ ├── Alert Banners
│ │ └── Badge Indicators
│ └── Controls
│ ├── Dropdown Menu
│ ├── Select Menu (Single, Multi)
│ ├── Date Range Picker
│ └── Color Picker
│
├── 04 - Patterns / Organisms
│ ├── Navigation Systems
│ │ ├── Header / Top Nav
│ │ ├── Sidebar / Side Nav
│ │ ├── Footer
│ │ └── Mobile Menu / Hamburger
│ ├── Forms
│ │ ├── Login / Signup Forms
│ │ ├── Multi-step Forms
│ │ ├── Settings Forms
│ │ └── Checkout Flow
│ ├── Tables & Lists
│ │ ├── Data Table (with sorting, filtering)
│ │ ├── Expandable Rows
│ │ ├── Infinite Scroll List
│ │ └── Grid View
│ ├── Modals & Overlays
│ │ ├── Dialog / Modal (Sizes)
│ │ ├── Drawer / Slide-out Panel
│ │ ├── Bottom Sheet
│ │ └── Lightbox / Image Viewer
│ ├── User Profiles
│ │ ├── Profile Header
│ │ ├── Profile Card
│ │ └── Settings Panel
│ └── Dashboards
│ ├── Stat Overview
│ ├── Chart Cards
│ └── Activity Feed
│
├── 05 - Templates / Pages
│ ├── Landing Pages
│ ├── Dashboard Layouts
│ ├── Content Pages
│ ├── E-commerce (Product, Cart, Checkout)
│ ├── Settings Pages
│ └── Mobile Views (iOS, Android)
│
├── 06 - Prototypes & User Flows
│ ├── Onboarding Flow
│ ├── Purchase Flow
│ ├── User Authentication
│ └── Feature Demos
│
├── 07 - Work in Progress
│ ├── Component Explorations
│ ├── Experiments
│ └── Archived Components
│
└── 08 - Resources & Assets
├── Stock Images & Photos
├── Illustrations Library
├── Logo Variations
└── 3rd Party Component MappingSeparation of Concerns
Tokens live separately from components, allowing global updates without touching individual component files.
Progressive Complexity
Start with atoms, combine into molecules, then organisms. Each level builds on the previous with minimal duplication.
Version Control
All components are published to a central library with semantic versioning for breaking vs. non-breaking changes.