Design-system handoff and repo-aware implementation bridge for Figma.
Tessellate connects Figma work to the implementation context a design-system team already owns: component mappings, token rules, source paths, content sidecars, asset references, font requirements, and verification recipes.
This repository is the product and integration surface for Tessellate. It contains docs, schemas, examples, and neutral registry fixtures that teams can use to configure the product around their own design system.
Tessellate is one system:
| Capability | What it does |
|---|---|
| Tessellate Code | Shows repo-aware implementation context for mapped Figma nodes in Dev Mode |
| Inlay | Applies user-configured brand-font substitution inside Figma Desktop |
| Surface | Translates selected components, sections, pages, windows, or documents into scoped handoff artifacts |
| Repo context | Reads customer-owned registry, token, component, font, and asset metadata |
| Agent handoff | Produces structured bundles an engineer, MCP host, or AI agent can apply without guessing |
Use the official Tessellate distribution channel for your workspace. That may be a Figma workspace/plugin install link, a beta distribution link, or an organization-managed plugin release. The installable product includes Tessellate Code, Inlay, Surface, repo context, and handoff export.
See Install and Connect for the customer setup flow.
Tessellate is configured by URLs or files your repo owns:
| Input | Purpose |
|---|---|
| Mapping registry | Figma node/component mappings for Tessellate Code |
| Surface design-system context | Component paths, import roots, token rules, naming conventions, fonts, and media destinations |
| Inlay profile | Font substitution rules for the user's installed fonts |
| Repo URL | Source links and generated handoff references |
| MCP/local bridge | Optional explicit path for writing Surface handoff files into a local checkout |
In Figma, open Plugins -> Tessellate -> Settings - connect repo... to save the registry URL, Surface context URL, repo URL, and optional Inlay profile URL.
Surface contexts can share font-source metadata with an Inlay profile so renderers know whether a family/style is backed by a repo path, raw URL, CSS URL, package, or local installation note before visual comparison.
Start with:
- Install and Connect
- Mapping Registry
- Inlay
- Surface
- Surface design-system context schema
- Example Surface context
| Path | Contents |
|---|---|
docs/ |
Product and integration docs |
schemas/ |
JSON schema contracts for repo-owned configuration |
examples/ |
Neutral example design-system context |
mappings/ |
Neutral example mapping registries |
scripts/ |
Product posture checks |
Tessellate stays inside the supported Figma plugin model:
- Uses Figma's official plugin and codegen APIs.
- Runs from explicit user actions and Dev Mode selection changes.
- Fetches user-configured registry or context URLs with user awareness.
- Keeps external connections and data handling documented.
- Does not authenticate to host product services without explicit user setup.
- Does not load executable plugin code from arbitrary remote URLs at runtime.
For review-sensitive deployments, keep copy focused on design-system handoff, implementation context, and repo-owned metadata.
Use this repository for product docs, integration contracts, issues, examples, and discussion around Tessellate configuration.
All rights reserved. See LICENSE.