🍇
Figma + AWS Amplify Studio + ReactでCRUDなアプリを作ってみる① ~概要編~
こんにちは、ロンです。
2022/4/21にAWS Amplify Studioの一般提供が開始されました。
何ができる?
ざっくり言うと、デザインのプロトタイピングから自動でReactのコンポーネントを出力できます。
イベントハンドラーや変数のバインディングもGUI上でおこなえます。
また、DBやAPIなどバックエンドも自動で作れちゃいます。(凄い...)
つまり、デザイナーの方が簡単にWebアプリのプロトタイプを作れてしまいます。(エンジニアはお役御免?)
とはいえ、まだノーコードではなくローコード、という感じなので、実際はデザイナーとエンジニアの架け橋的な存在になるのでは、と期待しています。
本記事の概要
Figmaのテンプレートを使って、CRUDなWebアプリケーションを作ってみようと思います。
ページ遷移も実装してみようと思います。
Figmaのテンプレート
大まかな手順
- 環境構築
- Figmaのインポート
- データ構造の設計
- テストデータの準備
- Figmaコンポーネントと変数(テストデータ)の連携
- Reactコンポーネントの出力(Amplify pull)
- Reactコーディング
事前準備
以下については、事前に準備お願いします。
- AWSのアカウント作成(IAMからアクセスキー、シークレットアクセスキーも作っておく)
- Reactの環境準備
- Node.jsのインストール
- パッケージマネージャーyarnのインストール
- creat-react-appのインストール (yarn global add create-react-app)
- Gitのアカウント作成 (必須ではないです。)
というわけで、次回から実際に作業していこうと思います。↓
Discussion