SAIスキル大辞典Agent Skills Dictionary
⌕
文字
トップ›Skill›figma-bridge
UI/UX

figma-bridge

figma-bridge

MCPやFigmaデスクトップアプリなしで、Figmaの画面構成・ノード・変数・画像などを取得するAgent Skill。

AIスキル大辞典による日本語要約
品質評価97/100評価確度：暫定
人気度（GitHub Star） 0発掘スコア 100
01

このSkillでできること

  • ✓Figmaファイルのページやフレーム一覧を取得する
  • ✓指定ノードのレイアウトやテキスト情報を取得する
  • ✓デザイントークンをCSSカスタムプロパティとして出力する
  • ✓Figma画像アセットを指定形式・倍率で保存する
02

使い方

01
STEP 1

piでは登録されたfigmaツールを使う

02
STEP 2

シェル専用Agentではfigma-bridge CLIを使う

03
STEP 3

Figma URLまたはファイルキーを対象として、screens・node・variables・imagesなどのモードを選ぶ

04
STEP 4

取得範囲は深度やフィールドを指定し、ファイル全体の過剰な取得を避ける

03

Skillのインストール

初心者におすすめ

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/SuTang-vain/figma-bridge
手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

npm i -g figma-bridge-cli
mkdir -p ~/.config/figma && chmod 700 ~/.config/figma
printf 'YOUR_TOKEN' > ~/.config/figma/api-key && chmod 600 ~/.config/figma/api-key
git clone https://github.com/SuTang-vain/figma-bridge ~/figma-bridge
cd ~/figma-bridge && npm install
mkdir -p ~/.local/bin && ln -s ~/figma-bridge/bin/figma-bridge.js ~/.local/bin/figma-bridge
04

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

このFigma URLの画面一覧を取得し、主要フレームとノードIDを整理してください。
出力例を見る
[FRAME] "Home" #1:4 layout={…} text="…"
05

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり
Shellコマンド実行明確な記述なし
ファイル読み取り明確な記述なし
ファイル書き込み検出あり
ネットワークアクセス検出あり
認証情報検出あり
検出根拠を見る
  • file_write: : Figma → Settings → Security → Personal access tokens mkdir -p ~/.config/figma && chmod 700 ~/.config/figma printf 'YOUR_TOKEN' > ~/.config/figma/api-
  • network: adjacent ground, and both are good: [`@pi-stef/figma`](https://www.npmjs.com/package/@pi-stef/figma) (20 REST tools with its own config file) and [`@bigm
  • network: own config file) and [`@bigmints.com/pi-figma-bridge`](https://www.npmjs.com/package/@bigmints.com/pi-figma-bridge) (7 tools bridged to the Figma desktop
  • credential: igma-bridge-cli/bin/figma-bridge.js …`. Auth: `$FIGMA_API_KEY` or `~/.config/figma/api-key`. ## Workflow — follow the decision tree, never dump a whol
  • credential: dge.js …`. Auth: `$FIGMA_API_KEY` or `~/.config/figma/api-key`. ## Workflow — follow the decision tree, never dump a whole file A full file at max de
06

関連Skill