Embed an LLM Assistant in Figma to Enforce Naming, Variants, and Accessibility

Fix messy design systems: embed an LLM assistant in Figma to enforce naming, variants, and accessibility

Hook: If your team spends hours hunting for the right component, reconciling variant names, or writing alt-text after handoff, you need automation that lives inside Figma — not another spreadsheet. In 2026, LLMs like Google Gemini and Anthropic Claude have matured into reliable copilots for design teams. This tutorial walks you through building a Figma plugin that uses an LLM assistant to enforce component naming conventions, normalize variant labels, and generate accessible alt-text — securely and at scale.

Why build this in 2026: trends and decisions that matter

By late 2025 and into 2026, three trends made this pattern practical and valuable:

• Multimodal LLMs are production-ready: Gemini and Claude provide better context handling and controlled generation, making them suitable for structured tasks such as naming and alt-text synthesis.
• Design-system automation is business-critical: Content creators, publishers and agencies are demanding consistent, rights-safe images and metadata that integrate with CMS and DAM workflows.
• Plugin ecosystems matured: Figma's plugin APIs (background workers, UI iframes, plugin-scoped storage and shared plugin data) let you safely orchestrate edits while keeping API keys off the client by using a small server-side proxy.

What you'll ship by following this guide

• A Figma plugin that scans a selection or entire file for components and component sets.
• Rules-based checks (regex) to detect naming violations and a one-click rename flow.
• Variant normalization: map arbitrary variant labels to a canonical set (size, state, tone).
• Alt-text generation for images and decorative flagging for accessibility teams.
• Server-side gateway code that calls Gemini or Claude and returns structured JSON to the plugin.

Architecture & security: how to wire LLM calls safely

Never ship LLM API keys in a Figma plugin client. Use a small secure server (serverless function or Node/Express) as a gateway that:

1. Authenticates requests from the plugin (JWT or short-lived token from your platform).
2. Rate-limits and caches responses to control costs.
3. Calls Gemini (Google Vertex AI Generative API) or Anthropic Claude with your provider key and returns structured results.

Flow:

1. User selects nodes in Figma → plugin collects node metadata.
2. Plugin sends a minimal context bundle to gateway → gateway calls LLM.
3. Gateway returns structured suggestions (rename, variant mappings, alt-text) → plugin displays UI for review and/or applies changes.

Step 1 — Figma plugin scaffold

Start with the standard Figma plugin scaffold (manifest.json, code.ts, ui.html). Keep the UI lightweight: a sidebar that shows issues and suggested fixes.

Important permissions in manifest.json:

{
  "name": "LLM Assistant — Naming & Accessibility",
  "id": "com.yourorg.figma-llm-assistant",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html"
}

Minimal plugin role

The plugin's runtime must:

• Read selected nodes and their properties (node.name, type, children).
• Send a compact payload (node types, sample text, variant property keys) to your gateway.
• Apply safe edits: rename nodes, update variant property values, and set plugin data for alt-text (so your CMS/DAM can later ingest it).

Step 2 — What to send to the LLM (context & constraints)

LLMs perform best when given clear, structured prompts and constraints. Send a compact JSON payload describing each component like:

{
  "id": "abc123",
  "type": "COMPONENT | COMPONENT_SET | FRAME | INSTANCE",
  "name": "Old Button / Primary / Hover",
  "variantProperties": {"kind": "primary", "state": "hover"},
  "visibleText": ["Buy now"],
  "imagePresent": true
}

Tip: include your team's naming policy in the gateway’s prompt template (not as free text every call) to keep payload sizes small and behavior consistent.

Example naming rules (for the prompt)

• Use componentType/element first (Button, Card, Avatar).
• Follow with modifier (primary, secondary) and then state (default, hover, disabled).
• Separate with slashes: Button / Primary / Hover
• Use lowercase for variant property values; map synonyms (cta → primary).

Step 3 — Sample gateway code (Node serverless example)

