ランディング ページの 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. コンポーネントのコピー:
   • 次に、上記で生成されたすべてのコードからコンポーネント フォルダーをコピーし、コンポーネント フォルダー内のプロジェクトに貼り付けます
   • すべてのコンポーネントの名前が「コンポーネント」のみであることに気づいたかもしれません。したがって、すべてのコンポーネントにそれに応じた名前を付けましょう。例: アナウンス バー コンポーネントの名前は「アナウンスバー」になります。ここで私がそれをどのように行ったかを確認してください
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 を使用し、ニーズやプロジェクトに応じてコードをカスタマイズすると、それほど複雑ではなくなります。