Designer's Toolkit Figma Library

The solution to help you produce quality designs faster with 100+ components

Free

• Colors (19 colors with 10 variations each)
• Type
  • Headings - 4 weights, 6 styles
  • Body - 4 weights, 5 styles
• Icons (300+ Icons)
  • All Material Icons
  • 4 Variations per icon)
• Buttons (56 components)
• Avatars (25 options in 4 categories)
• Toggles, Checkboxes, Radio (22 components)
• Chips (10 components)
• Popovers (2 components)
• UI cursors (11 components)
• Web headers and footers (2 components)
• Shadow Styles (6 - XXS - XXL )

Starter

Free design elements plus:

• Page structure organization (Atomic Design)
• Grids
• 7 Shadows
• 11 Grids
  • 5 Mobile (3 Row + 2 Gutter Options)
  • 3 Tablet
  • 3 Desktop
• Inputs Types
  • 11 Types (e.g., Text, drop down, date, icon leading, icon trailing, upload, etc.)
  • Form and section header
• Spinner
• Tooltips
• Tab and Tab Groups
• Tags & Chips
• Accordion
• Alert Banner
• Notification
• Breadcrumbs
• Cards
• Date Picker & Calendar
• Empty State
• Rating
• Steps
• Web Components
• Forms
• iPhone Elements

Pro

Design mobile apps faster with a growing library of mobile design components and patterns

Starter design elements plus:

• Phone Components
• iPhone
• Tab Bar Dark & Light
• Nav Bar (3 components)
• Splash Screens (3 Versions)
• Sign-up screens (7 variations - Name, Birthday, Phone, Birthday, Email, Username, Photo, Upload Photo)
• Walkthrough / Onboarding screens (3 Variations)
• Profile (3 Variations)
• Rows (6 Variations)
• Row use cases
  • Home
  • Inbox
  • Profile
  • Notifications
• Cards (9 variations)
• Card use cases
  • Food Menu
  • Homes
  • Courses