Figma MCP入門
Figma MCP: Write to Canvas を使用したAIエージェントによるFigmaデザインの操作
Figma MCP: Write to Canvasの利用要件・Figma Skills・use_figmaのデータ仕様・使用時の注意点を解説します。
- AI
- 開発ツール
- フロントエンド
Figma MCP入門
Figma MCP機能概要 - コード生成の仕組みと実際のレスポンス
Figma MCPサーバーの主要機能とツール概要を紹介。デザインからのコード生成の仕組み、実際のレスポンス形式を実例とともに解説します。
- AI
- 開発ツール
- フロントエンド
Figma REST API入門
Figma REST APIで画像アセットを自動書き出し
Files endpointでExport設定を探索し、Images endpointで画像URLを取得。Node.jsスクリプトによる画像アセット自動書き出しの実装方法を紹介します。
- 開発ツール
- フロントエンド
Figma REST API入門
Figma REST APIの認証とセットアップ
Figma REST APIの基本を学びます。Personal Access Tokenの取得、環境変数設定、curlコマンドでの動作確認を通じて、APIのセットアップを進めます。
- 開発ツール
- フロントエンド
Figma Variablesでフルイドレスポンシブレイアウトシステムを構築する
Figma VariablesのModeシステムを活用してフルイドレスポンシブレイアウトのデザイントークンを定義する実践ガイド。Console/Handheld分離とブレイクポイント設計でスケーラブルなデザインシステムを構築します。
- UIデザイン
Figma Variablesで固定幅レイアウトシステムを構築する
Figma Variablesで固定幅レイアウトシステムを構築。Tailwind CSSベースの7段階ブレイクポイントと12カラムグリッドでレスポンシブデザインを体系的に管理します。
- UIデザイン
- フロントエンド
Figma MCP入門
Visual Studio Code: GitHub Copilot Agent の Figma MCP Server セットアップ
Figma MCP ServerをVS Code + GitHub Copilotと連携させ、デザインデータをコード生成やデザイン仕様確認に活用する設定方法を紹介します。
- AI
- 開発ツール
- フロントエンド