> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stackone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma OAuth 2.0 connector profile – StackOne setup guide

> Set up the OAuth 2.0 connector profile for Figma in StackOne. One-time admin setup required before your users can link Figma accounts via Hub.

<Warning>You need a Figma account and the ability to create OAuth applications. The Client Secret is shown only once during app creation.</Warning>

<Panel>
  <div className="not-prose guides-scope-selector" data-guides-scope-selector data-guide-actions-json="[{&#x22;id&#x22;:&#x22;figma_get_file&#x22;,&#x22;label&#x22;:&#x22;Get File&#x22;,&#x22;scopes&#x22;:[&#x22;file_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_file_nodes&#x22;,&#x22;label&#x22;:&#x22;Get File Nodes&#x22;,&#x22;scopes&#x22;:[&#x22;file_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_render_images&#x22;,&#x22;label&#x22;:&#x22;Render Images&#x22;,&#x22;scopes&#x22;:[&#x22;file_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_image_fills&#x22;,&#x22;label&#x22;:&#x22;Get Image Fills&#x22;,&#x22;scopes&#x22;:[&#x22;file_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_file_metadata&#x22;,&#x22;label&#x22;:&#x22;Get File Metadata&#x22;,&#x22;scopes&#x22;:[&#x22;file_metadata:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_file_versions&#x22;,&#x22;label&#x22;:&#x22;Get File Versions&#x22;,&#x22;scopes&#x22;:[&#x22;file_versions:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_team_projects&#x22;,&#x22;label&#x22;:&#x22;Get Team Projects&#x22;,&#x22;scopes&#x22;:[&#x22;projects:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_project_files&#x22;,&#x22;label&#x22;:&#x22;Get Project Files&#x22;,&#x22;scopes&#x22;:[&#x22;projects:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_comments&#x22;,&#x22;label&#x22;:&#x22;Get Comments&#x22;,&#x22;scopes&#x22;:[&#x22;file_comments:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_create_comment&#x22;,&#x22;label&#x22;:&#x22;Create Comment&#x22;,&#x22;scopes&#x22;:[&#x22;file_comments:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_delete_comment&#x22;,&#x22;label&#x22;:&#x22;Delete Comment&#x22;,&#x22;scopes&#x22;:[&#x22;file_comments:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_comment_reactions&#x22;,&#x22;label&#x22;:&#x22;Get Comment Reactions&#x22;,&#x22;scopes&#x22;:[&#x22;file_comments:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_create_comment_reaction&#x22;,&#x22;label&#x22;:&#x22;Create Comment Reaction&#x22;,&#x22;scopes&#x22;:[&#x22;file_comments:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_delete_comment_reaction&#x22;,&#x22;label&#x22;:&#x22;Delete Comment Reaction&#x22;,&#x22;scopes&#x22;:[&#x22;file_comments:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_current_user&#x22;,&#x22;label&#x22;:&#x22;Get Current User&#x22;,&#x22;scopes&#x22;:[&#x22;current_user:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_team_components&#x22;,&#x22;label&#x22;:&#x22;Get Team Components&#x22;,&#x22;scopes&#x22;:[&#x22;team_library_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_file_components&#x22;,&#x22;label&#x22;:&#x22;Get File Components&#x22;,&#x22;scopes&#x22;:[&#x22;library_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_component&#x22;,&#x22;label&#x22;:&#x22;Get Component&#x22;,&#x22;scopes&#x22;:[&#x22;library_assets:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_team_component_sets&#x22;,&#x22;label&#x22;:&#x22;Get Team Component Sets&#x22;,&#x22;scopes&#x22;:[&#x22;team_library_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_file_component_sets&#x22;,&#x22;label&#x22;:&#x22;Get File Component Sets&#x22;,&#x22;scopes&#x22;:[&#x22;library_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_component_set&#x22;,&#x22;label&#x22;:&#x22;Get Component Set&#x22;,&#x22;scopes&#x22;:[&#x22;library_assets:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_team_styles&#x22;,&#x22;label&#x22;:&#x22;Get Team Styles&#x22;,&#x22;scopes&#x22;:[&#x22;team_library_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_file_styles&#x22;,&#x22;label&#x22;:&#x22;Get File Styles&#x22;,&#x22;scopes&#x22;:[&#x22;library_content:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_style&#x22;,&#x22;label&#x22;:&#x22;Get Style&#x22;,&#x22;scopes&#x22;:[&#x22;library_assets:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_webhooks&#x22;,&#x22;label&#x22;:&#x22;Get Webhooks&#x22;,&#x22;scopes&#x22;:[&#x22;webhooks:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_create_webhook&#x22;,&#x22;label&#x22;:&#x22;Create Webhook&#x22;,&#x22;scopes&#x22;:[&#x22;webhooks:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_webhook&#x22;,&#x22;label&#x22;:&#x22;Get Webhook&#x22;,&#x22;scopes&#x22;:[&#x22;webhooks:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_update_webhook&#x22;,&#x22;label&#x22;:&#x22;Update Webhook&#x22;,&#x22;scopes&#x22;:[&#x22;webhooks:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_delete_webhook&#x22;,&#x22;label&#x22;:&#x22;Delete Webhook&#x22;,&#x22;scopes&#x22;:[&#x22;webhooks:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_webhook_requests&#x22;,&#x22;label&#x22;:&#x22;Get Webhook Requests&#x22;,&#x22;scopes&#x22;:[&#x22;webhooks:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_local_variables&#x22;,&#x22;label&#x22;:&#x22;Get Local Variables&#x22;,&#x22;scopes&#x22;:[&#x22;file_variables:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_published_variables&#x22;,&#x22;label&#x22;:&#x22;Get Published Variables&#x22;,&#x22;scopes&#x22;:[&#x22;file_variables:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_bulk_create_update_delete_variables&#x22;,&#x22;label&#x22;:&#x22;Bulk Create/Update/Delete Variables&#x22;,&#x22;scopes&#x22;:[&#x22;file_variables:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_list_dev_resources&#x22;,&#x22;label&#x22;:&#x22;List Dev Resources&#x22;,&#x22;scopes&#x22;:[&#x22;file_dev_resources:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_bulk_create_dev_resources&#x22;,&#x22;label&#x22;:&#x22;Bulk Create Dev Resources&#x22;,&#x22;scopes&#x22;:[&#x22;file_dev_resources:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_bulk_update_dev_resources&#x22;,&#x22;label&#x22;:&#x22;Bulk Update Dev Resources&#x22;,&#x22;scopes&#x22;:[&#x22;file_dev_resources:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_delete_dev_resource&#x22;,&#x22;label&#x22;:&#x22;Delete Dev Resource&#x22;,&#x22;scopes&#x22;:[&#x22;file_dev_resources:write&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_library_analytics_component_actions&#x22;,&#x22;label&#x22;:&#x22;Get Component Actions Analytics&#x22;,&#x22;scopes&#x22;:[&#x22;library_analytics:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_library_analytics_component_usages&#x22;,&#x22;label&#x22;:&#x22;Get Component Usages Analytics&#x22;,&#x22;scopes&#x22;:[&#x22;library_analytics:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_library_analytics_style_actions&#x22;,&#x22;label&#x22;:&#x22;Get Style Actions Analytics&#x22;,&#x22;scopes&#x22;:[&#x22;library_analytics:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_library_analytics_style_usages&#x22;,&#x22;label&#x22;:&#x22;Get Style Usages Analytics&#x22;,&#x22;scopes&#x22;:[&#x22;library_analytics:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_library_analytics_variable_actions&#x22;,&#x22;label&#x22;:&#x22;Get Variable Actions Analytics&#x22;,&#x22;scopes&#x22;:[&#x22;library_analytics:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_library_analytics_variable_usages&#x22;,&#x22;label&#x22;:&#x22;Get Variable Usages Analytics&#x22;,&#x22;scopes&#x22;:[&#x22;library_analytics:read&#x22;]},{&#x22;id&#x22;:&#x22;figma_get_activity_logs&#x22;,&#x22;label&#x22;:&#x22;Get Activity Logs&#x22;,&#x22;scopes&#x22;:[&#x22;org:activity_log_read&#x22;]}]" style={{ borderRadius: '8px', padding: '16px', marginBottom: '24px' }}>
    <div className="guides-scope-selector__title" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '12px' }}>Select Actions to adjust the guide</div>
    <div className="guides-scope-selector__muted" style={{ fontSize: '13px', marginBottom: '12px' }}>Some actions may require additional configuration in the provider to be accessible. Choose the actions you need and the guide will be updated.</div>

    <div style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}>
      <input type="text" placeholder="Search actions..." className="guides-scope-selector__input" data-guide-action-search style={{ padding: '8px 12px', borderRadius: '6px', fontSize: '13px', flex: 1, minWidth: '160px' }} />

      <button type="button" className="guides-scope-selector__quick-btn" data-guide-select-all style={{ padding: '6px 10px', borderRadius: '6px', fontSize: '12px', cursor: 'pointer' }}>Select all</button>
      <button type="button" className="guides-scope-selector__quick-btn" data-guide-clear style={{ padding: '6px 10px', borderRadius: '6px', fontSize: '12px', cursor: 'pointer' }}>Clear</button>
    </div>

    <div className="guides-scope-selector__list" style={{ maxHeight: '240px', overflowY: 'auto', borderRadius: '6px', marginBottom: '12px' }}>
      <div className="guides-scope-selector__list-header" style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 12px', fontSize: '12px', fontWeight: '600', position: 'sticky', top: 0, zIndex: 1 }}>
        <div style={{ width: '16px', flexShrink: 0 }} />

        <div style={{ flex: 1, textAlign: 'left' }}>Action</div>
        <div style={{ minWidth: '120px', marginLeft: 'auto', textAlign: 'right' }}>Scope(s)</div>
      </div>

      <div className="guides-scope-selector__muted" data-guide-loading style={{ padding: '16px', textAlign: 'center', fontSize: '13px' }}>Loading actions...</div>
      <div className="guides-scope-selector__muted" data-guide-no-results hidden style={{ padding: '16px', textAlign: 'center', fontSize: '13px' }}>No actions match your search.</div>
    </div>

    <div className="guides-scope-selector__url-section" style={{ marginTop: '12px', paddingTop: '12px' }}>
      <div className="guides-scope-selector__muted" style={{ fontSize: '12px', fontWeight: '500', marginBottom: '6px' }}>Dynamic Guide URL</div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
        <input type="text" readOnly className="guides-scope-selector__input" data-guide-url style={{ flex: 1, minWidth: '200px', padding: '8px 10px', borderRadius: '6px', fontSize: '12px', fontFamily: 'monospace' }} />

        <button type="button" className="guides-scope-selector__copy-btn" data-guide-copy-url style={{ width: '120px', padding: '8px 14px', borderRadius: '6px', fontSize: '13px', fontWeight: '500', cursor: 'pointer', whiteSpace: 'nowrap', marginLeft: 'auto' }}>Copy URL</button>
      </div>

      <div style={{ marginTop: '12px' }}>
        <div className="guides-scope-selector__muted" style={{ fontSize: '12px', fontWeight: '500', marginBottom: '6px' }}>Scopes Selected</div>

        <div style={{ display: 'flex', alignItems: 'stretch', gap: '8px', flexWrap: 'wrap' }}>
          <pre className="guides-scope-selector__input" role="textbox" aria-readonly="true" tabIndex={0} data-guide-scopes-output style={{ flex: 1, minWidth: '200px', minHeight: '88px', maxHeight: '120px', overflowY: 'auto', margin: 0, padding: '8px 10px', borderRadius: '6px', fontSize: '12px', fontFamily: 'monospace', whiteSpace: 'pre-wrap' }} />

          <div className="guides-scope-selector__muted" style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '12px', fontWeight: '500', flexShrink: 0, alignItems: 'flex-start' }}>
            <div style={{ whiteSpace: 'nowrap' }}>Separator</div>

            <select className="guides-scope-selector__input" data-guide-scope-delimiter style={{ width: '100%', padding: '6px 10px', borderRadius: '6px', fontSize: '12px' }}>
              <option value="space">Space</option>
              <option value="comma">Comma</option>
              <option value="semicolon">Semicolon</option>
              <option value="pipe">Pipe</option>
              <option value="newline">Newline</option>
            </select>

            <button type="button" className="guides-scope-selector__copy-btn" data-guide-copy-scopes style={{ width: '120px', padding: '8px 14px', borderRadius: '6px', fontSize: '13px', fontWeight: '500', cursor: 'pointer', whiteSpace: 'nowrap' }}>Copy scopes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</Panel>

