Dualite でランディング ページを作成する方法

私はランディング ページの figma デザインを作成するのに何時間も費やしました。すべての色は適切で、すべてのピクセルはシームレスなユーザー フローで適切に配置されていますが、このランディング ページを実際にコーディングするという困難な部分が始まります。

Figma デザインの構築は、完了するのが大変な作業です。そこで、AI を使用して figma のデザインを実際のコードに変換し、私のような開発者が実際にコーディングする労力を最小限に抑えることができる Dualite について知りました。 Dualite を使用してランディング ページを実際のコードに変換する方法を見てみましょう
 

デュアライトとは何ですか？

Dualite は、設計と開発の間のギャップを埋めるように設計された、AI を活用した革新的な Figma プラグインです。 Reactjs、TailwindCSS などの一般的なテクノロジーをサポートして、Figma デザインを高品質で再利用可能なコードに変換することに重点を置いています。

Dualite を使用すると、ワンクリックであらゆる figma のデザインやアニメーションを効率的なコードに変換でき、プロジェクトに応じてカスタマイズできます。エキサイティングな機能が付属しています。その概要を説明します。

• モード: Dualite は、開発者やデザイナーがデザインを生成されたコードに変換するのに最適な、コンポーネント モードとページ モードの 2 つのモードを提供します。これらのモードにより、レイアウト、対話性、アニメーションなどがデザインからコードに正確に変換されます。
  • コンポーネント モード: 個々の設計要素に焦点を当て、再利用可能なコンポーネントの作成を可能にします。
  • ページ モード: 全体的なレイアウトと構造を維持しながら、ページ全体を変換します。
  • モードの詳細については、このブログをご覧ください
• 高度な機能:
  • Dualite は、ユーザーが設計に関するより技術的な情報を提供できる高度な設定を提供します。これにより、生成されたコードの応答性と正確さが保証されます。
  • これらの詳細設定により、デザイナーや開発者はより多くの権限を得ることができ、特定のプロジェクト要件を満たすように出力をカスタマイズできるようになります。この機能は、応答性の高いレイアウトや複雑なアニメーションなど、最終コードを正確に制御する必要がある複雑なデザインに特に役立ちます。 Dualite をすぐに使い始めるには、ドキュメントに従ってください

figma デザイン

ランディング ページの figma デザインを始めましょう。以下を参照してください:

Dualite には、ページ モードとコンポーネント モードを切り替えることができるモード機能があります

基本的に、ページ モードは完全なデザインを一度に変換するためのもので、コンポーネント モードはプロジェクトに統合できる個別のコンポーネントを作成するものです。コンポーネントの詳細についてはドキュメントをご覧ください

コンポーネント モードを使用して、デザインに存在するすべてのコンポーネントのコードを生成し、それらを 1 つのプロジェクトに統合します

ランディング ページをコンポーネントに分割することから始めましょう。以下を参照してください:

プロジェクトの初期設定

Dualite で Reactjs と Tailwind を使用してコードを生成するので、最初にプロジェクトをセットアップしましょう:

• Reactjs アプリ: Vite またはその他のツールを使用して React アプリを作成します。 Vite は Javascript アプリを作成するのに人気のある選択肢です
• Tailwind のセットアップ: Tailwind ドキュメントに従って、不要なエラーを発生させずに Reactjs アプリで Tailwind をセットアップします。 Tailwind セットアップをスムーズに行うために、PostCSS やオートプレフィクサーなどの依存関係も必ず追加してください。
• 構成ファイル: プロジェクトのルートに tailwind.config.js と postcss.config.css を作成します。 Tailwind ドキュメントのすべての手順に従った場合は、tailwind.config.js が存在する可能性があります。すでに存在する場合は、それに応じて更新してください
• JavaScript を使用します: 現時点では、Dualite は Typescript をサポートしていないため、必ず Javascript のみを使用して Reactjs アプリを作成してください

Dualite でコンポーネントの変換を開始する

初期セットアップ:

• モード: コンポーネント モードを使用します。右上隅にあるトグル ボタンを使用して、ページ モードとコンポーネント モードを切り替えます
• フレームワーク: コードに変換するデザインを選択すると、複数の言語とフレームワークのオプションが表示されます。 Reactjs と Tailwind を使用してコードを生成します。
• Dualite の使用をすぐに始めるには、これをお読みください

