もうHTML/CSSは書きたくない

「もうHTML/CSSは書きたくない」とちょっとタイトルで釣りましたが、最後まで読んでくれると嬉しいです！
結論から言うと、Amplify StudioとFigmaを連携させて、Reactのコンポーネントを作成すると言う記事です。
StudioとFigmaを連携させる機能は、2021年の12月に発表されました。
最小限のプログラミングでFigmaからフルスタックのReactアプリを実現
実際に、インターンシップで触れる機会があったので、触れた感想や結果を書きたいと思います。

先に感想を

Amplify StudioとFigmaを連携させる方法は、僕以外の人も書いているので、僕の感想を先に書きます。
感想だけでいいと言う方は、ここで離脱しても大丈夫です！

僕のプロフィール

エンジニアインターンとして5ヶ月経ち、インターンではReactとAWSを使って開発中。
クラウドプラクティショナー取得済み。

実際にやってみた感想

・ Figmaを完璧に使えこなせていないと厳しい
Figmaの方で雑にデザインを作っていると、いざReactでUIコンポーネントとして利用したときに、ずれが起きたり、画面サイズが変わったときにデザインが崩れたりします。また、**Amplify Studioでコンポーネントとして出力させるとこうなるんだ！**ということもわかっておくと、進めやすいと思います。
・ 全部のコンポーネントを置き換える必要は特にない
一応プレビューの段階のため、できないこともあるようです。また、すでにコンポーネントがあるなら、わざわざ置き換えるメリットはないと思います。そのため、新しい比較的小さいコンポーネントを作成する際に少し使ってみるとかはありかもです。
・ Amplify Studioの操作が難しい
これについては、慣れろよとしか言いようがないのですが、DynamoDBからデータを引っ張ってこれたり、型定義ができたりします。AWSの機能は大体そうですが、慣れないと複雑だなーと感じることがあります。

先にFigmaのリンクを取得する

以下Figmaの画面の右上にある、青いShareボタンを押すと、モーダルが出てきます。
そのモーダルの左下にあるCopy Linkを押して、Figmaのリンクを取得します。
以下の画像はサンプルのため、デザインを作成していません

Amplify Studioにログインする

ここから先は、GraphQL APIバックエンドとReactフロントエンドを持つ、サンプルReactアプリケーションをデプロイしていることを前提に、書き進めていきます。
Amplifyがわからない方は、Amplify SNS Workshopを参考にしてください。
まずはマネジメントコンソールにログインして、Amplifyコンソールにある作成したアプリケーションを開きます。
その後、左のメニューのアプリの設定から、Amplify Studio Settings(設定)を選択します。
すると、以下の画面が出てくるので、Enable Amplify Studioをオンにして、右側にあるInvite usersを押します。
そこで、自分のメールアドレスを打ち、届いたメールに書かれているUDとパスワードで、Amplify Studioにログインします。

Amplify StudioとFigmaを連携させる

ログインして、以下のような画面が開ければ、右のメニューにあるUI Libraryを押します。
その後、画面が変わり、真ん中にGet startedがあるので、押します。
すると、上で取得したリンクを記入する欄があるので、そこにペーストして、Continueを押します。
これで連携が完了です。

ReactのUIコンポーネントとして使えるようにする。

Figmaと連携して、右上のFigmaのマークの隣にあるSync with Figmaのボタンを押すと、Figmaで作成したコンポーネントが出てきます。
そこで、以下の画像の前に、RejectもしくはAcceptボタンが出てくるので、必要なコンポーネントのみAcceptします。
そうすると、以下の画像のようになります。
そして、この画像の右少し上にあるConfigureボタンを押すと、画面が少し変わり、下の方に**> Get component code**ボタンが出てきます。
それを押すと、ReactのUIコンポーネントとして使えるようにする方法が出てきます。
詳しくは進めるとわかるので、ここではざっとだけ説明すると、amplify pullして、jsxファイルが作成されるため、それを別のファイルからインポートして利用します。

まとめ

ここでは、最短でFigmaからReactのコンポーネントを作成する方法を書きました。
Amplify Studioには、まだまださまざまな機能が存在するため、ぜひ試してみてください。
また、もし間違えていることや追加コメントがあれば、教えてください！