> ## 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.

# Connect Figma with Personal Access Token – StackOne Hub

> Link a Figma account in the StackOne Hub using Personal Access Token. End-user guide to authorize the integration and start using Figma actions.

<Warning>Personal Access Tokens grant access to your Figma account. Keep them secure and never share publicly.</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>Generate a personal access token</h2>

  <p>Create a new personal access token for API authentication.</p>

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

        <ul>
          <li>Click your profile avatar in the top-left corner and select <strong>Settings</strong>.</li>
          <li>Navigate to the <strong>Security</strong> tab.</li>
          <li>Scroll to <strong>Personal access tokens</strong>.</li>
        </ul>
      </div>
    </Step>

    <Step title="Create new token">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Click <strong>Generate new token</strong>.</p>

        <ul>
          <li>Enter a descriptive <strong>Token name</strong> (e.g., "StackOne Integration")</li>
          <li>Select an expiration period (max 90 days)</li>
        </ul>
      </div>
    </Step>

    <Step title="Select token 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>Under <strong>Scopes</strong>, enable the permissions 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>
        </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="Generate and copy token">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Click <strong>Generate token</strong>. Copy the token immediately and store securely — it is only shown once.</p>
      </div>
    </Step>
  </Steps>
</section>

<section data-guide-section data-guide-scopes="">
  <h2>Find your Team ID</h2>

  <p>Your Team ID identifies your Figma team workspace. It is required to connect and serves as the default for team-level actions such as listing projects, components, component sets, and styles. Some actions accept their own Team ID input to override this default.</p>

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

        <ul>
          <li>Click on your team name in the left sidebar.</li>
        </ul>
      </div>
    </Step>

    <Step title="Copy the Team ID from the URL">
      <div data-guide-step data-guide-scopes="" data-guide-display-scopes-list="">
        <p>Look at your browser address bar.</p>

        <ul>
          <li>Format: `https://www.figma.com/files/team/TEAM_ID/team-name`</li>
          <li>Example: if your URL is `https://www.figma.com/files/team/1234567890/My-Team`, your Team ID is `1234567890`</li>
        </ul>
      </div>
    </Step>
  </Steps>
</section>

<div data-whitelabel-hide>
  <h2>Linking the Account from the Hub</h2>

  <Steps>
    <Step title="Navigate to the Hub">
      Use one of the three <a href="/guides/accounts-section#linking-accounts">Linking Account Methods</a> to access the Hub.
    </Step>

    <Step title="Fill out the fields">
      Fill out the following fields using details from your provider:

      <ul>
        <li><strong>Personal Access Token</strong></li>
        <li><strong>Team ID</strong></li>
      </ul>
    </Step>

    <Step title="Connect">
      <ul>
        <li>Click <strong>Connect</strong></li>
        <li>If applicable, the provider will redirect you to a sign-in or authorization page. Complete the provider's authorization flow.</li>
        <li>Once authorization is successful, you will see a confirmation popup</li>
      </ul>
    </Step>
  </Steps>

  <p>If the account linking is successful, you will see the newly linked account in your <a href="/guides/accounts-section">Accounts</a> page.</p>
</div>
