--- title: "AWS Amplify StudioとFigmaの連携手順｜Gen 1保守モード後の現状とGen 2のFigmaプラグイン" url: "https://www.issoh.co.jp/tech/details/5190/" published: 2025-02-05 updated: 2026-10-01 categories: ["AWS"] publisher: "株式会社一創" --- # 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](https://github.com/aws-amplify/amplify-cli/issues/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）](https://docs.amplify.aws/react/start/migrate-to-gen2/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のバックエンド定義と料金・採用判断を実装者目線で解説](/tech/details/15590/)にまとめています。 ### 新規アカウントで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のチュートリアルをなぞる進め方はできません。 | アカウントの状況 | Studio（Gen 1）での同期 | Gen 2のFigmaプラグイン | | ------------------ | ----------------- | ---------------- | | Gen 1アプリを運用中 | 使える（EOLまで） | 使える | | Amplify未使用の新規アカウント | amplify initで停止 | 使える | | 2027年5月1日以降 | EOL（サポート終了） | 使える | ## 既存の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); // 既存の描画処理内の を次のJSXに置き換える ``` `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」の文字色だけを変える ``` 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"; ``` ### overrideItemsによるコレクションの行単位のカスタマイズ 一覧（Collection）には`overrideItems`があり、`{ item, index }`を受け取る関数で行ごとの上書きを返せます。`isPaginated`や`itemsPerPage`のように、元のCollection部品が持つpropもそのまま渡せます。 ``` ({ 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での状態ごとにまとめます。 | Figmaでの状態 | Studioでの結果 | 対処 | | ------------------ | ------------------- | ----------------------- | | フレームのまま | 変換対象外 | コンポーネントとして登録 | | バリアント間で子要素が違う | 取り込めない | 構成を揃え、表示切替で出し分け | | hover・activeのバリアント | コードに出ない | overridesでclassNameを渡す | | 独自フォント | ui-componentsに含まれない | アプリ側でフォントを読み込む | | 固定位置で配置 | 実データで崩れやすい | Auto layoutとHug・Fillを使う | 文字が想定外の位置で折り返す、要素が切れるといった崩れは、制約（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 による切り替えが効く ``` ### Next.jsのApp Routerで使うときの制約 Gen 1ドキュメント[Figma-to-Code](https://docs.amplify.aws/gen1/react/build-ui/uibuilder/)の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コミュニティのプラグインページ](https://www.figma.com/community/plugin/1040722185526429545/aws-amplify-ui-builder)の公開情報では、最新版は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`）を得られるとしつつ、次の差を明記しています。 | 機能 | Gen 1（Studio） | Gen 2（Figmaプラグイン） | | ----------------- | ------------------------ | ----------------- | | テーマ調整・独自コンポーネント作成 | 対応 | 対応 | | 出力前のデータモデル接続 | 対応（データモデルが必要） | 非対応 | | プロジェクトへの取り込み | UI Builder（amplify pull） | プラグインから出力 | Studioでは、部品のプロパティにデータモデルの型を割り当て、子要素の`src`や`label`をフィールドにひも付けてから出力できました。Gen 2ではこの工程がなく、対応表の言葉では`Connect to Amplify Data as part of the engineering effort.`です。データ定義と取得コードの書き方は[AWS Amplify Gen 2の使い方：ampxで初期化からCI/CDまで【2026年版】](/tech/details/2842/)で扱っています。 ### フォームは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設定](/tech/details/2281/)が参考になります。 ### UI Builder系を選ばないほうがよい案件 既存のデザインシステムがAmplify UIのプリミティブで組まれていないなら、StudioもFigmaプラグインも選ぶべきではありません。どちらもAmplify UIキットのプリミティブに対応づいたレイヤーをコードにする前提で、Primitivesページを変えても生成コードに反映されない作りです。自社のコンポーネント体系に合わせたいなら、Amplify UIのプリミティブで作り直すことになり、変換の効率化という目的と逆行します。 | 案件の条件 | 向く経路 | | --------------------- | ----------------------------- | | Gen 1のStudio案件を保守中 | Studioの同期を継続し、EOLまでに移行 | | 新規でAmplify UIのデザインを使う | Amplify UI Builder Figmaプラグイン | | 独自のデザインシステムがある | Code Connect・Figma MCP | | Next.jsのApp Routerが前提 | UI Builder系以外を選ぶ | 自社のコンポーネントとFigmaの部品を対応づけるなら[Figma Code Connectの使い方｜UIとCLIの始め方とDev Mode表示・CLI v2移行](/column/details/3346/)、AIエージェントにFigmaのデザインを読ませてコードを書かせるなら[Figma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】](/tech/details/5892/)が入口です。変換手段を横並びで比べたい場合は[FigmaをReactに変換する4つの方法｜HTML書き出しの可否とLocofy・Figma Make・MCPの使い分け](/tech/details/2243/)を参照してください。 ## よくある質問 ### 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のバックエンド定義と料金・採用判断を実装者目線で解説](/tech/details/15590/) - [AWS Amplify Gen 2の使い方：ampxで初期化からCI/CDまで【2026年版】](/tech/details/2842/) - [FigmaをReactに変換する4つの方法｜HTML書き出しの可否とLocofy・Figma Make・MCPの使い分け](/tech/details/2243/) - [Figma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】](/tech/details/5892/) - [Remix SPAモードとAWS Amplify Gen 2の構成手順｜Gen 1コードの置き換えとHosting設定](/tech/details/2281/) --- 出典: [AWS Amplify StudioとFigmaの連携手順｜Gen 1保守モード後の現状とGen 2のFigmaプラグイン]()（株式会社一創）