'figma' 검색 결과

How to use Figma MCP and Variables2CSS to read designs from Figma and generate code consistent with tokens. Use when the designer shares a Figma link.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Rewrite UI copy directly on Figma files to be simpler, jargon-free, and terminologically consistent. Trigger when: user says "rewrite copy", "simplify copy", "fix the text", "copy audit", "UX copy review", "clean up the wording", shares a Figma URL and mentions copy/text/wording, or asks to make text simpler/clearer/more consistent on a Figma file.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

デザインデータ（Figma などのデザインカンプ）を参照してコーディングするときの解釈原則とアセットの扱い。Figma の URL・MCP・デザイン画像・カンプをもとに実装や修正をするときに必ず使う。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

**導入済みの sparkle-design プロジェクト**で、ユーザーが目指したい「雰囲気」を 自然言語で伝えたら、`sparkle.config.json` の primary / font-pro / font-mono / radius を 書き換えて `sparkle-design-cli generate` まで実行するスキル。選択肢は Theme Settings Figma プラグインが扱える範囲（primary 7 色 / radius 8 段階 / fonts 11 種）に揃えて おり、Figma と CLI の見た目がずれません。**未導入プロジェクトの初期セットアップは `setup-sparkle-design`（internal 環境では `install-sparkle-design`）を使うこと。** 「雰囲気を変えたい」「もっとポップに」「ビジネスライクに」「高級感を出したい」 「primary を変えたい」「角丸をもっと丸く」「フォントを変えたい」「テーマを提案して」 「テナントごとに配色を変えたい」「役割ごとに色を出し分けたい」（後者2つは複数 バリアント要望として範囲外に誘導するために発動） で発動。English: "change the vibe", "make it more playful", "make it more business-like", "adjust the theme", "change primary color".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Read-first Figma gateway via Figma MCP: analyze designs, implement 1-3 screens, extract tokens, produce Evidence Packet. Advanced ops gated on explicit intent. Use for 'figma', 'design tokens'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Read Figma files, component libraries, styles, comments, and export rendered assets (PNG / SVG / JPG / PDF) via Figma's REST API. Use when the user needs programmatic access to design files, to pull node data into code generation, or to export assets without opening the Figma desktop app.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Figma等のデザイン成果物を、既存design repoにあるデザインシステムの正本・仕様・実データの基準に従ってレビューする。ソフトウェア設計のレビュー依頼はreviewerを使う。明示トリガーは「このFigmaデザインをレビューして」「/design-review URL」。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create a reusable design guide covering colors, typography, layout, and motion. Extract styles from existing sources or start from scratch, then turn the guide into instructions or code for supported video, slide, and design tools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating a design guide from a desired mood
• Extracting visual rules from a website or brand PDF
• Applying one style to videos, slides, and designs

Turn a design into a developer handoff document covering layout, shared design settings, component options, interactions, and screen-size behavior. Include loading and error states, animation details, and accessibility notes to clarify implementation requirements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Preparing a design for developer handoff
• Documenting layout changes across screen sizes
• Specifying loading, empty, and error states

Review a design or web page against WCAG 2.1 AA, an accessibility standard. Organize findings on contrast, keyboard access, forms, and screen reader behavior, with severity levels and practical recommendations for fixes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Review accessibility before design handoff
• Check text and interface color contrast
• Review keyboard navigation and focus behavior

Capture desktop screenshots on macOS, Linux, and Windows. Save the full screen, a selected window, or a region defined by coordinates, with support for a specified file path, the default location, or temporary storage.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Saving a screenshot of the entire desktop
• Capturing a specific app or window
• Saving only a region defined by coordinates

Turn a design into a developer handoff document covering layout, shared design settings, component options, interactions, and screen-size behavior. Include loading and error states, animation details, and accessibility notes to clarify implementation requirements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Preparing a design for developer handoff
• Documenting layout changes across screen sizes
• Specifying loading, empty, and error states

Review a design or web page against WCAG 2.1 AA, an accessibility standard. Organize findings on contrast, keyboard access, forms, and screen reader behavior, with severity levels and practical recommendations for fixes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Review accessibility before design handoff
• Check text and interface color contrast
• Review keyboard navigation and focus behavior

Create editable FigJam diagrams for workflows, system architecture, data relationships, and schedules. The skill selects a suitable diagram type and guides Mermaid, a text format for diagrams, while accounting for rendering limits.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Visualizing a workflow or decision tree
• Mapping services and data stores
• Showing API interactions over time

Create editable FigJam diagrams for workflows, system architecture, data relationships, and schedules. The skill selects a suitable diagram type and guides Mermaid, a text format for diagrams, while accounting for rendering limits.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Visualizing a workflow or decision tree
• Mapping services and data stores
• Showing API interactions over time

Create HTML design artifacts, including interface mockups, interactive prototypes, and slide decks, then preview and verify them. The skill also guides importing design references and building reusable design systems with shared styles and components.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating interface mockups
• Exploring user flows with interactive prototypes
• Creating slides and exporting them to PowerPoint

Capture desktop screenshots on macOS, Linux, and Windows. Save the full screen, a selected window, or a region defined by coordinates, with support for a specified file path, the default location, or temporary storage.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Saving a screenshot of the entire desktop
• Capturing a specific app or window
• Saving only a region defined by coordinates

Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team-scale design handoff. Trigger with: "anima architecture", "design-to-code architecture", "anima project structure", "figma automation architecture".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Diagnose and fix common Anima SDK design-to-code errors. Use when encountering Figma token errors, code generation failures, node not found issues, or output quality problems. Trigger with: "anima error", "anima not working", "anima debug", "figma to code error".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Export Design Thinking artifacts to a FigJam board or Figma Design file through the Figma MCP server. Use when a team wants collaborative visual review of Method 1, 3, 4, 5, or 6 artifacts, or accepts a DT Coach board-export offer.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Control Figma from the shell via Flue - a plugin bridge to the Figma Plugin API without an MCP server.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Developer-Figma collaboration: dev mode, design tokens, component inspection, handoff, and design-system alignment. Use when implementing designs from Figma or aligning code with a design system.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Implement or update iOS SwiftUI UI from Figma designs; also use for implementation plans, token mapping, or asset export for that UI.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when implementing or updating a component from a Figma link — how to turn the Figma design variables into code tokens, on both platforms: Tailwind classnames for libs/ui-react and themeJS (`t.*`) paths for libs/ui-rnative. For the full token catalogues and styling mechanics, see component-styling.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.