This is a simplified example using the Gemini API via Google Cloud Vertex AI (2026 style) and an Anthropic Claude example. Your real gateway should include auth, caching, and error handling.

Gemini (Vertex AI) request sketch

// Express handler (simplified)
app.post('/api/llm/norm-names', async (req, res) => {
  const items = req.body.items; // array of node summaries
  const prompt = buildPromptForNaming(items, TEAM_NAMING_GUIDELINES);

  const response = await fetch('https://vertexai.googleapis.com/v1/projects/PROJECT/locations/global/models/gemini-1.3', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${process.env.GOOGLE_ACCESS_TOKEN}`, 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt, maxOutputTokens: 512 })
  });
  const json = await response.json();
  res.json(parseGeminiResponse(json));
});

Anthropic Claude request sketch

// Classic fetch to Claude
const resp = await fetch('https://api.anthropic.com/v1/complete', {
  method: 'POST',
  headers: { 'x-api-key': process.env.CLAUDE_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ model: 'claude-3-opus', prompt, max_tokens: 800 })
});

Provider notes: in 2026, both providers support structured JSON outputs using a schema or function-like calls (e.g., JSON schema, function calling). Prefer schema-constrained responses so your plugin can parse suggestions without hallucinations; see running LLMs on compliant infrastructure for operational guidance.

Step 4 — Prompt design and output schema

Design the gateway prompt to ask for structured JSON only. Example instruction to the LLM:

Given these inputs describing Figma components and your team's naming rules, output a JSON array with fields: id, suggested_name, suggested_variant_map (key→value), alt_text (string or null), confidence (0-1), reasons (brief list). Output ONLY JSON.

Example JSON output schema (what the plugin expects):

[{
  "id": "abc123",
  "suggested_name": "Button / Primary / Hover",
  "suggested_variant_map": {"kind": "primary", "state": "hover"},
  "alt_text": "Primary action button labeled \"Buy now\"",
  "confidence": 0.94,
  "reasons": ["contains 'Buy now' text", "uses primary color token"]
}]

Step 5 — Handling component sets and variants

Figma represents variants as COMPONENT_SET nodes with children that are COMPONENT instances having variantProperties. Strategy:

1. For each COMPONENT_SET, collect the set of variant property keys (e.g., kind, size, state).
2. Send a compact sample of existing variant values to the LLM and ask for canonical mapping (e.g., map {primary, cta, primary-cta} → primary).
3. Apply mappings by updating each child's name and setting plugin-shared metadata for the standardized value.

Code pattern (TypeScript-like pseudocode):

if (node.type === 'COMPONENT_SET') {
  const keys = getVariantKeys(node);
  const sample = node.children.map(c => ({id: c.id, props: c.variantProperties, name: c.name}));
  const suggestions = await gateway.normalizeVariants(sample);
  suggestions.forEach(s => {
    const child = figma.getNodeById(s.id);
    child.name = s.suggested_name;
    child.setSharedPluginData('designsystem', 'variant', JSON.stringify(s.suggested_variant_map));
  });
}

Step 6 — Alt-text generation and accessibility workflow

Alt-text is both a usability and legal requirement for many publishers. LLMs can help synthesize alt-text but you must resist blind automation. Best practice:

• Generate alt-text drafts: LLM returns concise alt strings with confidence and rationale.
• Mark decorative images: return a flag like is_decorative so a reviewer can mark images that should be ignored by CMS ingestion.
• Human-in-the-loop: present alt-text suggestions in the plugin UI so content authors or accessibility engineers can accept, edit, or reject.
• Store alt-text in pluginData: use node.setPluginData('alt', altText) so your downstream automation can pick it up when exporting assets to your DAM/CMS or product pipelines — see integrations like product catalog & export.

Prompt guidance for alt-text generation (give to the LLM):

• Be concise (1–2 short sentences), avoid starting with “Image of…”, include the functional purpose if the image is a control.
• If text appears in the image that matters, include it verbatim but in quotes.
• If the image is purely decorative, return is_decorative: true and alt_text: "".

Step 7 — UX: how the plugin surfaces suggestions

Design a simple three-column sidebar:

1. Left: list of found issues (naming violations, non-canonical variants, missing alt-text).
2. Middle: detailed suggestion panel (suggested name, variant mapping, alt-text). Allow inline edit and show LLM confidence and reasons.
3. Right: bulk actions: apply all with low/high confidence thresholds, or open a PR-like review flow that outputs a changelog JSON.

Step 8 — Avoiding hallucinations & verifying outputs

LLMs can invent details. Reduce risk:

• Constrain outputs to JSON schema and validate on the gateway before returning to the plugin — include schema checks as part of CI.
• Use a confidence score (or model-provided likelihood) and require human approval below a threshold (e.g., < 0.8). For deciding when to gate automation, see guidance on autonomous agents in the developer toolchain.
• Cross-check with deterministic heuristics: regex-based rename suggestions for simple violations (e.g., missing slash separators) before invoking the LLM.

Step 9 — Testing, metrics, and CI

Automate tests and measure impact:

• Unit tests for gateway prompt outputs using canned responses; include schema assertions from your IaC/verification templates so prompts and gateway behavior are versioned.
• End-to-end tests in a staging Figma file (create fixtures with misnamed components and assert corrected names after apply); measure results with toolsets from tool and marketplace roundups.
• Metrics to collect: time saved per designer, % of components fixed automatically, alt-text acceptance rate, LLM API usage & cost.

Step 10 — Cost control & rate limits

LLM calls cost money and have quotas. Strategies:

• Cache by hashing component fingerprints (structure + visible text) — combined with edge and serverless choices from the free‑tier face‑offs.
• Batch calls: request suggestions for up to 50 nodes in a single call to amortize request overhead.
• Offer on-demand vs. continuous enforcement modes. Continuous (on-save) can be rate-limited and run nightly; on-demand runs when a designer clicks "Lint".

Putting it together — sample end-to-end flow

1. Designer opens plugin, clicks "Scan file".
2. Plugin extracts concise node summaries and posts to /api/llm/checks (authenticated).
3. Gateway builds a prompt using team naming rules and model choice (Gemini/Claude), requests a JSON array response.
4. Gateway validates, caches, then returns suggestions to plugin UI (design for resilient backends using cloud‑native patterns).
5. Designer reviews 12 low-confidence alt-text items, edits 3, accepts the rest, and clicks "Apply".
6. Plugin applies renames, sets pluginData('alt'), and writes a changelog to file-level plugin data for auditing.

Advanced strategies and integrations (2026)

To scale across publishing pipelines, integrate the plugin results with other systems:

• DAM/CMS sync: export pluginData as JSON that your DAM ingests during asset export, so alt-text and variant metadata ride with image derivatives — tie into product export pipelines like the Node/Express + Elasticsearch examples.
• Design token awareness: incorporate token metadata (color, spacing) into prompts so the LLM can use token names in reasons (e.g., "uses token brand/primary").
• Audit trail: sign changes with user id and timestamp; store diffs centrally for governance — combine with verification tooling from IaC verification patterns.
• Model-switching: let teams pick Gemini for multilingual precision or Claude for controlled style. Your gateway abstracts provider differences and follows the recommendations in LLM compliance guides.

Real-world examples and results (experience-driven)

From projects we’ve seen in 2025–2026: a mid-sized publishing team reduced time-to-publish by 22% by auto-generating alt-text and normalizing component names before export. A consumer app team reduced broken component references by 45% after enforcing variant canonicalization at pull request time. These are consistent with industry trends toward integrating generative AI directly into authoring tools and using edge and low‑cost stacks to scale safely.

Operational & legal considerations

Two key areas you must address before rolling out to production:

• Data privacy: redact or pseudonymize any user-sensitive strings before sending to third-party LLMs. Maintain a privacy policy that specifies what gets shared; follow the patterns in LLM compliance guidance.
• Licensing & provenance: tag content generated by the LLM with metadata (generated_by, model, timestamp) so downstream editors and compliance teams can audit usage.

Troubleshooting common issues

• Plugin times out: batch fewer nodes or implement background jobs with notifications.
• Inconsistent variant mapping: expand your sample set and include canonical value lists in gateway prompts.
• Hallucinated alt-text: add a simple OCR/text-extraction pass (extract visibleText) and require the model to cite text evidence when referencing text in images — see document workflow patterns in micro‑app document workflows.

Checklist before ship

• Gateway with auth, caching, and cost monitoring (serverless choice).
• Prompt templates for naming, variant normalization, and alt-text with JSON schema enforcement (verification & schema).
• Plugin UI for review/edit/apply flows and changelog auditing.
• Integration points for DAM/CMS and export pipelines (export integration patterns).
• Documentation and training for designers and content editors on how to review LLM suggestions.

Future predictions (late 2026 and beyond)

Expect continued improvements in model control and on-device multimodal inference. By the end of 2026, tools will support real-time, local prompting for low-risk transformations and hybrid architectures where heavy reasoning runs in the cloud and deterministic checks run locally. This split will reduce costs and improve privacy while enabling designers to keep working within Figma contextually.

Conclusion — build with control, ship with confidence

Embedding an LLM assistant into Figma to enforce naming, variants, and accessibility is no longer experimental — it’s a practical way to cut cycles, reduce errors, and produce rights-safe metadata at scale. The pieces you need in 2026 are stable: multimodal LLMs with schema constraints, robust plugin APIs, and small secure gateway services. Follow the prompts, validation rules, and human-in-the-loop guardrails above and your design system will behave like a professional-grade product.

Actionable takeaways

• Start small: run naming checks as an opt-in Scan action before enabling auto-apply.
• Use JSON-schema enforcement in the gateway to avoid hallucinations.
• Batch and cache LLM calls to reduce cost; include confidence thresholds for auto-apply.
• Integrate alt-text into your DAM/CMS ingestion pipeline so generated metadata is useful downstream.

From the trenches: teams that combined deterministic rules (regex + token lists) with LLM suggestions saw the best trade-off between speed and accuracy.

Next steps — try it now

Ready to prototype? Fork a Figma plugin scaffold, add a tiny serverless gateway, and wire up either Gemini or Claude. If you want a jumpstart, clone our example repo (includes manifest, a sample gateway, prompt templates, and test fixtures) and adapt it to your naming policy.

Call to action: Build the plugin, run a pilot with 1–2 designers, measure time-saved and alt-text acceptance, then expand. If you want help integrating the plugin output with a DAM or CMS pipeline, reach out to get a tailored integration checklist.

Related Reading

• Running Large Language Models on Compliant Infrastructure: SLA, Auditing & Cost Considerations
• Free‑tier face-off: Cloudflare Workers vs AWS Lambda for EU-sensitive micro-apps
• IaC templates for automated software verification: Terraform/CloudFormation patterns
• Beyond Serverless: Designing Resilient Cloud‑Native Architectures for 2026
• How to Build a High‑Converting Product Catalog for Niche Gear — Node, Express & Elasticsearch Case Study
• Goalhanger’s Subscriber Strategy: What Podcasts Can Learn from a £15m-a-Year Model
• Pitch Like a Studio: How to Adapt Vice’s Strategy When Selling Branded Shows to Platforms
• Fan Tech Maintenance: Keep Your Smart Lamp, Smartwatch and Speaker Game-Ready
• Neighborhood Swap: Host a Community Fitness Gear Exchange (Dumbbells, Bikes, Accessories)
• Theater Acts and Mob Acts: Anne Gridley’s Stagecraft and the Femme Fatale in Crime Storytelling