{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-agen-for-work/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["Notification","LightboxImage"]},"type":"markdown"},"seo":{"title":"Figma integration","siteUrl":"https://developers.frontegg.com/","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"figma-integration","__idx":0},"children":["Figma integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Figma is a collaborative interface design tool for creating, sharing, and reviewing designs and prototypes. The Figma integration with Frontegg connects to the Figma REST API, letting your application read file content and metadata, read and create comments, and read project metadata on behalf of your users."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Prerequisites","type":"attention"},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A Figma account"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A newly created app starts in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Draft"]}," state, which you and your team admins can use for testing right away. To let other users connect the app, you must submit it for review from the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Publish"]}," tab."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"connect-figma","__idx":1},"children":["Connect Figma"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"step-1-open-the-developer-portal","__idx":2},"children":["Step 1: Open the developer portal"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Sign in to Figma and go to the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.figma.com/developers/apps"},"children":["Figma apps page"]},". Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create a new app"]}," in the top-right corner."]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/figma-1.2482c08c1528ac345be57cdf33280c20046e807c9bd5a400e233ef113204cb9a.1ce25488.png","alt":"Figma apps page with the Create a new app button highlighted"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"step-2-create-a-new-app","__idx":3},"children":["Step 2: Create a new app"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create a new app"]}," dialog, enter a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Name"]}," for your app, for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Frontegg Integration"]},". Choose an ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["owner"]}," (a team or organization) — this can't be changed later. Then click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create app"]},"."]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/figma-2.6952b1fd681c05e21df24e5435b775a703f2d1c65aa1e5b8d23f6d40d08c2cc6.1ce25488.png","alt":"Figma Create a new app dialog with the name and owner filled in"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"step-3-copy-your-credentials","__idx":4},"children":["Step 3: Copy your credentials"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Figma displays your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client ID"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client Secret"]},". Copy both and store them somewhere safe — you will need them when configuring the integration in the Frontegg portal."]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Keep your credentials secure","type":"attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Figma shows the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client Secret"]}," only once. If you close this window without copying it, you will need to generate a new one. Never share your Client Secret or commit it to version control."]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/figma-3.4f39fd5f1df5bbb4b4324e206e0086ca0787f9832e2c23abf565e7960c3474cc.1ce25488.png","alt":"Figma credentials dialog showing the Client ID and Client Secret"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After copying the secret, click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Done"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"step-4-add-the-redirect-url","__idx":5},"children":["Step 4: Add the redirect URL"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Open your app and select the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["OAuth credentials"]}," tab. Under ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Redirect URLs"]},", click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add a redirect URL"]},", enter your Frontegg Redirect URL, and click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add"]},":"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://YOUR_MCP_GATEWAY_URL/integration-callback"]}]}]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"The redirect URL must match exactly","type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redirect_uri"]}," in the OAuth request must match a URL entered here exactly, including the protocol, any port, and trailing slashes. Otherwise Figma rejects the login with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redirect_uri"]}," mismatch error."]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/figma-4.b0a3819c47dbbc3609f10a8d4012a2e9dc006cbf7854d8bacd470b4996500167.1ce25488.png","alt":"Figma OAuth credentials tab with the Frontegg redirect URL entered"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"step-5-configure-oauth-scopes","__idx":6},"children":["Step 5: Configure OAuth scopes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Select the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["OAuth scopes"]}," tab. Expand the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Users"]},", ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Files"]},", and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Projects"]}," categories and enable the scopes below by selecting their checkboxes:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Scope"},"children":["Scope"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["current_user:read"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Read the current user's name, email, and profile image"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file_content:read"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Read the contents of and render images from files"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file_metadata:read"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Read metadata of files"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file_comments:read"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Read comments in accessible files"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file_comments:write"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Create, modify, and delete comments in accessible files"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["project_metadata:read"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Read metadata of projects"]}]}]}]}]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Minimum required scopes","type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For core file and comment functionality you need ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["current_user:read"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file_content:read"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file_comments:read"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file_comments:write"]},". To list a team's project structure, Figma also requires the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["projects:read"]}," scope, which is marked ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Private"]}," and must be approved by Figma."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Scopes are saved automatically when you select them."]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/figma-5.544a3f163e2754850726edebc94cdae7c074ad4da15e4a9d3dbcad35f3fcfd0f.1ce25488.png","alt":"Figma OAuth scopes tab with the required scopes selected"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configure-the-frontegg-portal","__idx":7},"children":["Configure the Frontegg portal"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once you have your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client ID"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client Secret"]}," from the steps above, enter them in the integration configuration page of the Frontegg portal:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Open the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Frontegg portal"]}," and navigate to [ENVIRONMENT] → Integrations → Figma."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enter the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client ID"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Client Secret"]}," in the corresponding fields."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select the required ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["scopes"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Save"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"additional-resources","__idx":8},"children":["Additional resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.figma.com/developers/api"},"children":["Figma REST API documentation"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.figma.com/developers/apps"},"children":["Figma apps page"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://developers.figma.com/docs/rest-api/oauth-apps/"},"children":["Figma OAuth apps guide"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/agen-for-work/connectors/redirect-url"},"children":["How to get your Redirect URL"]}]}]}]}]},"headings":[{"value":"Figma integration","id":"figma-integration","depth":2},{"value":"Connect Figma","id":"connect-figma","depth":3},{"value":"Step 1: Open the developer portal","id":"step-1-open-the-developer-portal","depth":4},{"value":"Step 2: Create a new app","id":"step-2-create-a-new-app","depth":4},{"value":"Step 3: Copy your credentials","id":"step-3-copy-your-credentials","depth":4},{"value":"Step 4: Add the redirect URL","id":"step-4-add-the-redirect-url","depth":4},{"value":"Step 5: Configure OAuth scopes","id":"step-5-configure-oauth-scopes","depth":4},{"value":"Configure the Frontegg portal","id":"configure-the-frontegg-portal","depth":3},{"value":"Additional resources","id":"additional-resources","depth":3}],"frontmatter":{"category":"Design","seo":{"title":"Figma integration"}},"lastModified":"2026-06-10T05:29:28.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/agen-for-work/connectors/marketplace/figma","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}