AWS Amplify StudioとFigmaの連携手順｜Gen 1保守モード後の現状とGen 2のFigmaプラグイン

AWS Amplify StudioとFigmaの連携は、Figmaで作ったコンポーネントをStudioに同期し、amplify pullでReactコードとして取り込む仕組みです。ただしStudioはAmplify Gen 1の機能で、Gen 1は2026年5月1日に保守モードへ入り、2027年5月1日にサポート終了（EOL）を迎えます。Amplifyを使ったことのないAWSアカウントでは、最初のamplify initで処理が止まります。

これから始めるなら、入口はGen 2向けの「AWS Amplify UI Builder」Figmaプラグインです。この記事では、既存のGen 1プロジェクトで同期を続ける手順と、Gen 2へ移るときに引き継げるもの・引き継げないものを、公式ドキュメントとCLIの実装で確かめた範囲で整理します（2026年10月1日時点）。

まとめ：Amplify Studio×Figma連携の現状と選び方

• Studio（UI Builder）はGen 1の機能です。Gen 1は2026年5月1日から重大なバグ修正とセキュリティパッチだけの提供になり、2027年5月1日にEOLを迎えます。
• 新規顧客の受け付けは止まっています。CLIは、設定したリージョンにGen 1のバックエンド環境を1つも持たないアカウントでamplify initを中断します。
• 既存のGen 1アプリでは、Figma同期からamplify pull、src/ui-componentsへの書き出しまでの流れが今も使えます。生成コードは直接編集せず、overridesで上書きします。
• Gen 2にStudioの画面はありません。代わりにFigmaプラグイン（最新はv35・2026年2月17日）でFigmaの中からReactコードを出し、データへの接続はエクスポート後にコードで書きます。
• Next.jsのApp Router（React Server Components）はUI Builderの非対応環境と公式に明記されています。Amplify UIキットを使わないデザインの実装には、Figma MCPとAIエージェントを使う方法があります。Code Connectは、既存の実装コンポーネントをFigmaの部品に対応づける機能です。

Amplify StudioのFigma連携が置かれている状況（2026年10月時点）

Gen 1の保守モード入りとEOLの日程

GitHubのaws-amplify/amplify-cliリポジトリでピン留めされたissue #14881（2026年5月14日公開）は、Starting May 1, 2026, Gen 1 backends will receive only critical bug fixes and security patches and will reach end of life on May 1, 2027.と告知しています。Gen 1ドキュメントの全ページにも保守モードのバナーが付き、New project should use Amplify Gen 2.と新規案件の移行先を指定しています。

Gen 2への移行ガイドにある機能対応表（feature matrix）は、UI BuilderをAmplify Studioの一部と位置づけたうえでNo such UI exists for Gen 2と書いています。Studioの画面でデータモデルやストレージを視覚的に設定する機能も、Gen 2ではcode-first by designとして提供されません。Gen 2の全体像はAWS Amplifyとは？Gen 2のバックエンド定義と料金・採用判断を実装者目線で解説にまとめています。

新規アカウントでamplify initが止まる条件

「新規顧客を受け付けない」は告知の文面だけでなく、CLIに実装されています。@aws-amplify/amplify-provider-awscloudformation 8.11.19のgen1-new-customer-restriction.jsは、CLIに設定したリージョンのアプリをListAppsで25件ずつ最後のページまで走査し、ListBackendEnvironmentsでバックエンド環境が1つでも見つかれば既存顧客として通します。見つからなければ、次のメッセージで初期化を中断します。なお、API呼び出し自体が失敗したときは既存顧客として扱い、止めない実装です。

AWS Amplify Gen 1 has entered maintenance mode and will no longer accept new customers. Gen 1 will reach end of life on May 1, 2027. Start a new app with Amplify Gen 2: https://docs.amplify.aws/

このチェックを呼ぶのはinitializer.jsで、appIdを指定せずに新しい環境を作るときだけです。既存アプリのIDを渡すamplify pullは対象外なので、Gen 1で動いている案件の同期作業はEOLまで続けられます。一方、検証用に新しいAWSアカウントを作ってStudioのチュートリアルをなぞる進め方はできません。

既存のGen 1プロジェクトでFigmaを同期する手順

Figmaファイルの準備：Amplify UIキットの複製

Studioには任意のFigmaファイルをリンクできますが、公式はAmplify UIのFigmaファイル（コミュニティファイル）を複製して始める方法を推奨しています。このファイルはREADME・Theme・Primitives・My components・Examplesの5ページで構成されています。

