Figma Icon Exporter

About this plugin

📖 Documentation

🎨 Demo File

---

🚀 About

Figma Icon Exporter streamlines the process of exporting icons from Figma. With it you can:

1. Export icons as SVG files
2. Save locally as a structured ZIP archive
3. Upload icons directly to GitLab or GitHub with an automatic commit & merge/pull request
4. Easily manage multiple Git providers

📦 How to Export Icons

Export locally:

1. Open the plugin in Figma.
2. Click Scan
3. Select Download ZIP
4. The plugin finds all slices, optimizes them as SVGs
5. A ZIP download prompt will appear.

Use this method for local testing, design handoffs, or sharing assets externally.

Export to GitLab:

1. Open the plugin in Figma.
2. In Settings → Sync Provider, choose GitLab and enter your credentials.
3. In the Exportertab, click Scan.
4. Select Export to Repository.
5. The plugin processes all slices and creates optimized SVGs.
6. A new branch named `figma-icons-update-{timestamp}` is pushed.
7. A Merge Request is automatically opened in GitLab.
8. Assign reviewers and share the MR link.

Export to GitHub

1. Open the plugin in Figma.
2. In Settings → Sync Providerchoose GitHub and enter your credentials.
3. In the Exporter tab, click Scan.
4. SelectExport to Repository
5. The plugin processes all slices and creates optimized SVGs.
6. A new branch named figma-icons-update-{timestamp} is pushed.
7. A Pull Request is automatically opened in GitHub.

⚙️ Configuration

🔑 GitLab access token:

1. In GitLab, navigate to Settings → Access Tokens.
2. Create a token with the write_repository scope.
3. Copy the token and paste it into the plugin’s Settings panel.

🔑 GitHub Setup (Access Token):

The plugin creates a branch, commits your exported icons, and opens a pull request.

### Option A — Classic Personal Access Token (fastest)

1. In GitHub, go to Settings → Developer settings → Personal access tokens (classic).
2. Click Generate new token (classic).
3. Choose scope(s):
4. Private repos: check repo (required).
5. Public-only repos: you can use public_repo instead.
6. Generate the token and copy it.

> Org repos with SAML SSO: after creating the token, click “Authorize” for your organization.

> Without this, GitHub will return 403 Resource not accessible by personal access token.

### Option B — Fine-grained Personal Access Token (recommended for least privilege)

1. In GitHub, go to Settings → Developer settings → Personal access tokens → Fine-grained tokens.
2. Click Generate new token.
3. Resource owner: choose your user or the organization that owns the repo.
4. Repository access: select Only selected repositories, then pick your target repo.
5. Repository permissions (at minimum):
6. Contents: Read and write (create branches/commits)
7. Pull requests: Read and write (open the PR)
8. (Optional) Actions: Read/Write only if you plan to call Actions APIs directly.
9. Create the token and copy it.
10. If the repo is in an organization with SSO, click Authorize for that org.

### Add token in the plugin

Open Settings in the plugin and fill:

1. Repository owner (e.g. your GitHub username or your org name)
2. Repository name (e.g. design-system)
3. Token (paste the PAT from above)

Click Save, then run your export.

## GitLab Setup (Access Token)

The plugin creates a branch, commits your exported icons, and opens a merge request.

To do this via the GitLab REST API, your token must have API write access and your user/token

must have at least Developer role on the repository.

> Important: write_repository alone is not enough for the REST API (it only covers Git-over-HTTP).

> Use the api scope to call endpoints like “create branch”, “create commit”, and “create MR”.

### Option A — Personal Access Token (user-scoped)

1. In GitLab, go to User menu → Edit profile → Access Tokens
2. (on gitlab.com: Settings → Access Tokens).
3. Create a token:
4. Scopes: check api (required).
5. (Optional) also check read_repository / write_repository if you plan to use Git-over-HTTP, but api is the key scope for the REST calls this plugin makes.
6. Set an expiry you’re comfortable with.
7. Copy the token.

### Option B — Project Access Token (least privilege for a single repo)

1. In your project, go to Settings → Access Tokens.
2. Create a token:
3. Role: Developer (or higher).
4. Scopes: `api` (required).
5. (`read_repository`/`write_repository` optional if you’ll use Git-over-HTTP.)
6. Copy the token.

> You can also use a Group Access Token in Group → Settings → Access tokens with Role: Developer and Scope: `api` if the repo lives in a group.

### Add token in the plugin

Open Settings in the plugin and fill:

- GitLab domain (e.g., `https://gitlab.com` or your self-hosted URL)

- Project ID (numeric ID). Find it on the project’s Overview → Details page.

- Token (paste the PAT or Project token from above)

Click Save, then run your export.

🛠️Troubleshooting

1. `403 Resource not accessible by personal access token`
2. Classic token missing `repo` (private) or `public_repo` (public) scope.
3. Fine-grained token not granted to this repository, or Contents/Pull requests are not Read & write.
4. Organization uses SAML SSO → token not Authorized for the org.
5. Branch creation fails on `main`
6. Protected branches block direct pushes. The plugin creates a feature branch; ensure your token has Contents: write and that the base commit SHA exists.
7. Still stuck?
8. Regenerate a classic PAT with repo to quickly rule out permissions issues.