Skip to main content

Design Systems Checklist

Need to write my version

This list is from design system checklist Figma template

Still need to adapt to my own needs

Buil it like a boss

Getting started

  • Introduction
  • About
  • Contributions

What's new

  • Changelog
  • Monthly updates
  • Roadmap
  • Dependencies
  • Component status

Brand

  • Logo versions
  • Who we are
  • Typography
  • Strategy
  • Design principles
  • Illustrations
  • Presentations
  • Motion
  • Colors
  • Tone of Voice

Product

  • Accessibility
  • Color palette and examples
  • Component overview
  • Iconography
  • Grid
  • Figma tooklit (pligins, etc)
  • Localization rules and tools
  • Layouts
  • Screen sizes (rules)

Components

  • Avatar
  • Activation cards
  • Badge
  • Box
  • Buttons
  • Callout
  • Card
  • Checkbox
  • Code snippet
  • Collumn
  • Date picker
  • Dropdown
  • File uploader
  • Form
  • Link
  • List
  • Loading
  • Notification
  • Pagination
  • Popover
  • Search
  • Tab
  • Tooltip

Design Tokens

  • Background colos
  • Border color
  • Border radius
  • Box shadow
  • Duration/Transition
  • Elevation
  • Font size
  • Font weight
  • Font family
  • Grid
  • Line height
  • Responsiveness
  • Shadows
  • Size
  • Space
  • Transition
  • Z-index

Resources

  • Downloads
  • Plugins used
  • Workflow
  • Installation guides
  • Tooling guides

Marketing

  • App store screens
  • Emails
  • Social media
  • Ads templates
  • Billboard templates
  • Print templates