To support some features, Figma uses the Figma GitHub app. GitHub apps are integrations and tools provided in the GitHub Marketplace. The Figma GitHub app enables:
- Cloning repositories in code layers and Figma Make.
- Figma Make's push to GitHub feature. To let you back up your code, track changes, and continue working in your preferred development tools, you can push your Make projects directly to GitHub.
- Code Connect UI. Code Connect UI lets you map design components in your Figma libraries to the corresponding code components in your GitHub account or organization repositories.
Connect the Figma GitHub app
As a team or organization admin, you can connect the Figma GitHub app to a GitHub organization, enabling features like the pushing from Figma Make to Github and Code Connect UI. Organization and Enterprise plans can connect multiple GitHub organizations using the Figma GitHub app. GitHub Enterprise Server isn't supported.
The exact steps you follow depend on two factors:
- Plan: Professional, Organization, and Enterprise plans have a different way to access the Figma GitHub app settings than the Starter plan.
- Privileges in GitHub: These steps must be initiated by a Figma organization or team admin, but also require a GitHub organization administrator to complete the process. The Figma organization admin and the GitHub organization admin can be the same person, but it's not required.
The steps for each scenario are provided below:
- You are both a Figma administrator and a GitHub organization administrator
- You are a Figma administrator but not a GitHub organization administrator
After connecting the Figma GitHub app, you then need to allow cloning of repositories that will be used in code layers and Figma Make.
Connect the Figma GitHub app: Figma admin is also GitHub admin
These steps assume you're a Figma organization administrator and a GitHub organization administrator.
Professional, Organization, and Enterprise plans
To connect Figma to GitHub:
- Open your team or organization in Figma.
- Select Admin from the sidebar.
- Select the Settings tab.
- In the Resources section, click Figma GitHub app.
- Click Connect GitHub.
- Next to Install Figma app to your GitHub organization, click Install.
- Select the GitHub account or organization you want to connect to Figma.
- Select whether you want to authorize the Figma GitHub app for all repositories in the account or organization, or for a select set. You can change this setting after the GitHub organization or account is connected.
- Click Install & Authorize.
After completing these steps, to use the repositories with code layers and Figma Make, you must allow cloning of those repositories.
Note: The Professional plan is limited to one connected GitHub organization or account. Organization and Enterprise plans can connect multiple GitHub organizations or accounts.
Starter plan
To connect Figma to GitHub:
- From the file browser, click All folders.
- Click the next to the team name, and then select View settings.
- Under Figma GitHub app, click Manage.
- Click Connect GitHub.
- Next to Install Figma app to your GitHub organization, click Install.
- Select the GitHub account or organization you want to connect to Figma.
- Select whether you want to authorize the Figma GitHub app for all repositories in the account or organization, or for a select set. You can change this setting after the GitHub organization or account is connected.
- Click Install & Authorize.
After completing these steps, to use the repositories with code layers and Figma Make, you must allow cloning of those repositories.
Note: The Starter plan is limited to one connected GitHub organization or account.
Connect the Figma GitHub app: Figma admin isn't GitHub admin
These steps assume you're a Figma organization administrator but not a GitHub organization administrator. To complete these instructions, you'll need to work with one of your GitHub organization admins.
Professional, Organization, and Enterprise plans
Steps for the Figma organization admin:
- Open your team or organization in Figma.
- Select Admin from the sidebar.
- Select the Settings tab.
- In the Resources section, click Figma GitHub app.
- Click Connect GitHub.
- Next to Install Figma app to your GitHub organization, click Install.
- Select the GitHub account or organization you want to connect to Figma.
- Select whether you want to authorize the Figma GitHub app for all repositories in the account or organization, or for a select set. You can change this setting after the GitHub organization or account is connected.
- Click Authorize & Request.
After clicking Authorize & Request, you should reach out to one of your GitHub organization administrators in order to complete the process in GitHub. While they should be notified automatically, it can be faster to contact a GitHub administrator directly.
Note: The Professional plan is limited to one connected GitHub organization or account. Organization and Enterprise plans can connect multiple GitHub organizations or accounts.
Starter plan
Steps for the Starter team admin:
- From the file browser, click All folders.
- Click the next to the team name, and then select View settings.
- Under Figma GitHub app, click Manage.
- Click Connect GitHub.
- Next to Install Figma app to your GitHub organization, click Install.
- Select the GitHub account or organization you want to connect to Figma.
- Select whether you want to authorize the Figma GitHub app for all repositories in the account or organization, or for a select set. You can change this setting after the GitHub organization or account is connected.
- Click Authorize & Request.
After clicking Authorize & Request, you should reach out to one of your GitHub organization administrators in order to complete the process in GitHub. While they should be notified automatically, it can be faster to contact a GitHub administrator directly.
Note: The Starter plan is limited to one connected GitHub organization or account.
GitHub organization admin: Finish connecting Figma to GitHub
These steps must be performed by a GitHub organization administrator:
- Go to
https://github.com/organizations/<YOUR ORG>/settings/installations, whereYOUR ORGis the name of your GitHub organization. - Under Pending GitHub Apps installation requests, in the row for Figma, click Review request.
- Review the requested configuration. You can adjust what repositories Figma will have access to.
- Click Approve, Install, & Authorize.
After clicking Approve, Install, & Authorize, let the Figma organization or team administrator know that the GitHub steps are completed. To use the repositories with code layers and Figma Make, the Figma administrator must now allow cloning of those repositories.
Allow cloning of your repositories
After access to repositories is authorized through the Figma GitHub app, you must allow cloning of the repositories so they can be used with code layers and Figma Make. The exact steps you follow depend on your plan type.
Professional, Organization, and Enterprise plans
To allow cloning:
- Open your team or organization in Figma.
- Select Admin from the sidebar.
- Select the Settings tab.
- In the Resources section, click Figma GitHub app.
- Under Connected accounts, click a GitHub organization.
- For each repository you want to enable for code layers and Figma Make, click the slider under Allow cloning to Figma cloud.
The changes are automatically saved. Users can now start cloning those repos in Figma Make and for their code layers.
Starter plan
To allow cloning:
- From the file browser, click All folders.
- Click the next to the team name, and then select View settings.
- Under Figma GitHub app, click Manage.
- Under Connected accounts, click the connected GitHub organization.
- For each repository you want to enable for code layers and Figma Make, click the slider under Allow cloning to Figma cloud.
The changes are automatically saved. Users can now start cloning those repos in Figma Make and for their code layers.
Disconnect the Figma GitHub app
As a team or organization admin, you can disconnect the Figma GitHub app, which removes the ability to push from Figma Make to GitHub and connect Code Connect UI to your code components. If desired, you can connect the Figma GitHub app again later.
- From the file browser, click All folders.
- Click the next to the team name, and then select View settings.
- Under Figma GitHub app, click Manage.
- Click Remove from Figma.
- Open your team or organization in Figma.
- Select Admin from the sidebar.
- Select the Settings tab.
- In the Resources section, click Figma GitHub app.
- Click Remove from Figma.
Revoke authorization for the Figma GitHub app
After authorizing the Figma GitHub app for a user account, you may want to fully revoke the authorization of the Figma GitHub app. When you revoke the authorization for the GitHub app, it means if you later want to reconnect the app, you'll also need to reauthorize it.
To revoke authorization for the Figma GitHub app:
- Go to https://github.com/settings/apps/authorizations.
- Click Revoke next to the Figma entry.