AWS Amplify Studioでレスポンシブデザインを実現したいと依頼され、調査を行いました。
Figmaのデザイン作成に加え、ブレークポイントを設定することで、レスポンシブなコンポーネントを作成する方法がわかりました。
以下では、Amplify Studioを使用してレスポンシブコンポーネントを作成する方法について説明します。公式マニュアルが英語で提供されていたため、内容を基に日本語で解説します。
1. ブレークポイントを設定
Amplify Studioで生成されたコンポーネントにブレークポイントを適用するには、まずFigmaの「AWS Amplify Theme Editor」プラグインを使用します。このプラグインを使って、デフォルトのブレークポイントをカスタマイズすることができます。
2. Figmaでバリアントを作成
コンポーネントがレスポンシブになるよう、各ブレークポイントに応じたバリアントを作成します。バリアントは、ブレークポイントごとに異なるサイズやレイアウトを持つことができますが、コンポーネント内の要素は同じ構造とレイアウト方法を維持する必要があります。
3. コンポーネントをレンダリングしてテスト
Figmaで作成したデザインをAmplify Studio UI Builderにインポートした後、ウィンドウをリサイズして、コンポーネントが設定したブレークポイントに応じて自動的に変更されるかをテストします。
高度な設定
もしコンポーネントに複数のプロパティ（例えば、ブレークポイントと表示モード）がある場合は、追加の設定が必要です。すべてのプロパティにはインライン値を設定する必要があります。また、複数のバリアントを持つコンポーネントは、条件付きでレンダリングする方法を選択することも可能です。この場合、コンポーネントを分割し、特定の条件に基づいて表示を切り替えることができます。
