Use your AI agent to link your Figma file to your Ditto project in minutes. Instead of connecting every text layer by hand, your agent matches, links, and organizes your product copy for you.
Step 1: Install both the Ditto and Figma MCP
Your AI agent needs to talk to both Ditto and Figma before it can connect your files. Follow the instructions below to install both MCPs:
đĄ Want to see everything the Ditto MCP can do beyond connecting Figma files, like enforcing your style guide or reusing existing copy? Check out Ditto MCP for AI agents
Step 2: Create your project
A Ditto project is the space where your team works on copy for a specific feature, product area, or Figma file. This is the only manual step youâll need to do to set up your project, your agent will handle the rest via the MCP!
Create a Ditto project from the Figma plugin:
Open and log into Dittoâs Figma plugin (Actions â Plugins & widgets â Ditto)
Copy your Figma fileâs URL and paste it into the plugin
Select Start a new project and click Continue
Congrats, you just created a Ditto project! đ
Step 3: Instruct your agent to connect your Figma file to your Ditto project
Now that youâve created your project, paste the prompt below into your agent, with both your Ditto project and Figma file links, and follow the agentâs instructions. Your agent will check with you at each step before it makes any changes so you can review the results. If you ran a Ditto Scan during workspace setup, your existing product strings are sitting in your component library, and the agent will automatically link all matching Figma text layers with your scanned strings.
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 4: Understand what your agent just did
Letâs double click into what your agent did for you, because this relates to the rest of the work youâll be doing in Ditto.
1. Your Figma text layers are linked to Ditto as text items. Text items capture your copy, properties like status, tags, and notes, and give you a place to share comments or suggest edits. Now that theyâre linked, theyâll stay in sync as you work: Edit the text item in Ditto, and the text layer updates in Figma, and vice versa.
2. Repeat copy stays linked to the same text item in Ditto. If the same string shows up on multiple screens, theyâre now all linked to one text item in Ditto. This means that when you update any individual instance, the edit is applied to every other instance. If linked items should be separated for any reason, simply split off the relevant instances.
3. [Optional] Group related text items into blocks. Blocks keep your project organized and provide structure, build metadata, and create hierarchy, making it easier to manage and navigate your copy. Teams often use blocks to group all the text from a Figma screen, page, or step in a flow.
4. Reused text items get attached to matching Ditto components. A component is copy your team reuses across projects, like a CTA or an error message. Any reused text in your codebase gets saved as components from Ditto Scan, so youâre starting with a library of pre-approved copy for reuse. Then, those components get linked to matching Figma text layers, which inherits the componentâs text value, properties, variants, and Dev ID. Edit a component instance, and it updates everywhere the component is attached.
âĄď¸ Up next: Learn how to collaborate with your team inside a Ditto project