Skip to main content

Connect to your GitHub repository

Connecting your GitHub repository 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 your GitHub repository to Figma's 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.

Initiate the connection​

  1. Open the Code Connect UI in your Figma library file.
  2. Click the Settings icon.
  3. Select Connect to GitHub. Log into the GitHub account that has access to the repository you want to connect.
  4. When prompted, grant access to either:
    • All repositories in your account.
    • Specific repositories that contain the components for your design system.

Authorize access​

The next step depends on your role in the Github organization you're trying to authorize:

  • If you have admin permissions

    1. Select Install and Authorize to grant Figma access.
    2. Confirm which repositories Figma can access.

  • If you don’t have admin permissions

    1. Select Request access.
    2. This sends a request to the organization administrator, who must approve access before you can continue.
info

For an overview of the permissions requested when authorizing with Github please visit GitHub App permissions overview →

Connect to a repository​

  1. Once authorization is complete, select one repository to connect to the Figma library file. Only one repository can be connected per library file.
  2. Choose the directories within that repository that contain your UI components.
  3. These directories will now be available in Code Connect.