☁️くもをもくもくまなぶ

特別編 Amplify Studio ハンズオン (2022/03/26 13:15〜)

今回の特別編はAWS Amplify Studio + Figma です。 FigmaでデザインしたコンポーネントをベースにデータをマッピングしたReactを自動で吐き出すことができます。 今回は2月18日に行われました以下のイベントのシナリオをもとに Figamの操作も併せて行っていただけるシナリオにすべく関係者一同検証中です。 同日の講師は以下のお二人にお願いいたします。 松田 康宏 ) JAWS-UG 金沢支部オーガナイザー イースト株式会社所属。石川県在住。 2020年まで金沢市内の印刷会社でインフラエンジニアとして、AWSを利用したインフラの概念実証を実施…

https://awsbasics.connpass.com

私自身はデザイン界隈を詳しくないのですが、
Figmaについて調べるとよくAdobe XDに関する記事が出てきます。
このあたりはデザイナーさんのスキル、好みになるのかなと思います。

• Figma
  • Pricing
• Adobe XD
  • Plan on endless creativity.

• AWS Amplifyの本日実施環境
  • Node.js v16で一部WARNINGが表示されるため、本日（2022-03-26）イベントではNode.js v14で実施
  • Cloud9は正式にサポートはしていないものの、様々な環境で実施されることを踏まえてCloud9で実施
• AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現

• Zenn.dev(Book) https://zenn.dev/shigeru_oda/books/521fa5a5a9c558c6275d

• エラーメッセージ例

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! amplify-homes@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the amplify-homes@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ec2-user/.npm/_logs/2022-03-26T05_03_07_321Z-debug.log
An error occurred during the publish operation: Unknown error occurred.

• 対応
  • npm i (npm installでワーキングディレクトリにあるpackage.json )
    • https://github.com/renebrandel/amplify-homes/blob/master/package.json
  • npm install -g @aws-amplify/cli で amplify cliの最新化

• 対応としては利用ブラウザのローカルストレージのクリア localStorage.clear()
  • Google Chrome

    

  • Microsoft Edge

    

  • Mozilla Firefox

    

フロントエンドが弱い私のようなエンジニアでも、
イメージさえ出てくれば、ReactのWebページを作成することができます。

また、Reactの設定についても自動で変換してくれるので、
モックを作成するだけでも立ち上げるのに、時間を要さない（30分〜1時間）で環境ができる体験も良いと思います。

また、私はそういった現場の経験はありませんが、
デザイナー（Figmaで見た目を作る人）とコーダー（デザインをコードに書き起こす人）、エンジニア（コードを取り込んで実装する人）という環境が合った場合に、
デザイナーからエンジニアに直接渡すことができるのでコミュニケーションコストも下がり、修正も容易になり、
体験としては向上するのではないかなと思いました。