Figma UI Design Collection (UI Components, Design Documentation)
Select Figma UI designs for websites, covering genres like health & fitness, restaurants, sports, tech, staffing, and more.
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
Entagile, A staffing company
Contact Page
My Design Library (by Chevis Zhou）
I collected and organized my web design library for efficient project kickoff.
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
Like this project
1
Posted Apr 18, 2025
Designed Figma UI for various industry websites.
Beauty Ecommerce Website (Framer, Figma Design, Shopify Backend)
Tech Staffing Company Website (Framer Dev + Figma Design)
Financial Consulting Company Website (Framer Dev + Figma Design)
Tech Startup Website (Figma, Design, Visual + Branding)