Skip to content
Skip to main contentWhere does your team stand on AI adoption?
CONTACT SALESSTART BUILDING

Component mapping migration guide

Builder is transitioning from manual component mapping to component indexing, which automatically discovers and maps your design system components.

We recommend all customers migrate to Component indexing.

What to know

  • Component mapping will be removed from the platform.
  • Component indexing is faster and provides the same benefits as component mapping.

Migration overview

Component indexing eliminates the 7-step manual mapping workflow. Instead of creating .mapper.tsx files, publishing them, and maintaining them manually, you simply run one command to automatically discover your components.

Migration steps

Complete the following steps to migrate away from component mapping.

Step 1: delete mapper files

Delete all .mapper.tsx, .mapper.ts, .mapper.jsx, and .mapper.js files from your repository.

Step 2: un-publish existing mappings

Run the publish command without any mapper files to remove your existing mappings from your Builder space:

npx "@builder.io/dev-tools@latest" figma publish

You cannot use both component mapping and component indexing simultaneously.

Step 3: index your repository

Run the indexing command from your project root or design system repository:

npx "@builder.io/dev-tools@latest" index-repo

This automatically discovers your components and uploads them to your Builder space.

Step 4: continue to use the code command

Continue using the code command as before. Your generated code will now use the automatically discovered components:

npx "@builder.io/dev-tools@latest" code --url "figma-url"

What's next

For more details, see the Component indexing documentation.

Was this article helpful?