Skip to main content

How to Reuse Your Codebase Strings in Figma with AI

Your product already has hundreds of strings in code, from button labels to error messages to onboarding copy. This guide shows you how to bring them into Ditto with your AI agent, reuse them while you design new flows in Figma, and hand the final copy back to developers while maintaining a single source of truth.

Step 1: Import your existing keys from your codebase into Ditto

Ditto scans your codebase, identifies all product copy, and adds them to your Ditto library as components. This process keeps your existing keys and translations as they are, and makes them searchable and reusable by your whole team.

Scan your code repository with your AI agent:

  1. Log in to Ditto

  2. At the top of the Home page, copy the relevant prompt into your AI tool that has access to your codebase and run it.

    1. If you don't have access to a Al coding tool, a developer can run these commands in their terminal instead.

💡 Trial workspaces can scan up to 1000 strings at a time. If you hit that limit, scan a smaller folder first.

Step 2: Reuse your existing keys in Figma

Now that your live copy is in the component library, you can reuse it instead of rewriting "Continue" or "Something went wrong" every time you’re working on a new flow. Reusing a string means attaching its component to your text. The text then stays in sync with the library and keeps its existing key, so developers don't need to create a new string.

You can reuse your strings in a few ways:

Attach existing copy to your designs in Figma

You can attach any text item in your designs to a component to reuse that piece of copy. The component’s text copy, properties, and variants will replace the text item’s current values.

Attach a text item to a component:

  1. Select a Figma text layer, click the Attach to library component icon in the Library section of the details panel

  2. Search for the component in your library and click Attach

Alternatively, you can search for copy in your component library to reuse instead of typing placeholder text.

  1. Go to the Assets tab and select Library Components

  2. Browse and select a component

  3. Click Add to insert it into your design as a new text layer

💡 On the Figma desktop app, you can also drag and drop components into your design

Reuse copy in bulk using Ditto’s MCP

Bulk link your Figma text layers with your Ditto project and components in minutes using Ditto and Figma’s MCP. It creates text items and links exact matches to your library components, and it checks with you before making changes. Follow the instructions in the video and paste the prompt below into your AI Agent.

You're helping me link Figma text nodes to Ditto text items, then link matched Ditto text items to library components. Follow these steps in order. At each step, tell me what you're about to do and wait for my explicit confirmation before taking the action — never proceed automatically.

1. Identify the project and file, then confirm

Look up the Ditto project from the URL below and tell me its name. Wait for my confirmation before doing anything else. Then pull all text nodes from the Figma file.

2. Link Figma text nodes → Ditto project text items

For every text node in the Figma file:

- Search only within this Ditto project for a text item whose text is an exact match (case-sensitive, trimmed) to the node's text. Search with matchType "anyWord", not "containsPhrase" — containsPhrase has produced false negatives on real matches (especially contractions like "Don't" or "We'll"). Treat anyWord results as candidates only, then verify each one with a strict trimmed, case-sensitive comparison before calling it a match — never conclude "no match" from an empty containsPhrase result.

- If a match exists, link the node to that existing item.

- If no match exists, create a new text item in the project with the node's text, then link the node to it.

- If multiple Figma nodes have identical text, link each node to the same Ditto text item — don't create duplicate items for repeated text.

3. Offer to organize text items into blocks

Once step 2 is fully done, ask: "Want me to group these into blocks (Ditto's grouping for text items), roughly one per screen?" Wait for my answer before doing anything.

If I say yes, apply this logic (blocks are a strict partition — a text item can only belong to one block, so "one block per screen" only works once shared strings are pulled out):

- Create one block per screen, holding that screen's single-screen strings.

- Create one additional shared block for any text item that appears on more than one screen (e.g. chrome, footer, nav).

- For components: if a component only ever appears on one screen, its text items can sit in that screen's block; if it appears across multiple screens, its text items go in the shared block instead.

If I say no, skip this step entirely and move on.

4. Link Ditto project text items → library components

Once step 3 is resolved, go through every text item in the project (existing and newly created) and check it against text items in my Ditto component library:

- Search the same way as step 2 — matchType "anyWord", never "containsPhrase" — then verify each candidate with a strict trimmed, case-sensitive comparison.

- If a project text item's text is an exact match to a library component's text, link them.

- If there's no exact match, leave it alone — don't create new components and don't link on partial/fuzzy matches.

5. Report back

Summarize: how many nodes linked to pre-existing items, how many new items were created, how many blocks were created (if any) and how strings were distributed across them, and how many items got linked to a library component. Flag anything ambiguous (e.g. near-duplicate text, empty text nodes) instead of guessing.

Ditto project: [Insert Ditto Project URL from the Ditto web app]

Figma file: [Insert Figma File URL]

Step 3: Hand off copy to development

When your design is ready to be handed off for development, developers can get the Developer IDs for each text item directly from the Figma layer names instead of copying the Figma text layers.

Show Developer IDs in Figma layer names:

  1. Click the three-dot menu in the top right of the Ditto plugin

  2. Go to Settings and turn on Developer ID indicator

💡 The Dev IDs are visible to all users, even if they don’t have a Ditto seat

Once the developers have the Dev IDs, they can fetch the latest copy from Ditto via the API or CLI in a format they prefer (eg. JSON, iOS, Android, etc.). Going forward, when copy changes in Ditto, developers can re-fetch the file as part of their normal deployment process rather than tracking down each changed string manually.

Related Articles
Did this answer your question?