Figma-to-React
Amplify UI FigmaファイルとAmplify UI Builderプラグインを使用してReactコードを生成できます。
ステップ1: Amplify UI Figmaファイルを複製する
このファイルには、以下のページが含まれています:
- README: READMEページでは、Figmaファイルを使用して新しいコンポーネント、テーマプリミティブを作成し、レイアウトとスタイルをカスタマイズする方法について説明しています。
- Theme: テーマページには、Amplify UIがプリミティブをスタイルするために使用するテーマ値とデザイントークンが表示されます。プリミティブをテーマ化する場合は、AWS Amplify UI Builder Figmaプラグインを使用してテーマに変更を加えます。テーマページ自体に加えた変更は、生成されたコードには反映されません。
- Primitives: プリミティブは、アラート、ボタン、バッジなどのビルディングブロックコンポーネントです。これらのプリミティブは、Amplify UIプリミティブに対応し、すべてのプリミティブプロパティを含むコードにエクスポートされます。このページは読み取り専用です。このページのプリミティブに加えた変更は、生成されるコードには反映されません。
- My components: このページには、プリミティブを使用して構築されたすべてのカスタムコンポーネントが含まれています。Amplifyは、ニュースフィード、ソーシャルメディア、マーケティングヒーローコンポーネントなど、数十のコンポーネントを提供して、すぐに開始できるようにしています。これらをニーズに合わせてカスタマイズするか、独自のコンポーネントを構築します。
- Examples: これはデモンストレーション専用で、設計者が当社のコンポーネントを使用してページ全体を構築する方法を示しています。
コード品質を最適化するためにコンポーネントを作成する方法を学ぶには、FigmaファイルのREADMEに従ってください。
ステップ2: Amplify UI Builder Figmaプラグインを実行する
Figmaファイルを複製した後、Amplify UI Builder Figmaプラグインを開発モードまたは非開発モードで実行して、Amplify UI Reactコードを生成します。
開発モード
- Figmaファイルで開発モードをオンにします。
- Pluginsタブをクリックします。
- AWS Amplify UI Builderプラグインを選択します。
- ファイル内の任意のレイヤーを選択してReactコードを取得し、生成されたコードのライブプレビューを表示します。
非開発モード
- Pluginsタブをクリックします。
- AWS Amplify UI Builderプラグインを選択します。
- Download component codeを選択して、コンポーネントのReactコードをダウンロードします。