静的なデザインがレスポンシブなアプリになる
FigmaファイルをAngular、Blazor、Web Components (近日中にReact予定) でクリーンかつ使用可能なコードに変換します。ブランディングとスタイル設定はワンクリックで行えます。これはFigmaを HTML にエクスポートする最も簡単な方法です。
WYSIWYG ビジュアル IDE、汎用性と使いやすさ
Figmaからコードへの移行はほんの数分で完了します。デザイナーは使い慣れたワークフローを使用してデザインを作成し続けることができ、開発者は列と行のレイアウトを処理し、インタラクティブ性を追加し、本番環境に対応したコードを生成してプレビューするなど、さまざまな作業を行うことができます。
便利な設計からコードまでのプロセス
App Builder UI キット (Indigo.Design など) によってサポートされており、真の UX デザイン開発コラボレーションのためにデザイン開発プロセスをさらに再定義します。時間効率とコスト効率に優れたアプリ開発サイクルを実現します。
60以上のリアルUIコンポーネント
現代のユーザーの期待に応えます。優れた UI と UX を構築できる、堅牢なUI コンポーネント、パターン、スタイル、カスタマイズのセットを使用します。最速のデータ グリッドとチャート、ドック マネージャーなどが含まれます。
インスピレーションは今日から始まります
Figmaから HTML へのワークフローを試す最も早い方法は、サンプル ファイルをダウンロードすることです。ボタンの追加からカスタマイズまで、その実行方法を正確に確認し、優れた実践例から学びましょう。
どうやって
Figmaデザインを HTML に変換
Figmaでデザインやサンプルを開く
プラグインウィンドウでアプリの作成ボタンをクリックします
appbuilder.indigo.designリンクをクリックして、App Builderでアプリを表示します。
クラウドIDEでデザインを確認するか、その上にコードビュースイッチをクリックして生成されたコードを検査します。
HTMLコードをzipファイルとしてダウンロードするか、GitHubに公開します。
概要ビデオをご覧いただくか、このステップバイステップのガイドに従ってください。
あなたのブランドに合ったテーマ！
ダーク バージョンとライト バージョンの両方で 4 つの異なるテーマが用意されており、あらゆるブランディング要件を満たすことができます。付属のテーマを使用するか、いずれかのテーマをベースとして実装し、完璧なアプリ エクスペリエンスを実現するためにカスタマイズします。
マテリアルデザイン、Bootstrap、Fluent、Indigo.Design
よくある質問
Figmaから HTML コードへの変換とは、Figmaデザイン ファイルからレスポンシブ HTML CSS コードとライブで完全に機能するアプリを生成するプロセスを指します。WYSIWYG ローコードApp Builderを使用すると、この処理がこれまで以上に簡単かつ高速になります。
新しいアプリケーションを構築するときにFigmaからコードへのプラットフォームを使用すると、従来の手動コーディングに比べてさまざまな利点が得られます。利点は次のとおりです。
- 手動のHTML変換プロセスは不要
- App Builderツールボックスから実際の UI コンポーネントのツールボックスを使用する機能
- フレームワークに依存しないアプリ開発アプローチにより、ユーザーはAngular、Blazor、Web Components（まもなくReactにも対応）など、任意のプラットフォーム用のコードを生成できます。
- ターゲットフレームワーク間のコンポーネントと機能の同一性
- デザイナーと開発者の引き継ぎは不要
- アプリのプレビューを簡単に公開したり、GitHub リポジトリにアップロードしたり、アプリを zip ファイルとしてダウンロードしたりできます。
- データバインディングをより効率的に処理する
- 複数のタイプのビュー レイアウト、ビュー間のナビゲーション/構造を使用します。
- すべてがドラッグ アンド ドロップで実行され、真の WYSIWYG 開発エクスペリエンスを実現します。
- チーム間のコラボレーションを促進する唯一の情報源として機能します
- 完全なデザインシステムを統合 - Indigo.Design
はい、デザインから HTML の結果が得られますが、それだけでなく、Angular、Blazor、Web Components、そしてまもなくReactなど、必要なプラットフォーム向けに生成された、完全に機能する豊富な機能を備えたアプリも得られます。さらに、プロジェクトに必要なさまざまな画面、メニュー、その他の機能やカスタマイズを追加することもできます。
Figma用のApp Builderいくつかの一般的なプラットフォームをサポートしています。これには、Angular、Blazor、Web Componentsが含まれますが、まもなく、Figmaデザイン ファイルからReact用のクリーンな本番環境対応コードを生成できるようになります。
はい。App App Builderデザインを完成したコード化されたアプリケーションに変換します。必要に応じて、デザイン要素をボタン、入力、選択などの HTML 要素に変換し、要素を視覚的に編集したり、グループ化したり、手動で整理したりできます。
はい、ローコードApp Builderで生成されたBlazorコードを既存のBlazorプロジェクトに統合できます。生成されたコードをコピーして既存のプロジェクト ファイルに直接貼り付け、必要に応じて調整し、さらにカスタマイズできます。バグを回避するために、生成されたコードを必ず検査して確認してください。
アプリの背後にあるコードは使用可能でデバッグも容易であり、他のローコード ツールが通常生成するスパゲッティ コードとはまったく関係ありません。設計されたものはすべて、生成されたアプリで確認できます。
FigmaのApp Builderには、簡単にドラッグ アンド ドロップできる再利用可能な UI コンポーネントのツールボックスが用意されています。これには、テキスト、ボタン、カード、入力フィールド、ナビゲーション バー、スライダー、タブなどが含まれます。ユーザーが期待する機能を備えた高機能アプリケーションを構築するために必要なものがすべて揃っています。
レスポンシブな動作のアプリを構築できる Flex Responsive デザインを利用できます。App App Builder使用すると、要素のサイズを決定し、Flex レイアウトに配置できます。ここでの配置は、さまざまなヒューリスティックと戦略によって実現されます。これにより、デザインを開発者が作成したものにできるだけ近いアプリに変換できます。
