figma-skill

Name: figma-skill
Author: podo

github.com/podoデザイン・UI29158 回インストール1 日前に更新

figma-skill について

figma-skill は、プロジェクトの状況に合う Figma Community ファイルを探し、デザイントークンを抽出して、指定フレームワーク向けの実装コードを生成するデザインスキルです。ユーザーの Figma ファイルの読み書きではなく、リソースの発見とコード生成を目的とします。

主な機能

01関連する Figma Community ファイルの検索
02デザイントークンの抽出
03フレームワーク別コードの生成
047 種のフレームワークに対応

活用シーン

01プロジェクトに合う Community リソースの検索
02参照ファイルからのデザイントークン抽出
03デザインリソースの実装コード化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill figma-skill

インストール後、Claude Code で/figma-skillを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

figma-skill

カタログの概要 — 完全なパッケージ：nafiurrahmanniloy/figma-skill

判断ツリー

スキルはすでにインストールされていますか？ ~/.design-agent-skills/skills/ に figma-skill または関連ディレクトリがあるか確認します。
- はい → 呼び出して続行します
- いいえ → 手順 2 に進みます
シェルにアクセスできますか？ はい → 以下からインストールします。いいえ → コマンドをユーザーに提示します（Claude Code の場合：チャットメッセージとして ! を付けて送信します。グローバルにインストールするには -g を追加し、プロジェクトのみにインストールする場合は省略します）。

インストールコマンド

npx skills add nafiurrahmanniloy/figma-skill

インストール後の呼び出し

スキル名：figma-skill
トリガー：「figma-skill」、「Figma API extract」、「Figma to framework」、「Figma Community resources」

機能

Figma API に接続して、プロジェクトのコンテキストに合った Community ファイルのリソースを見つけ、それらのファイルからデザイントークンを抽出し、フレームワーク固有の実装コードを生成します。主要な React、Vue、Angular、ネイティブのエコシステムを網羅する 7 つのフレームワークに対応しています。