Figma UI Design Collection (UI Components, Design Documentation)
Chevis Zhou
Select Figma UI designs for websites, covering genres like health & fitness, restaurants, sports, tech, staffing, and more.
View more at aethrdesign.com
Table of contents:
Website design
Components
Design documentation
Website Design
Solara, a tech company
I designed their marketing site showcasing their software features
Marketing Site
API Documentation Design
Homepage Animation
Feature Section Animation
Responsive Design-Mobile Breakpoint
My Design Library (by Chevis Zhou)
I collected and organized my web design library for efficient project kickoff.
Landing page designs
Select Components
For great handoff process, I start with an organized design system with components.
Component Showcase-Solara Marketing Site
Sample Components
Select categories and examples from my component-based design system:
Foundations
Color Styles
Typography Styles
Spacing
Elevation/Shadows
Iconography
Base Components
Buttons
Inputs (Text fields, dropdowns, checkboxes, radio buttons, toggles)
Avatars
Badges
Tags
Tooltips
Progress Indicators
Navigation
Headers (Application, Page, Section)
Sidebar Navigation
Tabs (Horizontal, Vertical)
Breadcrumbs
Pagination
Overlays & Feedback
Modals
Alerts/Toasts
Notifications
Data Display
Tables
Cards
Lists
Complex Components & Sections
Forms
Sections (e.g., Hero, Features, Pricing)
Empty States
Our Design Library - Table Component
Design Documentation
How I document designs and make sure developers can effortlessly understand the designs and develop them.
Sample Dev Handoff-User Flow
Design Documentation Sample - Empty States
Typography
View more at aethrdesign.com
Like this project
Posted Apr 18, 2025
A curated collection of website UI, component systems, and developer handoff documentation built in Figma.
