{"id":32486385,"url":"https://github.com/fefeding/figma2html","last_synced_at":"2026-07-04T22:31:29.390Z","repository":{"id":230203482,"uuid":"778728533","full_name":"fefeding/figma2html","owner":"fefeding","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-04T12:28:39.000Z","size":4291,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-04T13:36:56.093Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fefeding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-03-28T09:33:29.000Z","updated_at":"2026-03-04T12:28:43.000Z","dependencies_parsed_at":"2024-04-15T06:46:42.120Z","dependency_job_id":"5189f2ba-22df-4aac-83f3-4ac431f901f3","html_url":"https://github.com/fefeding/figma2html","commit_stats":null,"previous_names":["jiamao/j-figma2html","fefeding/figma2html","fefeding/j-figma2html"],"tags_count":0,"template":false,"template_full_name":"fefeding/utils","purl":"pkg:github/fefeding/figma2html","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fefeding%2Ffigma2html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fefeding%2Ffigma2html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fefeding%2Ffigma2html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fefeding%2Ffigma2html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fefeding","download_url":"https://codeload.github.com/fefeding/figma2html/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fefeding%2Ffigma2html/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35138074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-04T02:00:05.987Z","response_time":113,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-27T05:50:28.622Z","updated_at":"2026-07-04T22:31:29.384Z","avatar_url":"https://github.com/fefeding.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @fefeding/figma2html\n\n一个强大的 Figma 转 HTML 工具库，支持将 Figma 设计稿转换为高质量的 HTML/CSS 代码。\n\n## 特性\n\n- ✅ 支持多种 Figma 节点类型转换\n- ✅ 支持丰富的样式属性（渐变、阴影、模糊等）\n- ✅ 支持文本样式和字符级样式覆盖\n- ✅ 支持图片处理（包含多种填充模式）\n- ✅ 支持 SVG 图形转换（椭圆、多边形、星形、线条等）\n- ✅ 支持蒙版效果\n- ✅ 支持 Auto Layout 自动布局\n- ✅ 支持 Blend Mode 混合模式\n- ✅ TypeScript 类型支持\n\n## 安装\n\n```bash\nnpm install @fefeding/figma2html\n```\n\n或\n\n```bash\nyarn add @fefeding/figma2html\n```\n\n或\n\n```bash\npnpm add @fefeding/figma2html\n```\n\n## 快速开始\n\n### 基础使用\n\n```typescript\nimport { \n    convert, \n    nodeToDom, \n    loadFigmaFile, \n    getFigmaFileImages \n} from \"@fefeding/figma2html\";\n\n// 1. 获取 Figma 文件数据\nconst fileKey = 'your-figma-file-id';\nconst token = 'your-personal-access-token';\nconst data = await loadFigmaFile(fileKey, token);\n\n// 2. 获取文件中的所有图片\nconst images = await getFigmaFileImages(fileKey, token);\n\n// 3. 转换为 DOM 结构\nconst tpl = await convert(data, null, {\n    images,\n    async getImage(key) {\n        // 返回图片 URL，可以自行处理图片加载逻辑\n        if (images[key]) return images[key];\n        \n        // 或者动态获取图片\n        // const imgData = await getFigmaImage(fileKey, token, key);\n        // return imgData[key];\n        return '';\n    }\n});\n\n// 4. 渲染到页面\nconst node = await nodeToDom(tpl, {});\nif (node) {\n    document.body.appendChild(node);\n}\n```\n\n### 获取 Figma Personal Access Token\n\n1. 登录 [Figma](https://www.figma.com/)\n2. 点击头像 -\u003e Settings -\u003e Personal Access Tokens\n3. 点击 \"Create new token\" 创建新的访问令牌\n\n## API 文档\n\n### 主要方法\n\n#### `loadFigmaFile(fileId: string, token: string): Promise\u003cany\u003e`\n\n获取 Figma 文件数据。\n\n```typescript\nconst data = await loadFigmaFile('file-id', 'your-token');\n```\n\n#### `getFigmaFileImages(fileId: string, token: string): Promise\u003cObject\u003e`\n\n获取文件中所有图片的映射表。\n\n```typescript\nconst images = await getFigmaFileImages('file-id', 'your-token');\n// 返回格式: { [imageRef]: imageUrl }\n```\n\n#### `getFigmaImage(key: string, token: string, ids: string): Promise\u003cObject\u003e`\n\n动态获取指定节点的图片。\n\n```typescript\nconst images = await getFigmaImage('file-id', 'your-token', 'node-id1,node-id2');\n```\n\n#### `convert(node: Node, parentNode?: Node, option?: ConvertNodeOption): Promise\u003cDomNode\u003e`\n\n将 Figma 节点转换为自定义 DOM 结构。\n\n**ConvertNodeOption 参数说明：**\n\n```typescript\ninterface ConvertNodeOption {\n    // 是否展开到页面级别的绝对定位\n    expandToPage?: boolean;\n    \n    // 图片映射表\n    images?: { [key: string]: string };\n    \n    // 动态获取图片的回调函数\n    getImage?: (key: string) =\u003e Promise\u003cstring\u003e;\n}\n```\n\n**示例：**\n\n```typescript\nconst domNode = await convert(figmaData, null, {\n    expandToPage: true,\n    images: imageMap,\n    async getImage(key) {\n        return imageMap[key] || '';\n    }\n});\n```\n\n#### `nodeToDom(node: DomNode, option?: NodeToDomOption): Promise\u003cHTMLElement\u003e`\n\n将自定义 DOM 结构转换为真实的 HTML 元素。\n\n```typescript\nconst htmlElement = await nodeToDom(domNode, {\n    getImage: async (key) =\u003e {\n        return 'https://example.com/image.jpg';\n    }\n});\n\ndocument.body.appendChild(htmlElement);\n```\n\n## 支持的 Figma 节点类型\n\n| 节点类型 | 支持程度 | 说明 |\n|---------|---------|------|\n| **DOCUMENT** | ✅ 完全支持 | 文档根节点 |\n| **CANVAS** | ✅ 完全支持 | 画布/页面 |\n| **FRAME** | ✅ 完全支持 | 框架容器 |\n| **GROUP** | ✅ 完全支持 | 分组 |\n| **TEXT** | ✅ 完全支持 | 文本（含字符级样式） |\n| **RECTANGLE** | ✅ 完全支持 | 矩形 |\n| **ELLIPSE** | ✅ 完全支持 | 椭圆/圆 |\n| **LINE** | ✅ 完全支持 | 线条 |\n| **REGULAR_POLYGON** | ✅ 完全支持 | 正多边形 |\n| **STAR** | ✅ 完全支持 | 星形 |\n| **VECTOR** | ✅ 完全支持 | 向量图形 |\n| **BOOLEAN_OPERATION** | ⚠️ 部分支持 | 布尔运算 |\n| **COMPONENT** | ⚠️ 部分支持 | 组件定义 |\n| **COMPONENT_SET** | ⚠️ 部分支持 | 组件集 |\n| **INSTANCE** | ⚠️ 部分支持 | 组件实例 |\n| **SLICE** | ✅ 基础支持 | 切片 |\n\n## 支持的样式属性\n\n### 填充 (Fills)\n- ✅ 纯色填充\n- ✅ 线性渐变\n- ✅ 径向渐变\n- ✅ 角度渐变\n- ✅ 菱形渐变\n- ✅ 图片填充（含多种缩放模式：cover, contain, tile, stretch）\n\n### 描边 (Strokes)\n- ✅ 纯色描边\n- ✅ 渐变描边\n- ✅ 描边宽度\n- ✅ 描边对齐方式（内/外/居中）\n- ✅ 虚线描边\n- ✅ 端点样式\n- ✅ 连接样式\n\n### 效果 (Effects)\n- ✅ 投影阴影 (Drop Shadow)\n- ✅ 内阴影 (Inner Shadow)\n- ✅ 图层模糊 (Layer Blur)\n- ⚠️ 背景模糊 (Background Blur) - 有限支持\n\n### 布局\n- ✅ Auto Layout 自动布局\n- ✅ 布局约束 (Constraints)\n- ✅ 绝对定位\n- ✅ 相对定位\n- ✅ 内边距 (Padding)\n- ✅ 间距 (Item Spacing)\n\n### 其他\n- ✅ 透明度 (Opacity)\n- ✅ 混合模式 (Blend Mode)\n- ✅ 圆角 (Border Radius)\n- ✅ 旋转 (Rotation)\n- ✅ 蒙版 (Mask)\n- ✅ 裁剪内容 (Clips Content)\n- ✅ 图片滤镜（对比度、饱和度、曝光度等）\n\n## 高级用法\n\n### 指定名称获取特定节点\n\n```typescript\n// 转换后按名称查找节点\nfunction findNodeByName(name: string, node: DomNode): DomNode | null {\n    if (node.name === name) return node;\n    if (node.children) {\n        for (const child of node.children) {\n            const found = findNodeByName(name, child);\n            if (found) return found;\n        }\n    }\n    return null;\n}\n\nconst specificNode = findNodeByName('Button', tpl);\nif (specificNode) {\n    const element = await nodeToDom(specificNode, {});\n    document.body.appendChild(element);\n}\n```\n\n### 自定义图片处理\n\n```typescript\nconst tpl = await convert(data, null, {\n    async getImage(imageRef) {\n        // 自定义图片处理逻辑\n        // 例如：上传到 CDN、压缩、格式转换等\n        const customUrl = await uploadToCDN(imageRef);\n        return customUrl;\n    }\n});\n```\n\n### 处理组件实例\n\n```typescript\n// 组件实例会继承主组件的样式\n// 可以在转换后修改特定实例\nconst tpl = await convert(data);\nmodifyComponentInstances(tpl);\n\nfunction modifyComponentInstances(node: DomNode) {\n    if (node.figmaData?.type === 'INSTANCE') {\n        // 自定义处理组件实例\n        node.style.border = '1px dashed #ccc';\n    }\n    if (node.children) {\n        node.children.forEach(modifyComponentInstances);\n    }\n}\n```\n\n## 示例项目\n\n查看 [在线示例](https://fefeding.github.io/figma2html/example/index.html)\n\n需要在 URL 中添加你的文件 ID 和 token：\n```\nhttps://fefeding.github.io/figma2html/example/index.html?fileid=YOUR_FILE_ID\u0026token=YOUR_TOKEN\n```\n\n## 注意事项\n\n1. **Personal Access Token** 是敏感信息，请勿在公开代码中暴露\n2. 大型 Figma 文件可能需要较长处理时间，建议异步加载\n3. 部分复杂的 Figma 特性可能无法完美还原（如复杂的布尔运算、特定的混合模式等）\n4. 图片需要单独获取和处理\n\n## 开发\n\n```bash\n# 安装依赖\npnpm install\n\n# 开发模式\npnpm dev\n\n# 构建\npnpm build\n\n# 生成 API 文档\npnpm api\n```\n\n## 技术栈\n\n- TypeScript\n- @fefeding/utils - 工具库\n- @fefeding/css-filters - CSS 滤镜库\n\n## 许可证\n\nMIT\n\n## 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n## 更新日志\n\n### v1.0.1\n- 初始版本发布\n- 支持基础节点类型转换\n- 支持文本、图形、图片等样式处理\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffefeding%2Ffigma2html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffefeding%2Ffigma2html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffefeding%2Ffigma2html/lists"}