Adobe XDデザインをHTMLコードに変換する方法は?
XDデザインファイルを本番環境に対応したコードに変換するのは、もはや面倒な作業ではありません。App Builderを使用してAdobeXDをHTMLに簡単に変換する方法を学びます。
Jason Beres
8min read
Adobe XDで新しいアプリデザインをゼロから作成し、それを完全なコード化された製品として制作可能な製品に仕上げる際の、これらの手順をご存じですか?
アイデア出しと実際のデザイン – ワイヤーフレーム>、デザイナーと開発者のハンドオフへの取り組み、ユーザー/ユーザビリティテスト>、利害関係者との変更の反復 – >、そして最後にコーディング
そして、そのプロセスは複数の人やチームに分かれており、多くのフェーズが関与しているため、複雑で時間がかかることがわかります。
幸いなことに、時は 2022 年で、この設計からコードへのプロセスを支援するApp Builderのような包括的な設計および開発アプリ アクセラレータがあります。
Adobe XDとは何ですか?
Adobe XDは、ワイヤーフレームやアプリをデザインするためのモダンで使いやすいツールをデザイナーに提供するためにゼロから作られたもので、今日の市場で最も人気のあるベクターグラフィックデザインプラットフォームの1つです。ワイヤーフレーム機能に加えて、設計者は忠実度の高いプロトタイプを作成し、設計プロセスを通じてチーム間で協力し、アニメーションを構成し、フィードバックを収集できます。
ソフトウェア開発チームやITチームと同様に、設計チームもこれまで以上に再利用性に依存して、持続可能でありながらダイナミックなツールのエコシステムを構築し、反復的なタスクの時間と労力を節約しています。Adobe XDは、ボタンやナビゲーションなどの高レベルのコンポーネントをUIキットの形で作成し、再利用可能なデザインを促進し、デザインプロセスを効率化することで、これらの目標をサポートします。
Adobe XDは何に最適ですか?
- インタラクティブなプロトタイプ、ワイヤーフレームをすばやく簡単に作成し、アニメーションを追加
- さまざまなデバイスタイプとサイズでプロトタイプを実行
- 再利用可能なデザイン要素とデザインシステムを作成する
- レイアウトのスワップ、スペース、サイズ変更、および整列機能
- ハンドオフの共有とフィードバックの収集
Adobe XDの欠点は何ですか?
- コード生成やコード出力は含まれません
- ユーザーテスト/ユーザースタディ機能はありません
- 限られたプラグインエコシステム
- プロトタイプやワイヤーフレームを公式デザインに転送することはできません
Adobe XDは、ワイヤーフレームとプロトタイプを作成するように設計されていますが、コード生成によってHTMLコード化された結果が得られるとは限りません。フロントエンドのプログラマーやデジタルソフトウェアチームは、必要なHTMLコードを作成する(または、役立つプラグインをオンラインで探す)必要があります。そうすれば、デザインが現実的になり、バックエンドで開発されたすべてのものに同期できるようになります。
Adobe XDファイルとは何ですか?
Adobe XDファイルは、画像アセット、カラー値、スタイルガイド、および一部のCSSを含む.zipファイルです。言い換えれば、それらには、追加のツールと自動化を使用して本番環境品質のHTMLコードに変換できるデザイン要素が含まれています。開発者の引き継ぎシナリオでは、開発者はデザインファイルを読み取るために、システムに Adobe XD がインストールされている必要があります。一方、デザインファイルをPNGまたはPDFに変換することは可能ですが、デザイン要素、レイヤー、およびアプリケーションフローは翻訳で失われます。
filext.comのように、XDファイルのコンテンツを表示するのに役立つツールやWebサイトがありますが、これはプロジェクトにさらに時間を追加し、製品の市場投入までの時間を短縮するだけです。
Adobe XD to Codeとはどういう意味ですか?
基本的に、Adobe XDからコードへとは、XDデザインファイルをコードに変換するプロセスを指します。Adobe XDを使用して新しいデジタル製品デザインを構築する目標は、実際の使用可能なコードを使用して、それを実用的なアプリケーションに変換できるようにすることです。通常、このプロセスには、コミュニケーション、コラボレーション、設計の改善、および手動のコード修正に多くの手順、人員、および時間が投資されます。
アートボードとビジュアルモックアップを作成する必要があります。 POCは、設計のアイデアと価値を関係者に明確に伝える必要があります。デザイナーと開発者の引き継ぎは、プログラマーにすべての仕様を提供し、プロトタイプをUIコードに再作成する前に後の段階で反復、サイロ化、誤解を排除するのに十分なほど広範かつ詳細である必要があります。また、ユーザーテストとユーザビリティテストを実施して、ユーザーがデザインとどのように対話するか、その目的が検証されているかどうか、特定のビジネスの価値を高めることができるかどうかを確認する必要があります。
App Builderのようなコード生成ツールが、Adobe XDファイルデザインを数日ではなく数分で本番環境に対応したコードに変換するお手伝いをします。
App Builderを使用してAdobeXDをHTMLコードに変換する方法は?
開始するには、いくつかの前提条件があります。
Adobe XDをインストールしたら、デザインからコーディングを可能にするIndigo.Design App Builderプラグインをインストールする必要があります。 これは、Creative Cloud アプリの Stock & Marketplace -> Plugins からアクセスでき、単にIndigo.Designを検索します。
Figure 1: Adobe Creative Cloud Plugins
Indigo.Design App Builderプラグインをインストールしたら、InfragisticsのUIキットに基づいたデザインが必要です。 デザインからコードへの働きかけがApp Builderでは、Adobe XDのデザインをUIキット(フル機能で拡張可能でカスタマイズ可能なUIコンポーネントとUIパターンのライブラリ)を使用して作成し、デザインフェーズを加速する必要があります。
https://www.infragistics.com/resources/sample-applications/angular-people-appこちらのサンプルのライブラリに移動し、People アプリの例の Adobe XD ファイルをダウンロードします。
Figure 2: People App Adobe XD files
ダウンロードしたら、AdobeXDでPeopleAppAdobeXDファイルを開きます。
Figure 3: People App Opened in Adobe XD
ここから、[プラグイン] -> Indigo.Designメニューから [新しいアプリの作成] オプションを選択します。
Figure 4: Create New App Menu Option
次に、ワークスペースを変更できる [新しいアプリの作成] ダイアログと、アプリ作成プロセスの他のいくつかのオプションが表示されます。
Figure 5: Create New App Dialog
このダイアログで「アプリを作成」をクリックすると、Adobe XDファイルがクラウドに送信され、そこで処理、解析、分析され、最終的にApp Builderの共通アプリモデルに変換されます。
図 6: People アプリのクラウドApp Builderへのデプロイの成功
成功ダイアログのリンクをクリックするか、「ワークスペースにアクセス」ボタンをクリックすると、直接App Builderに移動し、新しいアプリケーションが表示されます。
Figure 7: People App in you Workspace in App Builder
次に、Peopleアプリをクリックして、App Builderで編集します。
Figure 8: People App in App Builder
ここから、WYSIWYG デザイナーでコードのプレビュー、AngularコードまたはBlazorコードの生成、アプリの変更の開始を行うことができます。また、開発者がGitHubを愛していることを知っているため、App Builderでは、すべてのアプリケーションファイルをGitHubリポジトリにアップロードしたり、ローカルで実行できるパッケージとしてダウンロードしたりできます。
App Builderと他のローコード設計開発ツールとの違いは何ですか?
「ローコード開発とは何か、なぜそれが重要なのか?」この記事では、コードへの設計に関しては3つの主要な課題があることを強調しています。
- Angular、React、Blazor、Web Componentsなどの最も一般的なフレームワークで動作するエンタープライズ対応アプリを構築するための WYSIWYG ローコード アプリ メーカーの欠如。
- デザイン スケッチやプロトタイプは、実際のコードや機能的なアプリに自動的に変換するのが困難です。
- ソフトウェアコンポーネントに変換され、ブランド化されたソリューションを構築するために再利用またはコンテキスト化できる包括的なUXコントロール、パターン、およびスタイルガイドラインを備えた統合デザインシステムを備えたローコードプラットフォームはほとんどありません。
そして、このApp Builderが競合他社のデザイン・トゥ・コード・ソフトウェアの例を凌駕するときです。主な差別化要因は、編集不可や変更不可のスパゲッティ コードを生成する他のアプリ メーカーとは異なり、App Builderは、使いやすく、テスト可能で、デバッグ可能なクリーンな運用準備完了のコードを生成することです。
さらに、App Builderは共有コードベースに依存しており、開発、テスト、デバッグ、デプロイメント機能が組み込まれているため、InfragisticsのこのクラウドベースのローコードWebアプリビルダーは、開発時間を80%短縮します。単一の「フォースマルチプライヤー」として機能し、スケッチ、設計、プロトタイピング、ユーザーテスト、リアルタイムコードプレビュー、コード生成を効率化し、反復的なタスクを自動化することで、ユーザーインターフェースの構築に伴う複雑さを排除し、手動コーディングなしで優れたUXを作成できるようにします。
これにより、関係者からデザイナー、開発者まで、全員が 1 つのプラットフォームに統合され、チーム メンバーにこれまで使用してきたツールを手放すように求める必要がなくなります。
さらに、App Builderは開発タスクを置き換え、UI コンポーネント、およびコード、スタイル、レイアウトにリンクできるインタラクションを構成します。
つい最近、包括的なApp Builder製品の概要とチュートリアルをリリースしました。以下で視聴して、その特徴と機能についてすべて学び、使い始めることができます。
ビジネスの観点から見ると、当社のローコードプラットフォームは、アプリ開発プロセスを民主化することでアプリ開発コストを削減し、テクノロジーの混乱を回避し、ビジネスワークフローを自動化します。クラウドベースであるため、アプリビルダーソフトウェアはスケーラビリティとデータ暗号化も促進します。