• Primitives：ボタンやアラートなどAmplify UIの部品に対応するページで、読み取り専用。ここを変えても生成コードには反映されません。
• Theme：テーマ値とデザイントークンの表示用。ページ上で直接変えた値はコードに出ず、テーマはFigmaプラグインから変更します。
• My components：自作コンポーネントの置き場。ニュースフィードやヒーローなどのサンプルが入っていて、これを改造するか一から作ります。

Studioでのリンクと同期

1. StudioでFigmaファイルのURLを入力し、Figmaの認証を通します。
2. 同期できるコンポーネントの一覧が出るので、Accept allで一括取り込みするか、1つずつ見た目を確認して取り込みます。
3. 取り込み後の一覧に出るプレビューは、実際に生成されたReactコンポーネントの描画です。

Figma側でデザインを変えたら、StudioのSync from Figmaで再同期します。Amplify UIキットを新しい版に上げるときは、旧ファイルのプラグインでCopy Themeを押し、新しいコミュニティファイルを複製してTheme presets/Importにテーマを貼り付けます。続けてMy componentsを旧ファイルから移し、プラグインのボタンでプリミティブを再リンクしてから、StudioのURLを新しいファイルに差し替えます。子要素のpropsやデータバインドはこの移行で落ちることがあると公式が注意しているので、移行後は部品ごとに確認が要ります。

amplify pullによるsrc/ui-componentsへの取り込み

アプリのルートで依存パッケージを入れ、Studioの画面に出るアプリIDと環境名でamplify pullを実行します。npm上のGen 1 CLI（@aws-amplify/cli）の最新は14.5.1（2026年6月25日）です。

npm install -g @aws-amplify/cli
npm install aws-amplify @aws-amplify/ui-react
amplify pull --appId <アプリID> --envName <環境名>

エントリーファイル（Viteならsrc/main.jsx）でAmplifyを設定し、アプリ全体をStudioのテーマで包みます。

import { ThemeProvider } from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";
import amplifyconfig from "./amplifyconfiguration.json";
import "@aws-amplify/ui-react/styles.css";
import studioTheme from "./ui-components/studioTheme";

Amplify.configure(amplifyconfig);

// 既存の描画処理内の <App /> を次のJSXに置き換える
<ThemeProvider theme={studioTheme}>
  <App />
</ThemeProvider>

amplify pullは、Figma由来のコンポーネントをJSXとTSの両方でsrc/ui-componentsに書き出します。中身はAmplify UIのプリミティブを組み合わせた普通のReactコンポーネントなので、import { ComponentA } from "./ui-components";のように読み込めます。

生成コンポーネントを壊さずに変える：overridesと退避コピー

overridesによる子要素のpropsの上書き

src/ui-componentsの中身は次のamplify pullで上書きされるので、直接編集してはいけません。代わりに、生成コードの全コンポーネントと子要素にoverridesというpropが用意されていて、Studioに表示される要素名をキーに値を差し替えられます。

import { FAQItem } from "./ui-components";

// Studioで確認した要素名「Title」の文字色だけを変える
<FAQItem overrides={{ Title: { color: "red" } }} />

hoverの効果を付けたい場合もこの方法を使います。Figmaにhoverのバリアントを作ってもReactには変換されないため、classNameを渡してCSS側に書きます。CSSはApp.cssに置きます。

.custom-btn:hover { transform: scale(1.2); }

App.jsxではApp.cssを読み込み、生成部品の要素名「Button」にクラス名を渡します。

import "./App.css";
import { HeroLayout1 } from "./ui-components";

<HeroLayout1 overrides={{ Button: { className: "custom-btn" } }} />

overrideItemsによるコレクションの行単位のカスタマイズ

一覧（Collection）にはoverrideItemsがあり、{ item, index }を受け取る関数で行ごとの上書きを返せます。isPaginatedやitemsPerPageのように、元のCollection部品が持つpropもそのまま渡せます。

<HomeCollection
  isPaginated
  itemsPerPage={3}
  overrideItems={({ item, index }) => ({
    backgroundColor: index % 2 === 0 ? "white" : "lightgray",
  })}
/>

手で直したいときの退避コピー

