Integrating MicroKopy with Your Figma Design Workflow

One of the most common frustrations in product design is the gap between what copy says in Figma and what copy says in the live product. Designers use placeholder text, developers use lorem ipsum, and somewhere between handoff and shipping, the real words get lost.

MicroKopy's Figma integration is built to close that gap. Here's how to set it up and get the most out of it.

The Problem: Copy Lives in Three Places

In most teams, copy lives in three disconnected places: 1. A Google Doc or Notion page (the source of truth in theory) 2. Figma (usually outdated or placeholder) 3. The codebase (sometimes diverged from the doc)

MicroKopy becomes a fourth location, but it's the one that syncs the others. When copy is accepted in MicroKopy, it propagates outward.

Setting Up the Integration

Step 1: Connect your Figma workspace

In MicroKopy, go to Settings → Integrations and click "Connect Figma." You'll be redirected to authorise the MicroKopy app on your Figma account. Once connected, you can select which Figma files to link to which MicroKopy projects.

Step 2: Tag your Figma text layers

For the integration to know which text layers to update, you need to add a naming convention to your Figma layers. We use a simple prefix:

• "[mk:cta-primary]", your primary CTA button text
• "[mk:error-email]", the email validation error message
• "[mk:empty-state-title]", the empty state heading

Any text layer with the "[mk:]" prefix will be recognised by the integration.

Step 3: Map copy strings to layers

In MicroKopy, each accepted copy string can be assigned a Figma layer tag. Once mapped, any update to that string in MicroKopy will be pushed to the corresponding layer in Figma on next sync.

How the Sync Works

Sync is currently one-directional: MicroKopy → Figma. Changes made directly in Figma are not pulled back into MicroKopy (that creates conflicts). Think of MicroKopy as the master record and Figma as a display layer.

Syncs happen: - Manually (click "Sync to Figma" in the project view) - Automatically when a string status changes to "Accepted"

Best Practices for Teams

Use the integration during design review

Before a design review, run a sync to ensure your Figma file has the latest accepted copy. This eliminates the "we need to update the copy in the designs" comment from every review.

Lock Figma text layers after sync

After syncing, lock the text layers that are managed by MicroKopy. This prevents accidental overwriting in Figma and signals to other designers that these strings have an external source of truth.

Version your copy alongside designs

MicroKopy's library tracks the history of every accepted string. If a copy decision gets questioned in design review, you can point to when it was accepted and by whom. The same way you'd use Figma's version history for visual decisions.

Coming Up

We're working on bi-directional sync, which will let designers make small edits in Figma and flag them for review in MicroKopy, rather than going through the full generation flow for minor tweaks. If that's something you'd find useful, let us know, your feedback shapes our roadmap.