Design · utility

Utility: System Overview

Summarize a Figma file's design system — components, styles, token collections and modes, and page structure — in one structured overview.

/design-system-overview

Figma

Figma steps require a Figma MCP server; see the design workflow page.

Purpose

The system overview utility gives a comprehensive summary of the design system in a Figma file: components, styles, token collections and modes, and page structure. Use it when you're new to a Figma design system or want to know what it contains before working with it.

Not for exporting tokens as code — see /design-export-tokens.

Usage

Provide a Figma file key or URL.

What It Does

  1. Identifies the Figma file
  2. Calls figma_get_design_system_summary for counts and page structure
  3. Calls figma_get_styles to list all published styles
  4. Calls figma_get_components to list all published components
  5. Calls figma_get_variables (JSON format) to get token structure
  6. Compiles the overview: file info, components, styles (by type), tokens (collections, variables by type, mode names), and page structure
  7. Presents the overview to the user

Output

A structured design system overview presented to the user, useful for onboarding onto or auditing the state of a design system.

Utility: Export Tokens

Export the design tokens (variables) from a Figma file as CSS custom properties, Tailwind config, or JSON.

Storage

How Design artifacts are organized in the .singularskills/ directory.