Figma PluginFree

AI-First Design Tokens

A production-grade design-token starter for AI-first products. Ships with semantic naming, three theme modes, gradient accent presets, and a pipeline that keeps Figma and code in sync.

Download for free

Format

Figma Community · .fig

Version

1.4.2 · Nov 2025

File size

2.8 MB

License

MIT · free to use

Nº 01 / Overview

A token starter kit built for AI-first product surfaces

This kit gives product teams a ready-to-use token foundation for interfaces that need reasoning states, human review, uncertainty, automation, and escalation.

The structure is intentionally semantic. You can rename the brand layer without rewriting component logic, and the theme modes are designed to travel from Figma to CSS variables cleanly.

Nº 02 / Preview

What the kit looks like

Nº 03 / Highlights

Designed to plug into real workflows

Design-system ready

Primitive, semantic, and component token layers are separated so teams can scale without naming collisions.

AI-state aware

Includes roles for confidence, reasoning, uncertainty, agent status, and human intervention.

Theme modes included

Dark, light, and high-contrast modes are designed as first-class token modes.

Nº 04 / Included

Files and workflows inside the download

Figma-ready semantic token layers

Dark, light, and high-contrast modes

Gradient accent presets

Style Dictionary export notes

React, Vue, and iOS naming examples

Documentation starter outline

Token export pipeline — The same media block can be reused across downloads and case studies.

Nº 05 / Implementation

From Figma tokens to production variables

Use this block to explain how a resource fits into a real implementation path. The content can point to images, diagrams, screenshots, or short clips.

Because this is driven by `site.ts`, a paid resource and a free resource can have completely different layouts without changing the route.

Nº 06 / Walkthrough