Figma + Claude Code

はい、フィージャー(Figma)は、アスティンランチ(Anthropicとのパートナーシップ」により、そのデザインプラットフォームにクリーズAIの機能を統合しました。主な特徴がいます。「コードからキャンバス」 - Claude CodeなどのテクノロジーやAI生成されたコードをFigmaデザインに完全編集可能なUIとして変換します。目的:一般的なデザインプロセスと協調的な設計の質改善間の橋を架けるものになっています。ブラウザベースでユーザーインターフェースを作成しますこれによりライブバックスクリーンを抽出するエンタープライズ連携を行いそれはリアルタイムのブラウザ状態をデイジフィーザーへのフレームに変換することになります。Figmaで動的なデザイン製品として動作することができます。協力体制を使用するには、チームはアクティブなコメント、再使用、シフト、そしてAI生成のオプションに対する比較を行うことができます。これはマッケーファイヴァルによって連携が設定されます、その公開で標準的なAIツールと外部アプリケーションとの接続規格です。要件:ファジザードesktopアプリケーション(Fラウジングバージョンではサポートされていません)ファズアイスデベロッパーまたはフルセッチンクライアント版に設定があること要求を達成させるためにはFIZA MCP(モデルコンテキストプロトコルサーバー)が設定されています。その設定を通じてファジザードPreferencesへこのMCPサーバーの有効化を、クラウドジェネリケイコードとのつなぎ方が経由するターミナルコマンドでの接続になります。メリット:逆向フローの設定をサポートします – コード→設計プロセス (一般的なデザイン → 処理したコードという従来的なステップです) チームの協力可能性も向上させることができ、非テクニカルでストアーフェースを実際的なUIレビューとフィードバック提供できるので、その反面、設計責任者である人間が実際にコード生成に影響しないこと。デザインシステム統合性(一部の新しいAI生成されたUIは、既存のコンポーネントやトランクラインによって適応します)ローテートフロー設定によりデザインの後、Claude Codeを実行することと引き続いて設計した後をフィージャーにキャプチャし、その上を改善し編集できます。リリースはターミナル/CLIセットアップが要求されますディスプレイアプリでのみ動作(Fラウジングバージョンもサポートされていません)モティビングフローが複数のディスプレイで動作するには個別のキャプチャが必要となりますCLAUSECODEデスクトップに直結して使用し直接自分のコードベースを使用することによって、変更は生産性フィルダーに影響します。複雑なプロジェクトを用いたトークン費用は一定量は増加しますが。

Yes, Figma has officially partnered with Anthropic to integrate Claude AI capabilities into its design platform. Here are the key details: Core Feature: "Code to Canvas" - converts AI-generated code from tools like Claude Code into fully editable Figma designs Purpose: Bridges the gap between AI coding workflows and collaborative design refinement Build a UI using Claude Code in a browser-based environment Capture the screen via the integration, which converts the live browser state into a Figma-compatible frame Paste into Figma as an editable design artifact (not a flattened image) Collaborate - teams can annotate, duplicate, rearrange, and compare AI-generated options directly on the canvas Runs on Figma's MCP (Model Context Protocol) Server, an open standard for connecting AI tools to external applications Requirements: Figma desktop app (browser version not supported) Figma Dev or Full seat Claude Code installed via npm Setup involves enabling the MCP server in Figma preferences and connecting it to Claude Code via a terminal command Benefit Impact Reverse workflow Enables code -> design flow (traditionally design -> code) Team collaboration Non-technical stakeholders can review and give feedback on actual built UIs Design system alignment Check if AI-generated UIs match your existing components and tokens Round-trip workflow Design in Figma->Generate code with Claude -> Capture back to Figma-> Refine Requires terminal / cli setup Desktop app only (no browser support) Multi-screen flows require individual captures Claude Code operates directly in your codebase - changes affect production files Token costs may add up for complex projects This partnership reflects Figma's bet that AI won't replace the design canvas - it will feed it with more options, faster.