Skip to main content

Connect to your GitHub repositories

Connecting your GitHub repositories to Figma allows the Code Connect UI to access your codebase, simplifying and speeding up component mapping while providing extra context about those mappings.

info

GitHub Enterprise Server (GHES) is not supported.

What you get from the integration​

When you connect one or more of your GitHub repositories using Code Connect UI, you unlock several features:

  • Codebase suggestions: Component mapping fields will autocomplete with file paths and component names from your repository, making it faster and easier to create accurate mappings.
  • Enhanced AI context via MCP: Connected components provide richer context to the Figma MCP server. When AI agents interact with your designs, they receive direct references to your actual code implementation.
  • Custom LLM instructions: For each mapped component, you can add custom instructions through the "Add instructions for MCP" feature. These user prompts help your LLM generate more appropriate code when working with specific components, ensuring AI-generated code aligns with your team's patterns and best practices.

Connect to a GitHub account or organization​

note

Note: You must be the owner of the file you want to connect to GitHub or an organization admin.

  1. Open the Code Connect UI in your Figma library file.
  2. Click the Settings icon.
  3. Select Connect to GitHub and follow the steps in Manage the Figma GitHub app for a team or organization in the Help Center to finish connecting the GitHub account or organization to your Figma organization. You must connect the GitHub account or organization that has access to the repository you want to connect to your library file.
info

For an overview of the permissions requested when authorizing with GitHub, visit GitHub App permissions overview →.

Connect repositories to your library file​

Once authorization is complete, select a repository to connect to the Figma library file. You can click the + above the list of repositories to add more than one.

After you've connected the repositories to your library file, follow the steps in Getting Started with Code Connect UI to map components in your library file to code components in your repositories.