Skip to main content

​
Figma

ShanoneのFigma連携は、デザインファイルの読み取り、コメントやデベロッパーハンドオフ用リソースの管理、ファイル/チーム全体のコンポーネント・スタイル・変数の確認を行う39個のツールをエージェントに提供します。

​
はじめに

1

OAuthで接続する

エージェントにFigma関連の作業を依頼(例: 「このデザインファイルのコメントをまとめて」)するか、Shanoneダッシュボードの連携から事前に接続しておきます。
2

Figmaアカウントを許可する

Shanoneに操作させたいアカウント/チームについて、FigmaのOAuth同意画面を承認します。
3

リクエストを再実行する

接続が完了すると、figma_*ツールに対するshanone_execute_tool呼び出しが成功するようになります。

​
利用可能なツール

ShanoneはFigma向けに39個のツールを、以下のカテゴリに整理して提供しています。
figma_get_me
figma_get_file, figma_get_file_nodes, figma_export_images, figma_get_file_versions, figma_get_image_fills, figma_get_file_meta
figma_get_comments, figma_post_comment, figma_delete_comment, figma_get_comment_reactions, figma_post_comment_reaction, figma_delete_comment_reaction
figma_get_team_projects, figma_get_project_files, figma_get_component_sets, figma_get_styles, figma_get_project_meta
figma_get_file_components, figma_get_team_components, figma_get_component, figma_get_team_component_sets, figma_get_component_set, figma_get_team_styles, figma_get_style
figma_list_webhooks, figma_create_webhook, figma_get_webhook, figma_update_webhook, figma_delete_webhook, figma_get_webhook_requests
figma_get_dev_resources, figma_create_dev_resources, figma_update_dev_resources, figma_delete_dev_resource
figma_get_local_variables, figma_get_published_variables, figma_update_variables
figma_get_oembed

​
よくあるユースケース

デザインレビューのトリアージ

ファイル上の全コメントを取得し、未対応のフィードバックスレッドをデザインチーム向けに要約する

デザインからコードへのハンドオフ

コンポーネント/スタイルのメタデータとデベロッパーリソースを取得し、エンジニアに正確な仕様とアセットリンクを渡す

デザインシステムの監査

チームのコンポーネント、コンポーネントセット、スタイルを一覧化してファイル間の一貫性を確認する

変更通知

Webhookを登録し、ファイルが更新されたり新しいコメントが投稿されたときに通知を受け取る

​
トラブルシューティング

デザインの一部だけが必要な場合は、ファイルツリー全体を取得する代わりに特定のノードIDを指定してfigma_get_file_nodesを使用してください。
書き出された画像URLは一時的なものです。以前のレスポンスのURLをキャッシュするのではなく、figma_export_imagesを再度呼び出して新しいURLを取得してください。
これらには有効なチームIDが必要で、接続先アカウントがそのチームのメンバーである必要があります。まずfigma_get_meやFigmaのWeb UIでチームIDを確認してください。