Ditto

cx-copy

Text → Style Guide → Ditto

Audits UI text against the Ditto style guide. Select a single text node (quick check), a frame (full audit), or a section (multi-screen). Produces English translations and optionally pushes to Ditto with DE/TR variants.

How to trigger

cx-copy

Type this in the Kiro chat with something selected in Figma — a text node, frame, or section. All communication during the flow is in English.

What happens

  1. 1
    Extract — Traverses the frame, collects all text nodes with their content and parent context. Skips placeholders and shared shell elements.
  2. 2
    Read annotations — Fetches Dev Mode annotations and pinned Figma comments for copy directions.
  3. 3
    Load style guide — Fetches all Ditto rules (clarity, conciseness, active voice, CTAs, wordlist).
  4. 4
    Search existing text — Checks Ditto for approved copy that could be reused. Deduplicates identical text across frames.
  5. 5
    Audit — Produces a table: current text, issue category, suggested EN text, violated rule.
  6. 6
    Apply in Figma — Corrections are applied in the Figma frame first (in-place or duplicate). This ensures text matches exactly when linking later.
  7. 7
    Push to Ditto — Creates text items in Ditto (EN base, status: Review), generates DE + TR variants (status: WIP), applies semantic tags (Header, CTA, Label, Description).
  8. 8
    Link in Ditto Plugin — Close Bridge, open Ditto Plugin. Accept linking suggestions (auto-matched by identical text). For variants: select items → choose variant → "Add to each".

Plugin constraint

The Figma Desktop Bridge and the Ditto Plugin cannot run simultaneously — only one plugin can be active at a time.

Bridge ON

Steps 1–7: Agent reads and edits Figma

Ditto Plugin ON

Step 8: User links text items

Style guide priorities

  1. Be clear (comprehension first)
  2. Be concise (remove fluff)
  3. Avoid generic CTAs (specificity)
  4. Use active language (engagement)
  5. Stay neutral (tone)

MCP tools used

Figma Console MCP

Selection, text extraction, annotations, comments, text replacement

Docs →

Ditto MCP

Style guide rules, text search, text item creation, variant management

Docs →

Prerequisites

  • Figma Desktop with Bridge Plugin running
  • Correct Figma file confirmed (asks if multiple are open)
  • A frame or section with text content selected
  • Ditto project selected (creates one if needed)
  • DITTO_API_TOKEN set

Output formats

  • Audit table — Current text, issue, suggested EN, rule violated
  • In-place — Replaces text directly in the selected frame
  • Duplicate — Creates a copy with English text (original untouched)
  • Ditto sync — EN base (REVIEW status) + DE/TR variants (WIP status) with semantic tags
← Back to all flows