ほぼコードを書くことなく Figma からレスポンシブな React コンポーネントを生成する

Amplify Studio が、Figma のコード化を通じて、レスポンシブコンポーネントのデザインを大幅に強化しました。バリアントを作成してブレークポイントをカスタマイズするだけで実現可能です。Amplify Studio は、あなたのレスポンシブデザインが組み込まれた React コンポーネントを生成することで、面倒な作業を人の代わりに行います。

どのように動作するか

最新のアプリケーション設計では、開発者はさまざまな画面サイズに合わせてアプリケーションを設計する必要があります。これは多くの場合、React コンポーネントの複数のバージョンを作成し、画面サイズに基づいてレンダリングするようにトリガーすることを意味します。

Amplify の Figma 用テーマエディタープラグインを使用すると、デザイナーや開発者は Figma バリアントを活用し、これらのバリアントをブレークポイント値にバインドできます。次に、Amplify Studio は、バリアントとブレークポイントを適用したコンポーネントを自動的に生成します。追加のコードなしで、単一のコンポーネントで自動的に画面サイズに適応します。

ブレークポイントをカスタマイズする

Figma 用の AWS Amplify テーマエディタープラグインを使用して、Figma プロジェクト全体のブレークポイントをカスタマイズできるようになりました。Amplify Theme Editor をこれまでに使用したことがない場合は、このツールに関するドキュメントを読んでください。色から間隔まで、プロジェクト全体のデザインを制御する強力な方法です。

ブレークポイントをカスタマイズするには

Figma プロジェクト内で右クリックし、“プラグイン” > “AWS Amplify Theme Editor” を選択する
“Breakpoints” タブを選択する
ブレークポイントをクリックして、ピクセル数を編集する

ブレークポイントを使ってバリアントをビルドする

この機能を使用するには、バリアントの設定された Figma コンポーネントが必要です。これまでに Figma バリアントを使用したことがない場合は、Figma のドキュメントで詳細を読むことができます。次回のブログ記事では、レスポンシブコンポーネントの構築を最初から最後まで説明していきますので、どうぞお楽しみに！

コンポーネントの特定のバリアントにブレークポイントを適用することで、現在レンダリングされているコンポーネントをサイズやデザインの異なるコンポーネントと入れ替えるタイミングを Amplify に適用できます。これは、Figma バリアントプロパティの breakpoint に名前を付けることで実現されます。

バリアントを作成すると、新しいバリアントプロパティが自動的に生成されます。このバリアントプロパティをブレークポイントとして使用するには、次の手順を実行します。

プロパティ名を breakpoint に変更する – コンポーネント内の全てのバリアントに適用されます
breakpoint の値をそれぞれのコンポーネントに設定したい値に置き換えます

重要事項

breakpoint の値は、テーマエディターで予め定義されている値の中から設定する必要があります。また大文字と小文字は区別されます。定義済みの値は次の通りです。

base
small
medium
large
xl
xxl

Reactコンポーネントを同期・レンダリングする

新しく作成したレスポンシブコンポーネントを使うためには、Figma ファイルを Amplify と同期してから新しいコンポーネントを Pull する必要があります。このプロセスは Amplify Studio で Figma のコンポーネントをコード化するのと同じプロセスです。

まず、Figma ファイルを Amplify Studio 連携させるために下記の手順を踏みます。

AWS コンソールにログインする
Amplify のページに行き、Amplify Studio を起動する
サイドバーから UI Library タブを選択する
“Sync with Figma” ボタンをクリックする
- 注意: 一度も FigmaとAmplify Studio を同期したことが無い場合、初めて同期を行う場合の手順書に従ってください。
同期するコンポーネントを選択します

次に、コンポーネントとテーマをローカルのプロジェクト上でレンダリングします。

ローカル開発環境で amplify pull コマンドを実行して新しく生成した React コンポーネントとテーマをダウンロードする
このプロセスを初めて行う場合は、 import 文を記述して React アプリ内でコンポーネントをインポートします

コンポーネントには、すでにバリアントとブレークポイントが含まれています。画面サイズを調整すると、コンポーネントは自動的に調整されるはずです。

数回クリックするだけで、コードの記述もほとんど必要なく、アプリケーションにレスポンシブなコンポーネントが手に入ります。スロットの追加やネストされたコレクションの生成など、Amplify の他の機能を使って新しいコンポーネントを拡張することもでき、真に画期的な Web アプリケーション開発体験を実現できます。

もっと詳しく知りたいですか？次の投稿では、コンポーネントのバリアントを最初から最後まで構築する方法と、それを実際の設計に適用する方法について説明します。ぜひ Twitter でアイデアやフィードバックを共有して、Discord のコミュニティ会話に参加してください！

この記事はNEW: Build responsive Figma-to-React components with almost no codeを翻訳したものです。翻訳はソリューションアーキテクトの高柴元が担当致しました。

Amazon Web Services ブログ