Figma React Bifrost
FigmaからReactに高精度で自動コード変換してくれる2つのツール+αをご紹介します。
目次:
- デザインからReactをノーコードで生成できる類似のサービス”Quest.AI”と”Locofy.ai”
- Quest.AI
- Locofy.ai
- +α: ローコード・ノーコードでFigmaデザインからサービス・アプリをリリース
- ローコードでFigmaから一気通貫フロントエンド開発”AWS Amplify STUDIO”
- コード出力が不要でモバイルアプリをリリースするなら、ノーコードビルダー”Bravo Studio”も
- FigmaからReactに高精度で自動コード変換してくれるツール”Bifrost”（サービス終了）
デザインから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で生成されるコードもReact製となります。
Reactに馴染みの薄い方でも、ほぼコードを書くことなくReactコンポーネントを生成することが可能になっています。
- ほぼコードを書くことなく Figma からレスポンシブな React コンポーネントを生成する | Amazon Web Services ブログ
- Reactが書けないデザイナーがAWS Amplify StudioとFigmaを使ってReactコンポーネントコード生成｜Haru｜note
- AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現 | Amazon Web Services ブログ
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.
aws.amazon.com
コード出力が不要でモバイルアプリをリリースするなら、ノーコードビルダー”Bravo Studio”も
Reactによるコード出力すら不要、プロトタイプ的に試したい・リリースさせたい場合には Bravo Studio も選択肢に入るのではないでしょうか。
No code app builder | Bravo Studio
Your no-code mobile app builder for iOS and Android. Create MVP’s, validate ideas and publish on App Store and Google Play Store.
www.bravostudio.app
Bravo Studioは、FigmaまたはXDによるデザインファイルを連携させ取り込むことで、簡単に実際のモバイルアプリとして公開させることができるツール。
有料プランに加入することで、ネイティブアプリとしてiOS / Androidストアにも公開させることが可能です。
また、2023年6月、Bravo StudioはFigmaでの変更を同期して反映させる”Bravorizer”というFigmaプラグインを公開しました！🎉
Figmaでのデザイン変更を自動的にモバイルアプリへ反映！Bravorizerで高速プロトタイピング
このプラグインによってよりスムーズに構築・公開が行えるようになるはずです。
さらなるBravo Studioの詳細や他ノーコードツールについては 新進気鋭！日本ではマイナーな海外ノーコードツール集 の記事もあわせてご確認ください。
FigmaからReactに高精度で自動コード変換してくれるツール”Bifrost”（サービス終了）
2023/10/22追記: Bifrostはサービス終了したようです。
（上ツイートの著者訳）
AIを使ってFigmaからきれいなReactコードに自動変換するツール、”Bifrost”をご紹介。
Biforestは下記のことを可能にします。
- Figma上のあらゆるものに対して、利用可能なコードを生成します。
- コードを直接コードエディタにドロップ可能。
- あなたのコードの書きぶりを学習して、 類似の構造となるようなコードを出力します。
Bifrostは現在はα版。フォームに必要事項を記入し、Waitlistで待つ必要があります。
興味のある方はBifrostサイトから早めに応募してみましょう。
2023/10/22追記: Bifrostはサービス終了したようです。
この記事の気になった箇所を読み返す:
- デザインからReactをノーコードで生成できる類似のサービス”Quest.AI”と”Locofy.ai”
- Quest.AI
- Locofy.ai
- +α: ローコード・ノーコードでFigmaデザインからサービス・アプリをリリース
- ローコードでFigmaから一気通貫フロントエンド開発”AWS Amplify STUDIO”
- コード出力が不要でモバイルアプリをリリースするなら、ノーコードビルダー”Bravo Studio”も
- FigmaからReactに高精度で自動コード変換してくれるツール”Bifrost”（サービス終了）
Category: No-Code | ノーコード
Tags: No-Code | Figma | AI・機械学習 | SaaS | AWS
