先日こちらの記事でローコード(LowCode)とノーコード(NoCode)ツールについて紹介しました。

記事のローコードツールの紹介の中でAWS Amplify Studioに触れましたが、実際に触ってみたので、その感想を共有します。

望んでいた動きとしては、Figmaで作成したデザインがそのまま再現される!です。
というのも、先日お話した「マークアップ誰やるの問題」という組織的な課題の解消に加えて、
一人のエンジニアが覚えること(=HTML + CSS)を減らせるのではないか?という仮説のもと使ってみました。
(自分もHTML + CSSが得意ではないので淡い期待を抱きながら...。)

結果的には当初望んでいた期待通りの動きではありませんでした。
具体的には以下の点が気になりました。

  1. Figma上のComponentしかインポートされない
  2. インポートされたComponentが完全に再現されない(何かしらデザインが崩れている)
  3. 生成されるコードについて、CSSが全てインラインで記述される

2に関しては、原因がFigmaでのコンポーネントの作り方が問題なのか、Amplify Studioが問題なのかが気になるところです。
(フォント読み込み、シェイプがうまく書き出せないなど問題がありました。Figmaからの書き出しは問題なかったことは確認済み)
また、AWS Amplify Studioのドキュメントを読み込んだわけではなく、AWSブログのチュートリアル記事を読んで試しただけなので、やりようはあるのかもしれません。
https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/

Figmaで作ったデザインがそのまま再現!という訳にはいきませんでしたが、以下は強烈なメリットだと感じました。

  • Figmaを更新をしたらAmplify Studio上でのインポートが楽(ボタン一つで同期)
  • (もし問題なく使いこなせた場合)デザイナーとエンジニアのやりとりが非常にスムーズになると感じた(ワークフローに組み込めるのでは)

現時点は先に述べた課題があるので、今のまま適用するのは中々厳しい物があるといった印象を受けました。
しかし、AWS Amplify Studioはプレビュー版なので、精度は機能はこれから向上していくと思うので、注目していきたいサービスの一つだと思います。