UIの構築

Studioの新しいUIライブラリを使用すると、FigmaのコンポーネントをインポートしてReactコードにしてしまうことができます。Amplifyは、より迅速に開始するための便利なFigmaファイルも提供しています。Amplify FigmaファイルにはUIプリミティブとコンポーネントテンプレートの両方が含まれています。Figmaで独自のコンポーネントを作成することもできます！このチュートリアルでは、Amplify Studioを使用してホームリスティングアプリを作成します。

FigmaでUIコンポーネントを作成する

1. Amplify UI Figmaファイルをクローンする Amplify UI Figmaファイルは、アプリの出発点を提供します。一般的なUIプリミティブと事前に構築されたUIコンポーネントが含まれています。

2. UIプリミティブとテンプレートを探索する

プリミティブは、ボタン、テキストフィールド、バッジなど、ブランドに合わせた完全なアプリケーションを構築できる一般的なUIコンポーネントです。

テンプレートはプリミティブを活用するFigmaコンポーネントで、ヒーローカード、プロフィールカード、プロダクト詳細カードなど、UIをさらに強化します。

3. Figmaでカスタムコンポーネントを作成する

Figmaとコンポーネントを同期する

Amplify Studioで、「Figmaから同期」ボタンをクリックして、Figmaファイルのすべてのコンポーネントを確認します。

FigmaファイルのURLを貼り付けて、同期を開始します。Figmaから初めて同期する場合は、Amplify StudioにFigmaアカウントへのアクセスを許可する必要があります。

すべて受け入れるを選択するか、却下および受け入れボタンでコンポーネントを個別に確認します。

コードでコンポーネントを使用する

コンポーネントが同期されたら、コンポーネントを選択して設定を選択します。Reactコードを取得するには、コンポーネントコードを取得を選択します。

モーダルの指示に従ってください。アプリでUIコンポーネントをセットアップするのが初めての場合は、必ず最初に初期プロジェクト設定を完了して、すべての依存関係をインストールしてください。

次に、amplify pullを実行してすべてのコンポーネントをローカルコードベースに同期します。すべてのUIコンポーネントを含む新しいui-componentsフォルダが作成されます。

./ui-componentsから使用するUIコンポーネントをインポートして、Reactアプリでレンダリングします。例えば：

import { CardB } from './ui-components';

return (
  <div>
    <CardB />
  </div>
);

複数のUIコンポーネントを削除する

1. UIライブラリで、編集ボタンをクリックします。

2. 削除するUIコンポーネントを選択します。

3. 次に、選択したコンポーネントを削除をクリックして、選択したUIコンポーネントを削除します。