公式が示す回避策は、生成されたJSXとTSを別フォルダへ複製し、ファイル名と関数名を変え（例：Ampligram2）、新しいindex.jsでexport { default as Ampligram2 } from "./Ampligram2";と書き出し直す方法です。次のamplify pullでも上書きされませんが、Figmaの変更も届かなくなります。退避コピーは「この部品は同期をやめる」という判断なので、見た目がほぼ固まった部品に限って使います。

Figma側で守る設計ルールと変換されない要素

Studioが取り込むのはFigmaの「コンポーネント」だけです。公式のBest practicesにある制約を、Figmaでの状態ごとにまとめます。

文字が想定外の位置で折り返す、要素が切れるといった崩れは、制約（Constraints）の「Hug contents」と「Fill container」の設定漏れが原因になりやすいと公式は書いています。

breakpointバリアントによるレスポンシブ設定

Amplify UIテーマの既定ブレークポイントは、base 0／small 480px／medium 768px／large 992px／xl 1280px／xxl 1536pxです。値はAWS Amplify Theme EditorプラグインのBreakpointsタブで変えられ、Figmaファイル内の全コンポーネントに効きます。

部品をレスポンシブにするには、Figmaのバリアントのプロパティ名をbreakpointにし、各バリアントへsmallやxlなどの値を割り当てます。バリアント間では子要素の構成に加えて、レイアウト方式（Auto layoutか手動配置か）も揃える必要があります。breakpoint以外のバリアントプロパティ（例：表示モード）を持つ部品は、その値を呼び出し側で指定しないとレスポンシブになりません。

// displaymode を指定して初めて breakpoint による切り替えが効く
<ResponsiveToolbar displaymode="light" />

Next.jsのApp Routerで使うときの制約

Gen 1ドキュメントFigma-to-CodeのLimitationsには、Components created with UI Builder are currently not compatible with React Server Components, including the Next.js App Router.とあります。コード生成ライブラリ@aws-amplify/codegen-ui-react 2.20.7を読むと、'use client'を付ける処理はフォーム用のレンダラーにしかなく、UIコンポーネントを出すレンダラーにはありません。App Routerの案件にUI Builderの生成物を持ち込む前提で設計しないことが、手戻りを避ける近道です。

Gen 2での代替：Amplify UI Builder Figmaプラグイン

プラグインでReactコードを出す手順

AWSは2023年6月22日に、Figmaの中でReactコードを生成・プレビューできる「AWS Amplify UI Builder」プラグインを発表しました。Figmaコミュニティのプラグインページの公開情報では、最新版はv35（2026年2月17日、依存関係の更新と軽微なバグ修正）、プラグインを実行したユーザー数は30,440です。

1. Amplify UIのFigmaファイルを複製します（ページ構成はGen 1と同じ5ページ）。
2. Dev Modeの場合：Dev Modeを有効にしてPluginsタブからAWS Amplify UI Builderを選び、任意のレイヤーを選択すると、Reactコードと生成コードのライブプレビューが出ます。
3. Dev Modeを使わない場合：PluginsタブからAWS Amplify UI Builderを選び、Download component codeでコンポーネントのコードをダウンロードします。

Gen 2の手順には、StudioのようなAWSアカウントとの接続やamplify pullが出てきません。生成コードはAmplify UIのプリミティブで組まれているので、アプリ側には@aws-amplify/ui-react（npmの最新は6.15.6）を入れておきます。

Studioとの機能差：データ接続はエクスポート後にコードで

移行ガイドの対応表は、プラグインでStudioとほぼ同等の機能（near-full feature parity）を得られるとしつつ、次の差を明記しています。

Studioでは、部品のプロパティにデータモデルの型を割り当て、子要素のsrcやlabelをフィールドにひも付けてから出力できました。Gen 2ではこの工程がなく、対応表の言葉ではConnect to Amplify Data as part of the engineering effort.です。データ定義と取得コードの書き方はAWS Amplify Gen 2の使い方：ampxで初期化からCI/CDまで【2026年版】で扱っています。

フォームはnpx ampx generate formsで生成

StudioのForm Builderに当たる機能は、Gen 2ではCLIに移っています。サンドボックスでデータモデルをデプロイしたあとに実行すると、スキーマの各モデルについて作成用と更新用のフォームがui-componentsに書き出されます。

npm add @aws-amplify/ui-react
npx ampx generate forms

# 出力例（Todoモデルの場合）
# File written: ui-components/TodoCreateForm.jsx
# File written: ui-components/TodoUpdateForm.jsx
# File written: ui-components/graphql/mutations.ts

