もう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には、まだまださまざまな機能が存在するため、ぜひ試してみてください。
また、もし間違えていることや追加コメントがあれば、教えてください！