Figma React Bifrost
FigmaからReactに高精度で自動コード変換してくれる2つのツール+αをご紹介します。
目次:
![image](https://assets.super.so/27c327a7-2fe3-40d8-a16c-c5ab86cce759/images/e2c6e0c8-5095-456e-bf45-7e40ba3eb409.jpg)
デザインからReactをノーコードで生成できる類似のサービス”Quest.AI”と”Locofy.ai”
Quest.AI
デザインからReactをノーコードで出力してくれる類似のサービスとして、 コーディング・実装不要!Figma・XDを瞬時にWebサイト化するノーコードツール"Quest.AI" でご紹介した Quest.AIがあります。
Quest.AIは以前はFigmaからWebサイト化するノーコードツールでしたが、現在ではピボットしてFigmaデザインからReactなどのフロント用コードを出力するノーコードツールとなっています。
Locofy.ai
他にも、Locofy.ai というサービスがあります。 Figma, XD, SketchのデザインをモバイルおよびWebのフロント用コードとして出力させることが可能です。
Locofy.ai はReact, React Nativeのみならず、さまざまなサービスと連携させることを想定しているようです。
+α: ローコード・ノーコードでFigmaデザインからサービス・アプリをリリース
ローコードでFigmaから一気通貫フロントエンド開発”AWS Amplify STUDIO”
類似のサービスとして「ローコード」ではありますが、FigmaのデザインからReactまでAWS内を一気通貫でフロントエンド開発できるAWS Amplifyが正式リリースされ、一時期話題になりました。
AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成 - Publickey
この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の利用はこちらから。
コード出力が不要でモバイルアプリをリリースするなら、ノーコードビルダー”Bravo Studio”も
Reactによるコード出力すら不要、プロトタイプ的に試したい・リリースさせたい場合には Bravo Studio も選択肢に入るのではないでしょうか。
Bravo Studioは、FigmaまたはXDによるデザインファイルを連携させ取り込むことで、簡単に実際のモバイルアプリとして公開させることができるツール。
また、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はサービス終了したようです。
この記事の気になった箇所を読み返す:
Category: No-Code | ノーコード
Tags: No-Code | Figma | AI・機械学習 | SaaS | AWS
![ユーザー同士でのDM・グループチャット機能をノーコードツールで実装する方法](/_next/image?url=https%3A%2F%2Fassets.super.so%2F27c327a7-2fe3-40d8-a16c-c5ab86cce759%2Fimages%2F795b2398-5a1a-4bec-8154-921434d28c88.jpg&w=1920&q=90)
![Figmaでのデザイン変更を自動的にモバイルアプリへ反映!Bravorizerで高速プロトタイピング](/_next/image?url=https%3A%2F%2Fassets.super.so%2F27c327a7-2fe3-40d8-a16c-c5ab86cce759%2Fimages%2F2c45ce84-e525-4628-b760-b9a34b06dacc.jpg&w=1920&q=90)