<section data-guide-section data-guide-scopes="">
  <h2>Create an OAuth application</h2>

  <p>Register a new application in the Figma Developer Portal.</p>

  <Steps>
    <Step title="Sign in to Figma Developers">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Sign in to <a href="https://www.figma.com/developers" target="_blank" rel="noopener noreferrer">Figma Developers</a>.</p>

        <ul>
          <li>Click <strong>My apps</strong> > <strong>Create a new app</strong>.</li>
          <li>Enter an <strong>App name</strong> (e.g., "StackOne Integration").</li>
          <li>Select the associated <strong>Team/Organization</strong>.</li>
          <li>Click <strong>Create App</strong>.</li>
        </ul>
      </div>
    </Step>

    <Step title="Copy client credentials immediately">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Upon creation, you will see the <strong>Client ID</strong> and <strong>Client Secret</strong> in a modal.</p>

        <ul>
          <li>Copy both values immediately and store them securely.</li>
          <li>The <strong>Client Secret</strong> is only shown once and cannot be retrieved later.</li>
          <li>If you lose the secret, you must regenerate it.</li>
        </ul>
      </div>
    </Step>

    <Step title="Add redirect URL">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>In the left sidebar, click <strong>OAuth credentials</strong>.</p>

        <ul>
          <li>Under <strong>Redirect URLs</strong>, click <strong>Add a redirect URL</strong>.</li>
          <li>Enter: `https://api.stackone.com/connect/oauth2/figma/callback`</li>
          <li>Click <strong>Add</strong>.</li>
        </ul>
      </div>
    </Step>

    <Step title="Select OAuth scopes">
      <div data-guide-step data-guide-scopes="current_user:read,file_content:read,file_metadata:read,file_comments:read,file_comments:write,file_versions:read,file_dev_resources:read,file_dev_resources:write,library_content:read,library_assets:read,team_library_content:read,projects:read,webhooks:read,webhooks:write" data-guide-display-scopes-list="current_user:read,file_content:read,file_metadata:read,file_comments:read,file_comments:write,file_versions:read,file_dev_resources:read,file_dev_resources:write,library_content:read,library_assets:read,team_library_content:read,projects:read,webhooks:read,webhooks:write">
        <div className="connector-guide-actions-badge" data-guide-actions-badge data-guide-actions-badge-scopes="current_user:read,file_content:read,file_metadata:read,file_comments:read,file_comments:write,file_versions:read,file_dev_resources:read,file_dev_resources:write,library_content:read,library_assets:read,team_library_content:read,projects:read,webhooks:read,webhooks:write" style={{ display: 'block', width: 'fit-content', maxWidth: '100%', padding: '2px 8px', borderRadius: '8px', fontSize: '12px', marginBottom: '8px', marginTop: '-10px', whiteSpace: 'nowrap', overflowX: 'auto', overflowY: 'hidden', msOverflowStyle: 'none', scrollbarWidth: 'none' }}>
          <span>Enables actions: </span><span data-guide-actions-badge-labels>Bulk Create Dev Resources, Bulk Update Dev Resources, Create Comment, Create Comment Reaction, Create Webhook, Delete Comment, Delete Comment Reaction, Delete Dev Resource, Delete Webhook, Get Comment Reactions, Get Comments, Get Component, Get Component Set, Get Current User, Get File, Get File Component Sets, Get File Components, Get File Metadata, Get File Nodes, Get File Styles, Get File Versions, Get Image Fills, Get Project Files, Get Style, Get Team Component Sets, Get Team Components, Get Team Projects, Get Team Styles, Get Webhook, Get Webhook Requests, Get Webhooks, List Dev Resources, Render Images, Update Webhook</span>
        </div>

        <p>In the left sidebar, click <strong>OAuth scopes</strong>. Enable the scopes required for your use case.</p>

        <ul>
          <li>Enterprise-only scopes (file\_variables:read, file\_variables:write, library\_analytics:read) are only visible on the Enterprise plan</li>
          <li>If you enable only a subset of scopes, you must provide the enabled scopes in the <strong>Scopes</strong> field during connection setup. Otherwise the connection will fail.</li>
          <li>If all scopes are enabled, the <strong>Scopes</strong> field can be left empty.</li>
        </ul>

        <div style={{ marginTop: '8px' }} data-guide-display-scopes>
          <div className="connector-guide-scopes-container connector-guide-scopes-container--scrollable">
            <ul className="not-prose" style={{ listStyleType: "'- '", paddingLeft: '1em', margin: 0 }}>
              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="current_user:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy current_user:read" title="Copy scope" data-copy="current_user:read">
                  <span className="connector-guide-scope-copy__label">current\_user:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="file_content:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy file_content:read" title="Copy scope" data-copy="file_content:read">
                  <span className="connector-guide-scope-copy__label">file\_content:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="file_metadata:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy file_metadata:read" title="Copy scope" data-copy="file_metadata:read">
                  <span className="connector-guide-scope-copy__label">file\_metadata:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="file_comments:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy file_comments:read" title="Copy scope" data-copy="file_comments:read">
                  <span className="connector-guide-scope-copy__label">file\_comments:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="file_comments:write">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy file_comments:write" title="Copy scope" data-copy="file_comments:write">
                  <span className="connector-guide-scope-copy__label">file\_comments:write</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="file_versions:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy file_versions:read" title="Copy scope" data-copy="file_versions:read">
                  <span className="connector-guide-scope-copy__label">file\_versions:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="file_dev_resources:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy file_dev_resources:read" title="Copy scope" data-copy="file_dev_resources:read">
                  <span className="connector-guide-scope-copy__label">file\_dev\_resources:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="file_dev_resources:write">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy file_dev_resources:write" title="Copy scope" data-copy="file_dev_resources:write">
                  <span className="connector-guide-scope-copy__label">file\_dev\_resources:write</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="library_content:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy library_content:read" title="Copy scope" data-copy="library_content:read">
                  <span className="connector-guide-scope-copy__label">library\_content:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="library_assets:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy library_assets:read" title="Copy scope" data-copy="library_assets:read">
                  <span className="connector-guide-scope-copy__label">library\_assets:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="team_library_content:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy team_library_content:read" title="Copy scope" data-copy="team_library_content:read">
                  <span className="connector-guide-scope-copy__label">team\_library\_content:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="projects:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy projects:read" title="Copy scope" data-copy="projects:read">
                  <span className="connector-guide-scope-copy__label">projects:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="webhooks:read">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy webhooks:read" title="Copy scope" data-copy="webhooks:read">
                  <span className="connector-guide-scope-copy__label">webhooks:read</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>

              <li style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }} data-guide-display-scope="webhooks:write">
                <button type="button" className="connector-guide-scope-copy" aria-label="Copy webhooks:write" title="Copy scope" data-copy="webhooks:write">
                  <span className="connector-guide-scope-copy__label">webhooks:write</span>
                  <span className="connector-guide-scope-copy__icon" aria-hidden="true">⧉</span>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </Step>

    <Step title="Publish the app (optional)">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>You can optionally publish your app to share it with others. Before publishing, complete the required configuration.</p>

        <ul>
          <li>On the <strong>Publish</strong> page, choose <strong>Audience</strong> (Private or Public). This cannot be changed after publishing.</li>
          <li>Click <strong>Next</strong>.</li>
          <li>In <strong>Describe your app</strong>, upload a <strong>Logo</strong> and add a <strong>Description</strong>.</li>
          <li>Click <strong>Next</strong>.</li>
          <li>In <strong>Review scopes</strong>, confirm the requested scopes.</li>
          <li>Click <strong>Publish</strong> to complete. Private apps are published instantly without Figma review.</li>
        </ul>
      </div>
    </Step>
  </Steps>
</section>

## Creating the StackOne Connector Profile

To create the Connector Profile in StackOne for <strong>Figma</strong>:

<Steps>
  <Step title="Navigate to Connector Profiles">
    Login to StackOne and navigate to [Connector Profiles](https://app.stackone.com/connector_profiles)
  </Step>

  <Step title="Create New Connector Profile">
    <ul>
      <li>Click <strong>+ Connector Profile</strong></li>
      <li>Search for and select <strong>Figma</strong></li>
      <li>Select <strong>Type</strong> as <strong>OAuth 2.0</strong></li>

      <li>
        Fill out the fields using details retrieved from your provider:

        <ul style={{ marginLeft: '20px' }}>
          <li><strong>Client ID</strong></li>
          <li><strong>Client Secret</strong></li>
          <li><strong>Scopes</strong> (Optional)</li>
        </ul>
      </li>

      <li>(Optional) Select <strong>Actions</strong> to be enabled for this Connector Profile</li>
      <li>Click <strong>Create profile</strong></li>
    </ul>
  </Step>
</Steps>

Congratulations! The new Connector Profile will now show up in your project ready to be used. You can now continue to <a href="/guides/accounts-section#linking-accounts">Link Accounts</a> for <strong>Figma</strong>.