@aws-amplify/backend-cli 1.10.0では、--modelsで対象モデルを、--out-dirで出力先を絞れます。再実行すると上書きされるため、公式は「元のui-componentsフォルダをバックアップしてから再生成する」よう注意しています。

Studio製コンポーネントをGen 2へ移すときの判断

DataStoreにバインドした部品のGen 2移行制約

@aws-amplify/codegen-ui-react 2.20.7のデータAPI種別は'DataStore' | 'GraphQL' | 'NoApi'の3つです。DataStoreを使うGen 1プロジェクトでデータをバインドした部品は、useDataStoreBindingを呼ぶコードとして生成されます。一方、Gen 2の対応表でDataStoreのサポートは「No」です。src/ui-componentsをGen 2のプロジェクトへ丸ごとコピーしても、データ付きの部品はGen 2のバックエンドにつながりません。

移すときは部品を二つに分けます。データに接続していない見た目だけの部品は、生成済みのコードをそのまま使えます。データ付きの部品は、プラグインで見た目を出し直し、Amplify Dataの取得コードを手で足します。先にuseDataStoreBindingでsrc/ui-componentsをgrepすると、書き直しが要る部品の数を見積もれます。

Gen 1コードの置き換え全般は、Remixの事例ですがRemix SPAモードとAWS Amplify Gen 2の構成手順｜Gen 1コードの置き換えとHosting設定が参考になります。

UI Builder系を選ばないほうがよい案件

既存のデザインシステムがAmplify UIのプリミティブで組まれていないなら、StudioもFigmaプラグインも選ぶべきではありません。どちらもAmplify UIキットのプリミティブに対応づいたレイヤーをコードにする前提で、Primitivesページを変えても生成コードに反映されない作りです。自社のコンポーネント体系に合わせたいなら、Amplify UIのプリミティブで作り直すことになり、変換の効率化という目的と逆行します。

自社のコンポーネントとFigmaの部品を対応づけるならFigma Code Connectの使い方｜UIとCLIの始め方とDev Mode表示・CLI v2移行、AIエージェントにFigmaのデザインを読ませてコードを書かせるならFigma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】が入口です。変換手段を横並びで比べたい場合はFigmaをReactに変換する4つの方法｜HTML書き出しの可否とLocofy・Figma Make・MCPの使い分けを参照してください。

よくある質問

AWS Amplify Studioは今も使えますか？

Gen 1のアプリを運用しているAWSアカウントなら、2027年5月1日のEOLまで使えます。ただし2026年5月1日以降の提供は、重大なバグ修正とセキュリティパッチに限られます。Amplifyを使ったことのない新規アカウントでは、CLIのamplify initが保守モードのメッセージで止まるため、新しく始めることはできません。

FigmaのデザインをAWSのReactアプリに取り込むにはどうすればよいですか？

新規ならGen 2向けのAWS Amplify UI Builder Figmaプラグインを使います。Amplify UIのFigmaファイルを複製し、プラグインでReactコードを出力して、@aws-amplify/ui-reactを入れたアプリに組み込みます。データへの接続は、出力後にAmplify Dataのコードで書きます。

Figmaのデザインを変更したらどう反映しますか？

Gen 1ではStudioのSync from Figmaで再同期し、ローカルでamplify pullを実行するとsrc/ui-componentsが更新されます。Gen 2のプラグインでは、変更したレイヤーのコードを出し直して差し替えます。

生成されたコンポーネントのコードは直接編集してもよいですか？

Gen 1では編集しないでください。次のamplify pullで上書きされます。見た目の調整はoverrides、一覧の行ごとの調整はoverrideItemsで行い、どうしても手で直す部品だけ別フォルダへ複製して同期から外します。

Next.jsのApp Routerで使えますか？

公式ドキュメントは、UI Builderで作ったコンポーネントがReact Server ComponentsとNext.jsのApp Routerに非対応だと明記しています。App Routerが前提の案件では、Code ConnectやFigma MCPなど別の経路を検討してください。

関連記事

• AWS Amplifyとは？Gen 2のバックエンド定義と料金・採用判断を実装者目線で解説
• AWS Amplify Gen 2の使い方：ampxで初期化からCI/CDまで【2026年版】
• FigmaをReactに変換する4つの方法｜HTML書き出しの可否とLocofy・Figma Make・MCPの使い分け
• Figma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】
• Remix SPAモードとAWS Amplify Gen 2の構成手順｜Gen 1コードの置き換えとHosting設定