mcpField
B
build-slides-figma

build-slides-figma

github.com/southleft文档处理2067 次安装21 周前更新
代码仓库

关于 build-slides-figma

用于创建和编辑 Figma Slides 演示文稿的技能,涵盖幻灯片网格管理、内容添加和转场控制。适合通过 Figma Desktop 自动执行演示文稿编辑操作。

主要功能

  1. 01列出、创建、复制和删除幻灯片
  2. 02调整幻灯片顺序及网格位置
  3. 03添加文本、形状和背景
  4. 04设置与读取转场效果
  5. 05读取幻灯片内容并控制跳过状态

适用场景

  1. 01创建或调整幻灯片网格
  2. 02为幻灯片添加文本和图形
  3. 03设置演示文稿转场与背景

MCP 相关

此技能通过 `use_figma` 执行 Figma Plugin API 脚本;输入未说明其作为 MCP 服务或客户端。

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/southleft/skills-for-figma --skill build-slides-figma

安装后在 Claude Code 中输入/build-slides-figma确认已加载。

附带文件references/slides-snippets.md

详细介绍

build-slides-figma — 创作 Figma Slides 演示文稿

构建和编辑 Figma Slides 演示文稿:管理幻灯片网格(列出/创建/复制/重新排序 /删除/聚焦/跳过)、添加内容(文本、形状、背景颜色)以及控制转场。每张幻灯片都是一个 SLIDE 节点;演示文稿是一个二维网格(figma.getSlideGrid() → 按行排列的幻灯片)。

技能边界

  • use_figma 规则 — 首先加载官方 figma-use 技能,它是完整的 Figma Plugin API 参考。这些脚本所依赖的要点:使用纯 JS,并在顶层使用 await 和 return(不要使用 IIFE 或 figma.closePlugin();console.log 不会作为返回值返回);在每个脚本顶部将输入内联为 const;颜色值范围为 0–1;任何文本操作前都要加载字体;使用 await figma.getNodeByIdAsync(...);以及原子错误处理(脚本失败时不会应用任何更改——读取错误信息、修复后重试)。
  • 每项操作使用一个完整代码片段 → references/slides-snippets.md。

工作流

  1. 确认这是 Slides 文件。 所有操作在 Slides 之外都会报错。先检查: return { editorType: figma.editorType }; — 返回值必须是 'slides'。
  2. 列出幻灯片以获取 ID 和网格位置(scripts/代码片段 List slides)。其他所有操作都通过幻灯片 ID 引用。
  3. 从 references/slides-snippets.md 中选择操作:创建/复制/删除/重新排序幻灯片;添加文本/形状;设置背景;设置/获取转场;聚焦;跳过;读取幻灯片内容。
  4. 通过 use_figma 运行代码片段(skillNames: "build-slides-figma"),编辑内联常量。
  5. 返回已创建/更改的幻灯片 ID,并重新列出幻灯片或读取内容以确认。

说明

  • 添加文本前必须先加载字体。 add text to slide 会在设置 .characters 前调用 await figma.loadFontAsync({ family, style }) — 切勿跳过。默认字体为 Inter / Regular。
  • 使用 figma.createSlide({ row, col }) 在网格位置创建,或使用 figma.createSlide() 追加。
  • 转场 style 值:NONE、DISSOLVE、SLIDE_FROM_LEFT、SLIDE_FROM_RIGHT、 SLIDE_FROM_BOTTOM、SLIDE_FROM_TOP、PUSH_FROM_LEFT、PUSH_FROM_RIGHT、PUSH_FROM_BOTTOM、 PUSH_FROM_TOP、SMART_ANIMATE。计时默认值为 { type: 'ON_CLICK' }。
  • 背景通过插入一个铺满画布(1920×1080)的 Background 矩形实现,位置为索引 0; 再次运行时会更新现有矩形,而不会叠加。
  • reorder 接受一个由幻灯片 ID 组成的二维数组(行 × 列),并通过 figma.setSlideGrid 重建网格。当前网格中必须存在所有 ID,否则会报错。
  • 跳过操作会切换 slide.isSkippedSlide(注意:属性名是 isSkippedSlide,不是 skipped)。
  • 这些工具需要使用 Figma Desktop 应用(浏览器中无法使用 Plugin API)。

评论

支持 Markdown