ee719d07cc
- 56 套模板元数据（35 Figma 原生 + 21 非 Figma） - 静态展示站 (HTML/CSS/JS 无框架)：格式筛选、lightbox、搜索 - 35 个 .fig 已真上传 Figma Drafts 云端 - iframe 实时投射（登录态可看私有 Drafts） - 部署：nginx:alpine + basic-auth (kang) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
92 lines
4.2 KiB
Markdown
92 lines
4.2 KiB
Markdown
# Figma 模板库 - 状态
|
||
|
||
> 2026-04-22 立项，从桌面搬迁 11GB "Figma模板网页官网首页PC电脑Web端UI界面Sketch Xd设计素材200套" 整理并展示
|
||
|
||
## 核心事实
|
||
|
||
- **"200 套" 名不副实**：实际 **56 个源包** + 202 张 A 预览索引缩略图
|
||
- 格式分布：51×zip + 3×7z + 2×rar，展开后：
|
||
- **含 `.fig`**：35 套（Figma 原生）
|
||
- 只 `.sketch`：8 套
|
||
- 只 `.xd`：7 套
|
||
- 只 `.psd`：2 套
|
||
- 混合无 fig：4 套
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
~/Projects/research/20260422-figma模板库/
|
||
├── source/ 11G · 原始压缩包 + A 预览/ 202 张索引图
|
||
├── extracted/ 全 56 套已解压（nested zip 也全递归解压了：W27/W39/W20 等）
|
||
├── manifest.json 56 条元数据（name/格式/文件列表/大小）
|
||
├── scripts/
|
||
│ └── import-to-figma.sh slim/full 模式批量 open -a Figma
|
||
├── web/ 展示站
|
||
│ ├── index.html
|
||
│ ├── styles.css
|
||
│ ├── app.js
|
||
│ ├── data.json 56 条含 cover/gallery/figma_key 字段（key 暂空）
|
||
│ ├── thumbs/ 56 张 cover（900px/jpg82）6.1M
|
||
│ └── previews/ 全部 galleries（1600px/jpg82）52M
|
||
└── .memory/
|
||
```
|
||
|
||
## 已写入 Figma Drafts（slim 模式 43 个）
|
||
|
||
- W1 测试 1 个（手动 open）+ 42 个 slim 批量
|
||
- **W37 Daily UI**：30 天的 kit 只入了第 1 天（"Day 03 - Videos Website Landing"），其他 29 天本地 `extracted/W37/` 保留
|
||
- W5 Wiloa 全 4 变体（Hotel/Plant/Restaurant/Travel）
|
||
- W56 Orabel 全 6 页（Home/About/Portfolio/Blog/Contact/Open Menu）
|
||
- 其他 32 个 template 各 1 个 fig
|
||
|
||
## 非 Figma 原生的 21 套（已搁置）
|
||
|
||
只 Sketch：W11, W12, W18, W20, W30, W44（6）
|
||
只 XD：W8, W19, W22, W23, W39, W49（6）
|
||
只 PSD：W17（含 68 psd + 2 xd）, W42（11 psd）
|
||
混合无 fig：W4, W9, W15, W21, W27, W36, W50（7）
|
||
|
||
后续如需：
|
||
- Sketch → Figma 桌面 File→Import 可批量（多选）
|
||
- XD → 第三方转换器（convertxd 之类）或搁置
|
||
- PSD → 非 Figma 生态
|
||
|
||
## 展示站
|
||
|
||
- 端口 **4010**（端口注册中心分的 4010-4019 块）
|
||
- 启动：`cd web && python3 -m http.server 4010`
|
||
- 功能：卡片网格 · 格式筛选（fig/sketch/xd/psd/imported）· 名称搜索 · lightbox modal · 本地源包路径复制 · Figma Drafts 跳转
|
||
- 暗色调 / CSS variables / 无框架 / 静态
|
||
|
||
## 活·iframe 投射 ✅ 已完成
|
||
|
||
**重大踩坑**：`open -a Figma file.fig` 只在桌面版本地打开（Untitled tab），**不上传云端**。Drafts 云端 API 看不到。
|
||
|
||
**真·上传路径**：Figma 网页版 Drafts 页 → "+" → Import → "Import from computer"（接受 .fig）。Playwright `browser_file_upload` 可一次喂 42 个，Figma 串行处理 ~50s/个 → 约 60 分钟全部上云。
|
||
|
||
**fileKey 抓取（绕了好几圈）**：
|
||
1. ❌ Figma REST API：无 "list drafts" 接口
|
||
2. ❌ Figma Desktop `settings.json`：不实时更新
|
||
3. ❌ AppleScript 读 Figma 桌面窗口：被系统拒
|
||
4. ❌ Figma Plugin API：要已知 fileKey 才能进
|
||
5. ❌ Chromium Cookie：macOS Keychain 加密
|
||
6. ✅ **Figma 内部 API**：登录后调 `/api/folders/{drafts_folder_id}/paginated_files?...` 拿全 list（drafts_folder_id 从 `/api/user/state` 拿不到，但触发 Drafts UI 后从 network 抓到 `194902307`）
|
||
7. 模糊匹配名称回填 → `scripts/match-and-update.py`（35/35 score 1.0）
|
||
|
||
**最终架构**：
|
||
- 静态卡片缩略图（本地 56 张，离线可看）
|
||
- 点开 modal → `<iframe src="https://embed.figma.com/design/{key}/?embed-host=kang&footer=false">` 实时渲染你 Figma Drafts 里的真实文件
|
||
- "在 Figma 打开 →" 按钮跳转编辑模式
|
||
- 35/35 fig 模板全部支持
|
||
|
||
iframe 嵌入只在你登录 Figma 的浏览器里能看（drafts 私有），符合个人用途。
|
||
|
||
## 部署（未做）
|
||
|
||
若要上 VPS（像 `styles.kang-kang.com` 那样）：
|
||
- Coolify dockerfile nginx:alpine 模式
|
||
- DNS：`*.kang-kang.com` 泛解析已指 76.13.31.179
|
||
- 建议域名：`figma-templates.kang-kang.com` 或 `figma.kang-kang.com`
|
||
- 本地静态文件体积：web/ 合计 ~60MB（可接受）
|
||
- 加 basic-auth（类似 styles 站）
|