FigmaからReactを自動変換出力。2つのAIノーコードツール+α

デザインからReactをノーコードで生成できる類似のサービス”Quest.AI”と”Locofy.ai”

Quest.AI

デザインからReactをノーコードで出力してくれる類似のサービスとして、コーディング・実装不要！Figma・XDを瞬時にWebサイト化するノーコードツール"Quest.AI" でご紹介した Quest.AIがあります。

Quest.AIは以前はFigmaからWebサイト化するノーコードツールでしたが、現在ではピボットしてFigmaデザインからReactなどのフロント用コードを出力するノーコードツールとなっています。

The better way to build your front end | Quest

Generate React components from your Figma design and export clean code that is extendable. Material UI support built-in.

www.quest.ai

Locofy.ai

他にも、Locofy.ai というサービスがあります。 Figma, XD, SketchのデザインをモバイルおよびWebのフロント用コードとして出力させることが可能です。

Locofy.ai - ship your products 5-10x faster — with low code

Turn your designs into production-ready frontend code for mobile apps and web. Ship products 5-10x faster with your existing design tools, tech stacks & workflows.

www.locofy.ai

Locofy.ai はReact, React Nativeのみならず、さまざまなサービスと連携させることを想定しているようです。

+α: ローコード・ノーコードでFigmaデザインからサービス・アプリをリリース

ローコードでFigmaから一気通貫フロントエンド開発”AWS Amplify STUDIO”

類似のサービスとして「ローコード」ではありますが、FigmaのデザインからReactまでAWS内を一気通貫でフロントエンド開発できるAWS Amplifyが正式リリースされ、一時期話題になりました。

AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成－ Publickey

AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成

Amazon Web Services（AWS）は、Webアプリケーションを最小限のコーディングで開発できる、いわゆるローコード開発ツール「Amplify Studio」の正式リリースを発表しました。 Announcing AWS Ampl...

www.publickey1.jp

AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成

このAWS Amplifyで生成されるコードもReact製となります。

Reactに馴染みの薄い方でも、ほぼコードを書くことなくReactコンポーネントを生成することが可能になっています。

AWS Amplify STUDIOの利用はこちらから。

AWS Amplify Studio | Visually Build Extensible, Full-Stack Apps Fast

Extend AWS Amplify with a visual development environment for creating full-stack apps with minimal coding AWS Amplify Studio is a visual development environment that lets developers easily build and ship complete web and mobile apps in hours instead of weeks.