FigmaからReactに高精度で自動コード変換してくれるツール”Bifrost”を中心に、3つのツール+αをご紹介します。
目次:
FigmaからReactに高精度で自動コード変換してくれるツール”Bifrost”
（上ツイートの著者訳）
AIを使ってFigmaからきれいなReactコードに自動変換するツール、”Bifrost”をご紹介。
Biforestは下記のことを可能にします。
- Figma上のあらゆるものに対して、利用可能なコードを生成します。
- コードを直接コードエディタにドロップ可能。
- あなたのコードの書きぶりを学習して、 類似の構造となるようなコードを出力します。
Bifrostは現在はα版。フォームに必要事項を記入し、Waitlistで待つ必要があります。
興味のある方はBifrostサイトから早めに応募してみましょう。
デザインからReactをノーコードで生成できる類似のサービス”Quest.AI”と”Locofy.ai”
Quest.AI
デザインからReactをノーコードで出力してくれる類似のサービスとして、
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で生成されるコードも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プラグインを公開しました！🎉
このプラグインによってよりスムーズに構築・公開が行えるようになるはずです。
さらなるBravo Studioの詳細や他ノーコードツールについては
この記事の気になった箇所を読み返す:
Category:
