Skip to content

powerfulyang/figma-export

BranchesTags

Repository files navigation

Figma Export Ultra

详细使用指南 (中文) | Detailed Usage Guide (English)

🎨 A powerful browser extension that supercharges your Figma export workflow — export SVG / WebP / CSS / UnoCSS with one click, and optionally upload to any S3-compatible or FormData endpoint.

🚀 Source Code: https://github.com/powerfulyang/figma-export

😁 Auto Icon Plugin: https://github.com/powerfulyang/figma-export-plugin

✨ Features

  • Multi-format export — Export selected Figma layers as SVG, WebP, CSS, or UnoCSS in a single operation
  • Real-time selection panel — Floating panel that follows your Figma selection and displays CSS / UnoCSS code instantly (draggable, position synced across tabs)
  • Flexible upload — Upload exported assets via:
    • FormData — POST to any HTTP endpoint with custom fields & template variables ({{filename}}, {{filesize}}, {{uuid}})
    • OSS (S3-compatible) — Direct PutObject upload to AWS S3, Alibaba OSS, Cloudflare R2, MinIO, etc.
  • Auto Icon — One-click SVG icon registration through a configurable API
  • SVG auto currentColor — Automatically replace the fill/stroke color in mono-color SVGs with currentColor
  • CSS unit conversion — Convert px to rem with a configurable root font size
  • High-DPI export — Configurable export scale (up to 4×) with PNG → WebP compression via @jsquash
  • Multi-language support — Supports Chinese, English, Japanese, and Korean (auto-detects browser language)
  • Clipboard integration — All exported code / URLs are copied to clipboard for instant use

📦 Installation

From Source

# Clone the repository
git clone https://github.com/powerfulyang/figma-export.git
cd figma-export

# Install dependencies
pnpm install

# Start development mode (Chrome)
pnpm dev

# Build for production
pnpm build

Load in Chrome

  1. Navigate to chrome://extensions/
  2. Enable Developer mode
  3. Click Load unpacked and select the .output/chrome-mv3 directory

🚀 Usage

Quick Start

  1. Open any Figma design file at https://www.figma.com/
  2. Select one or more layers on the canvas
  3. Use the floating toolbar (bottom-right corner):
    • ⚡ Flash button — Open the export modal with SVG / WebP / CSS / UnoCSS previews
    • 🖼️ SVG button — Auto-register the selected layer as a custom icon
    • ☁️ Upload button — Export as WebP and upload, URL is copied to clipboard
  4. The selection panel (draggable overlay) auto-updates with CSS / UnoCSS code for the currently selected node

Upload Configuration

FormData Mode

Configure your custom upload endpoint:

Field Description Example
URL Your upload endpoint https://api.example.com/upload
Field Name The form field name for the file file (default)
Response Path JSON path to extract file URL (supports lodash.get) data.url
Extra Fields Additional form fields, one per line token=abc123

Template Variables for Extra Fields:

  • {{filename}} — The uploaded file name
  • {{filesize}} — The file size in bytes
  • {{uuid}} — A random UUID v4

Example:

token=your-api-token
filename={{filename}}
size={{filesize}}
id={{uuid}}

OSS (S3) Mode

Configure your S3-compatible storage:

Field Description
Endpoint S3 endpoint URL
Bucket Bucket name
AccessKey ID Your access key
AccessKey Secret Your secret key
Directory Prefix Optional path prefix
Custom Domain Optional CDN domain

Works with:

  • AWS S3
  • Alibaba Cloud OSS
  • Cloudflare R2
  • MinIO
  • Any S3-compatible storage

Settings

Click the extension icon to configure:

Setting Description
Export Scale 1× – 4× scaling factor for PNG/WebP export
CSS Units Toggle rem / px output with configurable root font size
SVG Auto CurrentColor Auto-replace single-color SVG fills with currentColor
Auto Icon API Endpoint for registering SVG icons via POST request
Selection Panel Position View / reset the floating panel coordinates
Upload Config FormData or OSS (S3) upload configuration

Auto Icon API

Configure your icon registration API endpoint. The extension sends:

POST /your-icon-api
Content-Type: application/json

{
  "content": "<svg>...</svg>"
}

Expected response:

{
  "success": true,
  "icon": "icon-name"
}

The icon code is then copied to your clipboard.

🏗️ Architecture

The extension is built with WXT + Vue 3 + Arco Design + UnoCSS:

entrypoints/
├── background/         # Service worker — handles upload requests (FormData / OSS)
├── figma.content/      # MAIN-world content script — captures `window.figma` reference
├── injected/           # Unlisted page-world script — Figma API access, export logic
├── popup/              # Extension popup — settings management UI
└── ui.content/         # Content script UI — floating toolbar & export modal (Shadow DOM)

components/
├── export-modal.vue    # Multi-format export result viewer with preview & actions
├── selection-panel.vue # Draggable floating panel showing CSS / UnoCSS of selected node
└── application-config.vue  # Arco Design global config provider

locales/
├── zh-CN.yml           # Chinese (Simplified)
├── en.yml              # English
├── ja.yml              # Japanese
└── ko.yml              # Korean

Communication Flow

┌──────────────┐  window.figma  ┌─────────────────┐
│ figma.content│ ─────────────► │    injected      │
│ (MAIN world) │                │ (page-world)     │
└──────────────┘                └────────┬─────────┘
                                         │ webext-bridge
                                         ▼
                                ┌─────────────────┐
                                │  ui.content      │
                                │ (content script) │
                                └────────┬─────────┘
                                         │ webext-bridge
                                         ▼
                                ┌─────────────────┐
                                │   background     │
                                │ (service worker) │
                                └─────────────────┘

🛠️ Development

Scripts

Command Description
pnpm dev Start WXT dev server (Chrome)
pnpm dev:firefox Start WXT dev server (Firefox)
pnpm build Production build (Chrome)
pnpm build:firefox Production build (Firefox)
pnpm zip Build and package as .zip (Chrome)
pnpm zip:firefox Build and package as .zip (Firefox)
pnpm compile TypeScript type-check
pnpm lint Lint and auto-fix with ESLint

Tech Stack

Technology Purpose
WXT WebExtension framework
Vue 3 UI framework
Arco Design Vue UI component library
UnoCSS Atomic CSS engine
@wxt-dev/i18n Internationalization
webext-bridge Cross-context messaging
@jsquash/png + @jsquash/webp WASM-based image encoding
aws4fetch S3-compatible request signing
transform-to-unocss-core CSS → UnoCSS conversion

📄 License

MIT License - see LICENSE for details.

中文文档

🎨 一款强大的浏览器扩展，为您的 Figma 导出工作流程加速 — 一键导出 SVG / WebP / CSS / UnoCSS，并可选择上传到任何 S3 兼容存储或 FormData 端点。

🚀 源代码: https://github.com/powerfulyang/figma-export

😁 自动图标插件: https://github.com/powerfulyang/figma-export-plugin

✨ 功能特性

  • 多格式导出 — 一次性将选中的 Figma 图层导出为 SVG、WebP、CSS 或 UnoCSS
  • 实时选择面板 — 浮动面板跟随您的 Figma 选择，即时显示 CSS / UnoCSS 代码（可拖动，位置跨标签页同步）
  • 灵活上传 — 通过以下方式上传导出的资源：
    • FormData — POST 到任何 HTTP 端点，支持自定义字段和模板变量（{{filename}}、{{filesize}}、{{uuid}}）
    • OSS（S3 兼容） — 直接 PutObject 上传到 AWS S3、阿里云 OSS、Cloudflare R2、MinIO 等
  • 自动图标 — 通过可配置的 API 一键注册 SVG 图标
  • SVG 自动 currentColor — 自动将单色 SVG 的填充/描边颜色替换为 currentColor
  • CSS 单位转换 — 将 px 转换为 rem，可配置根字号大小
  • 高清导出 — 可配置导出缩放比例（最高 4×），通过 @jsquash 实现 PNG → WebP 压缩
  • 多语言支持 — 支持中文、英文、日语、韩语（自动检测浏览器语言）
  • 剪贴板集成 — 所有导出的代码 / URL 自动复制到剪贴板

