AWS Amplify StudioとFigmaを使ってReactコンポーネントを作成する方法

株式会社トラスト、新入社員 M.I です。

今回はAWS Amplify StudioとFigmaを使ってReactコンポーネントを作成する方法をご紹介します。

（※ 環境構築については省略します🙇）

この記事で扱う内容は以下の通りです。

目次

１．AWS Amplify Studioとは
２．Figmaとは
３．コンポーネント作成手順
４．Figmaでデザインする
５．Amplify StudioとFigmaを連携させる
６．自分のReactフォルダに取り込む
７．まとめ

１．AWS Amplify Studioとは

AWS Amplifyに含まれているサービスの１つ。

従来のプログラミング言語によるコーディング作業を最小限に抑えたうえで、アプリケーション・システム開発を可能にするツールです。

ユーザーインターフェース（UI）の作成のみならず、それをバックエンドに接続する機能もあります。

２．Figmaとは

クラウドベースのデザインツールです。

主にウェブデザインやUIを考案する目的で広く使用されています。

クラウドベースですので、アカウントとPCさえあれば、場所を問わずどこからでも作業を行うことができます。また、複数のユーザーによるリアルタイムでの共同作業も可能です。

そんな便利なFigmaですが、お値段なんと（基本）無料！

気軽に始められますね。

３．コンポーネント作成手順

大まかな手順は以下の通りです。

① Figmaでデザインする

② Amplify StudioでFigmaを連携させる

③ 自分のReactフォルダに取り込む

順番に解説していきます。

４．Figmaでデザインする

最初にFigmaを使って、コンポーネントを作成します。

今回は例として「TODOリスト」を作成しました。（作成時間２分）

手順を紹介することが目的なので、皆さんはお好きなものを作成してください。

デザインが完成したら次はコンポーネント化を行います。

親要素に対して右クリックを行い、コンポーネントの作成を選択します。

下のように文字が紫色になればOKです。

最後に右上にある共有を押し、リンクのコピーをしておきます。

Figmaでやることはこれで終わりです。

５．Amplify StudioでFigmaを連携させる

次にAmplify Studioの画面に移ります。

まず、左の一覧から UI Library をクリック

次に UI Library settings をクリック

ここで先ほどFigmaでコピーしたリンクを張り付け、保存します。

これでFigmaと連携させる準備が整いました。

いよいよコンポーネントを引っ張ってきます。

Sync with Figma をクリック

Accept all をクリック

これでコンポーネント欄に自分がFigmaで作ったものが追加されました。

最後に Copy code をクリックし、コンポーネントのコードをコピーしておきます。

Amplify Studioでやることは以上です。

６．自分のReactフォルダに取り込む

最後の工程です。

vs codeで自分が作業しているReactフォルダを開きます。

次にターミナルを開き、 amplify pull を実行します。

実行後、ui-componentsが自動生成されたことが確認できます。

次にコードを書いていきます。

書くといっても先ほどAmplify Studioでコピーしたものをペーストするだけです。

形を整えると以下のようになります。

これですべての工程が完了しました。

最後に実際の画面を確認します。

７．まとめ

今回はAWS Amplify StudioとFigmaを使用することで、視覚的なデザインから実際のフロントエンドコンポーネントを簡単に構築する方法をご紹介しました。
私のような駆け出しエンジニアにとっては、難しいプログラミングを省略して直感的にアプリ開発ができるのは大変うれしいです。この技術を用いることによって、効率的且つ迅速なアプリケーション開発が今後ますます加速していくと考えます！
最後に、トラストではデジタルソリューションの設計と開発をサポートしております。
AIやIoTシステムの導入についても、ぜひお気軽にお問い合わせください。