Figma Make、ローカルコードに対応

ビジュアル編集からコンテキストに応じたプロンプト入力、コラボレーションまで——Figma Makeはコードを使ったチームのデザインの幅を広げています。

本編はこちら:https://www.figma.com/blog/figma-make-now-on-your-local-code

Figmaは、Figma MakeにFigmaを離れることなく本番のコードベースで作業できる新機能を発表しました。ベータ版デスクトップアプリでは、自由なデザイン、コードによるプロトタイピング、そしてプロダクションへのリリースをひとつにまとめるための、最初の一歩を確認できます。

Figmaは、ユーザーが「デザインツールか、コードツールか」を選ばされるべきではないと考えています。デザインキャンバスでも、プロトタイピングの場でも、プロダクションコードでも、その時々に最適なツールを自由に使えるべきです。

現在のコーディング作業は、10年前のデザイン作業の状況によく似ています。Figmaが登場した当時、デザインはオフラインで、一人でやるものでした。今日、かつてないほど多くの人がAIエージェントを使ってコードを書いており、コーディング自体も急速に変わっています。コードの出力の質はは日々向上しているものの、コードを扱うツールは依然として発展途上であり、コラボレーションを前提に設計されていません。IDEやターミナルは、多くの人にとって「居心地のいい場所」とは言えません。私たちも毎日そう感じていますし、Figmaコミュニティからも常にその声が届いています。

ユーザーはデザインとコードのどちらかを選ばなくてもよく、ツールが、この2つの世界を行き来する妨げになってはいけない。Figmaというプラットフォームの本質は、必要なときに必要なツールを届けることです。直接編集、コンテキストに応じたプロンプト入力、より緊密なコラボレーション、ファイル共有——それを実現するために、新たな機能をご紹介します。

※これらのFigma Makeの新機能は、今後数週間かけてベータ版として順次公開される予定です。

目次

コードベースをビジュアルで編集する

コードベースに接続することで、Figma Makeから直接ビジュアル編集を行い、変更をそのままリリースできるようになりました。要素を選択して、プロパティ、レイアウト、色、フォント、サイズを調整するだけ——AIエージェントが関連するコードを見つけて編集し、デザインした通りにUIへ反映します。コードの中での精密な編集でありながら、自由に試せる柔軟さも兼ね備えています。

変更したい箇所が明確なときには、ダイレクト編集が使えます。

プロパティの変更にとどまらない、インタラクションやアニメーションといった調整には、画面上の要素に直接メモを書き込んで、やりたいことを伝えられます。このメモは、AIエージェントに複数の要素をまとめて指定することも可能です。ダイレクト編集と通常のプロンプト入力の間をつなぐ柔軟な手段が増えました。

インタラクションの動きを変えたいときは、メモ書きでAIに伝えます。

試して、仕上げて、リリース

プロダクションコードのリリースは、チームの開発プロセスを通じて、意図を持って行うべきものです。プルリクエストを作成するまでは、変更内容はローカルのコミットとして保存されます。

Figma MakeはコードベースのGitワークフローに対応しており、ブランチの作成やコミットの取り消しなどの操作が可能です。これにより、エンジニアチームは他のプルリクエストと同じように変更内容をレビューできます。

Makeから直接ブランチを作成。
Makeでコミット履歴を確認して、バージョンを管理。

協力して、形にする

Figma Makeがローカルのコードベースを編集すると、その変更内容をファイルとして共有できます。リンクを送るだけで、チームメンバーがあなたのブランチにアクセスし、変更内容を確認して、そこから作業を続けられます。メンバーの変更やアイデアも見えるので、コミット履歴を使って変更前後を比較することも可能です。

Figma MakeからFigmaキャンバスに画面、ページ、コンポーネントをコピー&ペーストしてレイヤーとして貼り付けることで、チームやFigmaのAIエージェントと一緒にアイデアを膨らませたり編集したりできます。Figmaはその変更を検知し、Figma Makeに取り込むよう促します。変更はコードとして反映されます。

Figma MakeとFigma Designを自由に行き来する。

目指しているのは、すべてをひとつの流れでつなぐことです。Figma MakeからFigma Designに画面や要素を持ち込んで、チームがコメントし、編集し、アイデアを膨らませる。そしてその決定をコードに戻す。キャンバスとコードベースが、同じ場所に。どこから始めるべきか、正解はありません。あるのは、やるべき仕事と、今いる場所に最適なツールだけです。


Figma Makeの新しい機能——ダイレクト編集、アノテーション、チャット、プルリクエスト作成を含む——は、2026年5月28日に限定ベータ版としてローンチしました。ベータ期間中はAIクレジットを消費しません。AIクレジットの料金については、近日中に発表予定です。このベータ版は、Mac向けデスクトップアプリのみでご利用いただけます。その他のプラットフォームへの対応も近日中に予定しています。機能の詳細はヘルプセンターをご覧ください。

Figmaについて

Figmaは、チームが集まり、アイデアを世界最高のデジタルプロダクトや体験へと形にするための場所です。2012年の設立以来、Figmaは単なるデザインツールから進化を遂げ、アイデアの創出からプロダクトのリリースまでを一貫して支援する、接続性の高いAI搭載プラットフォームへと発展しました。アイデアを考え、デザインし、構築し、リリースするあらゆるプロセスにおいて、Figmaはチームのコラボレーションをよりスムーズで効率的、そして楽しいものにします。どんな工程においても、チーム全員が同じページを共有できる——それがFigmaの強みです。

※本記事はFigma Japan株式会社のプレスリリースをもとに作成しています。

  • URLをコピーしました!
目次