リポジトリへの接続と作成
既存のGitHubリポジトリにGitFigを接続するか、Figmaから新しいリポジトリを作成できます。必要に応じてスターターファイルも生成されます。
GitFig
GitFigは、FigmaとGitHub間でデザイントークンとスタイルを双方向同期できるプラグインです。Figma内でリポジトリのファイル、ブランチ、コミット、プルリクエストを管理できます。
概要
GitFigは、FigmaとGitHub間でデザイントークンとスタイルを同期するFigmaプラグインです。変数、スタイル、関連するトークンファイルをリポジトリで管理し、ブランチ、コミット、プルリクエストといったGitベースのワークフローを維持しながら、Figma内で編集したいチーム向けに構築されています。
サイトの商品説明では、双方向同期が強調されています。GitFigはGitHubリポジトリに接続または新規作成でき、リポジトリファイルをFigmaのコレクションまたはスタイルにマッピングし、コミットまたは適用する前に上書きされる内容を確認しながら変更をプッシュまたはプルできます。
機能
ファイルと同期先のマッピング
リポジトリファイルを特定のFigmaコレクションまたはスタイルタイプに割り当て、1つのモードまたはすべてのモードのどちらを同期するかを選択できます。
変数の双方向同期
モードをキーとするコレクションにも対応し、ライトとダークの値をまとめたまま、エイリアスを維持して変数を双方向に同期できます。
スタイルの同期
変数とともにカラーおよびテキストスタイルも同期でき、スタイルはリポジトリ内の専用ファイルにマッピングされます。
複数のトークン形式
W3C Design Tokens、Style Dictionary、Tokens Studio、カスタムJSONトークン形式を扱えます。
プラグイン内のGitワークフロー
Figma内からブランチの作成、コミット、プルリクエストの作成ができます。プッシュまたはプルで作業内容を置き換える前に、上書きチェックも行われます。
ユースケース
共有デザイントークンの管理
デザインシステムチームは変数とスタイルをリポジトリファイルと同期し、コード変更と同じワークフローでトークンの更新を管理できます。
GitHubを通じた変更のレビュー
Gitベースのレビュープロセスを採用するデザイナーは、Figmaから移動せずにブランチを作成し、変更をコミットしてプルリクエストを作成できます。
マルチモードテーマへの対応
ライトテーマとダークテーマを管理するチームは、マルチモードコレクションを同期して、対応する値をまとめたままエイリアスを維持できます。
意図しない上書きの回避
デザインとエンジニアリング間でより安全に引き継ぎたいチームは、上書きチェックを使って、確定前にプッシュまたはプルの影響を確認できます。
既存のトークン形式の利用
既存のトークンファイル規約がある組織は、リポジトリファイルをW3C Design Tokens、Style Dictionary、Tokens Studio、カスタムJSON形式にマッピングできます。
Pros and Cons
Pros
- Figmaプラグインとして動作するため、デザインファイルを離れずにトークンやスタイルの変更を処理できます。
- 一方向のエクスポートだけでなく、FigmaとGitHub間の双方向同期に対応しています。
- Figma内からブランチ、コミット、プルリクエストを作成できます。
- 変数とスタイルをリポジトリ内のJSONファイルとして同期でき、複数のトークン形式に対応しています。
- プッシュまたはプルで既存の作業内容を置き換える前に警告する、上書きチェックが含まれています。
Cons
- 提供元の情報で確認できるのは、FigmaプラグインのワークフローとGitHubリポジトリへの対応です。その他のバージョン管理システムへの対応は示されていません。
- マルチモードコレクションには有料のFigmaプランが必要で、Figma Starterではコレクションごとに1つのモードに制限されます。
FAQ
GitFigの利用を開始するにはどうすればよいですか？
GitFigはFigma内からGitHubリポジトリに接続します。リポジトリを選択または作成でき、新しいリポジトリを作成する場合はGitFigがスターターファイルを追加できます。
Figmaからブランチやプルリクエストを作成できますか？
はい。ファイルを離れることなく、Figma内でブランチとプルリクエストを作成できます。
GitFigはどの形式を同期できますか？
GitFigは変数とスタイルをリポジトリファイルに同期します。W3C Design Tokens、Style Dictionary、Tokens Studio、カスタムJSONトークン形式に対応しています。
GitFigは更新と上書きのリスクをどのように処理しますか？
変数とスタイルへの変更は数秒以内に反映され、プッシュまたはプルを実行する前に、上書きされる内容が表示されます。
Figmaのプランは変数のモード対応に影響しますか？
料金ページによると、マルチモードコレクションには有料のFigmaプランが必要です。一方、Figma Starterではコレクションごとに1つのモードを使用できます。
Quick Facts
- カテゴリー
- デザインツール
- プラットフォーム
- Figmaプラグイン
- 主な連携先
- GitHub
- ソースドメイン
- gitfig.com
- ワークフロー
- 変数、スタイル、ブランチ、コミット、プルリクエストの双方向同期
GitFigの代替品
图像大厨imgcook
imgcookは、デザイン稿をフロントエンドコードに変換するデザイン-to-codeツールです。Sketch、Photoshop、VS Code、CLIに対応し、プラグインと開発者向けのワークフローを提供します。
ByteAsk
ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。
CreateOS Sandbox
CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。
hob
hobは、エージェントのセッション、ターミナル、履歴、後続作業を、既存のツールやプロバイダーに合わせて整理できる独立したコーディングエージェント向けワークスペース。ローカルでの制御を重視する開発者に最適。
Ably Chat
Ably Chatは、カスタムのリアルタイムチャットアプリを構築できるチャットAPIプラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。
Manta AI
Manta AIは、URLからアプリの挙動を把握し、回帰を検出し、スクリプトやセレクタ管理なしでテストを生成できる自律型Webアプリテストツールです。