Search: "figma"
Showing 17 of 17 results
figma
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
Figma
Figma 集成。浏览团队项目与文件，读取设计结构、页面、节点，导出图片，管理评论，查看版本历史，检查组件/组件集/样式，获取设计变量（Token）。通过 MorphixAI 代理安全访问 Figma API。
Figma
Figma (figma.com). Use this skill for ANY Figma request — reading, creating, updating, and deleting data. Whenever a task involves Figma, use this skill inst...
Figma
Read files, manage comments, extract design tokens, download images, and create webhooks in Figma via the Figma REST API. Use this skill when users want to i...
Figma
Interact with Figma files to read structure, export layers as images, and retrieve comments using the Figma REST API with authentication.
Figma设计集成-免费版
Figma设计集成工具免费版，面向个人设计师的Figma工作区访问工具。核心能力：，可自动提升工作效率 - 浏览Figma团队项目与文件列表 - 读取设计文件结构与指定节点详情 - 导出设计图片（PNG/JPG/SVG/PDF） - 查看文件评论与版本历史 适用场景： - 个人设计师查看设计文件 - 开发者获取设计资产与图标 - 设计走查与评论查看 差异化：免费版聚焦文件浏览、节点读取与图片导出，适合个人使用'
Figma Implement Design
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-conv...
Figma Design Integration
Figma design asset reading, code generation, and MCP integration. Covers REST API direct calls and MCP Server capabilities for design-to-code workflows. **Us...
Figma Sync
Read Figma files, extract design tokens, generate React Native Expo TS or Web React + Tailwind code, write back to Figma, and diff local models against Figma for minimal patches. Triggers: "pull figma", "sync figma", "figma to code", "push to figma", "diff figma", "extract design tokens", "generate from figma", "preview figma changes"
figma-generate-diagram
# generate-diagram **You MUST load this skill before every `generate_diagram` tool call.** Skipping it causes preventable rendering failures and low-quality output. `generate_diagram` takes Mermaid.js syntax and produces an editable FigJam diagram. This skill routes you to the right per-type guidance and sets universal constraints. ## Step 1: Is `generate_diagram` the right tool? ### Supported diagram types `flowchart`, `sequenceDiagram`, `stateDiagram` / `stateDiagram-v2`, `gantt`, `erDiagram`. ### Unsuppo
figma-create-new-file
# create_new_file — Create a New Figma File Use the `create_new_file` MCP tool to create a new blank Figma file in the user's drafts folder. This is typically used before `use_figma` when you need a fresh file to work with. ## Skill Arguments This skill accepts optional arguments: `/figma-create-new-file [editorType] [fileName]` - **editorType**: `design` (default) or `figjam` - **fileName**: Name for the new file (defaults to "Untitled") Examples: - `/figma-create-new-file` — creates a design file named "U
figma-code-connect-components
# Code Connect Components ## Overview This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency. ## Skill Boundaries - Use this skill for `get_code_connect_suggestions` + `send_code_connect_mappings` workflows. - If the task requires writing to the Figma canvas with Plugin API scripts,
figma-generate-design
# Build / Update Screens from Design System Use this skill to create or update full-page screens in Figma by **reusing the published design system** — components, variables, and styles — rather than drawing primitives with hardcoded values. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors. **MANDATORY**: Y
figma-use
# use_figma — Figma Plugin API Skill Use `use_figma` MCP to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in `references/`. **Always pass `skillNames: "figma-use"` when calling `use_figma`.** This is a logging parameter used to track skill usage — it does not affect execution. **If the task involves building or updating a full page, screen, or multi-section layout in Figma from code**, also load [figma-generate-design](../figma-generate-design/SKILL.md). It provides
figma-generate-library
# figma-generate-library > Curated from Figma's MCP server guide. ## What it does Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components. ## Source - Upstream: https://github.com/figma/skills - Category: `figma` ## How to use This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and referen
figma-create-design-system-rules
# figma-create-design-system-rules > Curated from Figma's MCP server guide. ## What it does Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source. ## Source - Upstream: https://github.com/figma/skills - Category: `figma` ## How to use This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, instal