それでは、デザインをコンポーネントに変換してみましょう:

1. アナウンス バー コンポーネント: ここで生成されたコードを確認してください
    

2. ナビゲーション バー コンポーネント: ここで生成されたコードを確認してください
    

3. カテゴリ フィルター コンポーネント: ここで生成されたコードを確認してください
    

4. カード コンポーネント コンポーネント: 生成されたコードをここで確認します
    

5. ページネーションコンポーネント: ここで生成されたコードを確認してください
    

6. フッター コンポーネント: ここで生成されたコードを確認してください
    

カスタマイズ

1. コンポーネントをコピー:
   • 次に、上記で生成されたすべてのコードから Components フォルダーをコピーし、コンポーネント フォルダー内のプロジェクトに貼り付けます
   • すべてのコンポーネントの名前が「コンポーネント」のみであることに気づいたかもしれません。したがって、すべてのコンポーネントにそれに応じた名前を付けましょう。例: アナウンス バー コンポーネントの名前は「アナウンスバー」になります。ここで私がそれをどのように行ったかを確認してください
2. すべてのコンポーネントをレンダリングします:
   • 次に、App.jsx ファイル内の設計に従ってすべてのコンポーネントをインポートします
   • プロジェクトを実行すると出力が表示されます。ここで App.jsx ファイルを確認してください。
   • お気づきかもしれませんが、一部のコンポーネントは修正する必要があります。カスタマイズから始めましょう
3. コンポーネント スタイルの修正:
   • フォント:
     • デザインからわかるように、私たちは独自のフォントを持っています。これらをアセットフォルダー内に追加すると、プロジェクト内のどこでもフォントを使用できるようになります。
     • Tailwind ディレクティブが存在する Index.css ファイルで使用しているすべてのフォントに対して @font-face を作成する必要もあります
   • ナビゲーション バー コンポーネント:
     • レイアウトが不正確なので、スタイルを修正する必要があります
   • カードコンポーネント:
     • スターアイコン: グラフィックフォルダー
     内にスターアイコンを追加しました
     • Text.js: Text.js ファイルを更新して、ボタンのラベルとコンポーネントのその他のテキストを修正しました
     • スタイル: 特定のテキスト要素とボタンのラベルにフォントの太さを追加するスタイルを更新しました
   • カードコンポーネントロジック:
     • カード コンポーネントは単一のコンポーネントのみであるため、単一のコンポーネントのみをレンダリングします。
     • 複数のカード コンポーネントをレンダリングするには、デモ データを追加してその上にマップし、複数のカードをレンダリングする必要があります

注: すべての変更とコードは、こちらの CodeSandBox で確認できます

出力

プロジェクトでこれらすべてのカスタマイズと変更を行うとすぐに、デザインのより良いバージョンが表示され、ここでコードと出力を確認できます

Dualite は役に立ちましたか?

正しく理解しましょう。Dualite を使用して生成したすべてのコンポーネントは使用する準備ができていました。はい、デザインの見た目に近づけるためにコードにいくつかのカスタマイズを加えました。にもかかわらず、コンポーネントのすべてのスタイル、すべてが別個のファイル内のデータを含むコンポーネントの階層は、Dualite によって生成されます。

UI の構築に多くの時間を費やす代わりに、Dualite を使用できます。

手動コーディングと比較すると、十分に時間がかかるはずです。すべてのコンポーネントの出力は非常に良好で、100% 正しいものはありません。すべてのコードは開発者による最終仕上げが必要であり、それがここで行ったことです

はい、Dualite はコンポーネントのコードを生成するのに非常に役立ち、迅速でした。

結論

これで、手動コーディングを大幅に減らして Figma デザインのコードを生成する効率的な方法が完成しました。実際にデザインをコーディングするプロセスは、まさにジェットコースターのようなものですが、Dualite を使用し、ニーズやプロジェクトに応じてコードをカスタマイズすると、それほど複雑ではなくなります。

以上がDualite でランディング ページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。