Who can use this feature
Starter, Professional, Education, Organization, and Enterprise plans
Admins only
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, cloning repositories for use with code layers and Figma Make is allowed by default. You may want to prevent cloning of individual repositories or allow cloning if you're previously prevented it.
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, users can use the repositories for code layers and in Figma Make.
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, users can use the repositories for code layers and in Figma Make.
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. After the steps in GitHub are completed, users can now use the repositories with code layers and Figma Make.
Prevent or allow cloning of your repositories
After access to repositories is authorized through the Figma GitHub app, cloning of the repositories is allowed for code layers and Figma Make. However, you may want to disable cloning for certain repositories and then allow cloning in the future. The exact steps you follow depend on your plan type.
Professional, Organization, and Enterprise plans
To prevent or 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 disable or enable for code layers and Figma Make, click the slider under Allow cloning to Figma cloud.
The changes are automatically saved. If disabled, users will no longer be able to clone those repos in Figma Make and for their code layers.
Starter plan
To prevent or 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 disable or enable for code layers and Figma Make, click the slider under Allow cloning to Figma cloud.
The changes are automatically saved. If disabled, users will no longer be able to clone 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.
Professional, Organization, and Enterprise plans
- 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.
Starter plan
- 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.