Search: "figma"
Showing 16 of 16 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-library
# Design System Builder — Figma MCP Skill Build professional-grade design systems in Figma that match code. This skill orchestrates multi-phase workflows across 20–100+ `use_figma` calls, enforcing quality patterns from real-world design systems (Material 3, Polaris, Figma UI3, Simple DS). **Prerequisites**: The `figma-use` skill MUST also be loaded for every `use_figma` call. It provides Plugin API syntax rules (return pattern, page reset, ID return, font loading, color range). This skill provides design s
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-create-design-system-rules
# Create Design System Rules ## Overview This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed automatically. ### Supported Rule Files | Agent | Rule File | |-------|-----------| | Claude Code | `CLAUDE.md` | | Codex CLI | `AGENTS.md` | | Cursor | `.cursor/
figma-code-connect-components
# figma-code-connect-components > Curated from Figma's MCP server guide. ## What it does Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically. ## 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, install the upstre
figma-create-new-file
# figma-create-new-file > Curated from Figma's MCP server guide. ## What it does Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows. ## 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, install the upstream bundle into your