📦 安装

从源码构建

# 克隆仓库
git clone https://github.com/powerfulyang/figma-export.git
cd figma-export

# 安装依赖
pnpm install

# 启动开发模式 (Chrome)
pnpm dev

# 生产构建
pnpm build

在 Chrome 中加载

  1. 打开 chrome://extensions/
  2. 启用 开发者模式
  3. 点击 加载已解压的扩展程序，选择 .output/chrome-mv3 目录

🚀 使用方法

快速开始

  1. 在 https://www.figma.com/ 打开任意 Figma 设计文件
  2. 在画布上选择一个或多个图层
  3. 使用右下角的 浮动工具栏：
    • ⚡ 闪电按钮 — 打开导出弹窗，预览 SVG / WebP / CSS / UnoCSS
    • 🖼️ SVG 按钮 — 自动将选中图层注册为自定义图标
    • ☁️ 上传按钮 — 导出为 WebP 并上传，URL 自动复制到剪贴板
  4. 选择面板（可拖动的浮层）自动更新当前选中节点的 CSS / UnoCSS 代码

上传配置

FormData 模式

配置您的自定义上传接口：

字段 说明 示例
URL 上传接口地址 https://api.example.com/upload
字段名 文件的表单字段名 file（默认）
响应路径 从响应中提取文件 URL 的 JSON 路径（支持 lodash.get） data.url
额外字段 额外的表单字段，每行一个 token=abc123

额外字段的模板变量：

  • {{filename}} — 上传的文件名
  • {{filesize}} — 文件大小（字节）
  • {{uuid}} — 随机 UUID v4

示例：

token=your-api-token
filename={{filename}}
size={{filesize}}
id={{uuid}}
OSS（S3）模式

配置您的 S3 兼容存储：

字段 说明
Endpoint S3 端点地址
Bucket 存储桶名称
AccessKey ID 访问密钥 ID
AccessKey Secret 访问密钥密码
目录前缀 可选的路径前缀
自定义域名 可选的 CDN 域名

支持的存储服务：

  • AWS S3
  • 阿里云 OSS
  • Cloudflare R2
  • MinIO
  • 任何 S3 兼容存储

设置说明

点击扩展图标进行配置：

设置项 说明
导出缩放比例 1× – 4× PNG/WebP 导出缩放因子
CSS 单位 切换 rem / px 输出，可配置根字号大小
SVG 自动 CurrentColor 自动将单色 SVG 填充替换为 currentColor
自动图标 API 通过 POST 请求注册 SVG 图标的接口地址
选区浮窗位置 查看 / 重置浮动面板坐标
上传配置 FormData 或 OSS（S3）上传配置

自动图标 API

配置您的图标注册 API 端点。扩展会发送：

POST /your-icon-api
Content-Type: application/json

{
  "content": "<svg>...</svg>"
}

期望的响应：

{
  "success": true,
  "icon": "icon-name"
}

图标代码会自动复制到剪贴板。

🛠️ 开发

脚本命令

命令 说明
pnpm dev 启动 WXT 开发服务器 (Chrome)
pnpm dev:firefox 启动 WXT 开发服务器 (Firefox)
pnpm build 生产构建 (Chrome)
pnpm build:firefox 生产构建 (Firefox)
pnpm zip 构建并打包为 .zip (Chrome)
pnpm zip:firefox 构建并打包为 .zip (Firefox)
pnpm compile TypeScript 类型检查
pnpm lint ESLint 检查并自动修复

📄 许可证

MIT 许可证 - 详情请见 LICENSE。

About

Figma Dev Mode free alternatives

chromewebstore.google.com/detail/figma-export/oamappfeofngblhbamhhkpkbpoeooiba

Topics

figma-dev-mode

Resources

Readme
Activity

Stars

4 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages