FigmaデザインをWebフローへ変換する方法
FigmaからWebフローへデザインを移動してウェブサイトを作成することは、多くの開発者が使用している一般的なプロセスです。しかしWebフローFigmaのコンビネーションは理想的だとは言えません。特にアセットをWebフローへインポートする前に、スタイルがFigmaに事前に設定されていない場合です。しかしながら、WebフローとFigmaはどちらも優れたデザインツールであり、Figmaデザインに基づいた実際のウェブサイトを公開するのにWebフローを使用できるという利点があります。Figmaのデザインが静的なものであったとしても、公開前にWebフローにインタラクションやアニメーションを追加することができます。 開発段階に備えて全てを保持しながらデザイン側で多くの時間を省き、デザインツール自体内からhi-fiプロトタイピングの全体を完了できる素晴らしいオルタナティブを紹介する前に、この記事ではFigmaからWebフローに変換する方法について簡単に触れることとします
Part 1. FigmaデザインをWebフローへ変換する方法
Figmaアセットファイルをインポートできる前にWebフローで実行する必要のある準備手順がいくつかあります。最も重要なことは、ウェブサイトのページ間で一貫性を保つために、スタイルガイド又はグローバルスタイルを設定する必要があります。最初のステップがこちらになります。
1. 新しいプロジェクトを開始し、スタイルガイドを設定する
Webフローに移動して「新しいプロジェクト」をクリックします。このウェブサイトプロジェクト用のフォルダーがあることを確認します。
Source: webflow
このフォルダーとサブフォルダーの構造（アセットをインポートする際に後に表示される）の理由は、Figmaがプロジェクトを整理する方法と一致しているからです。従って、これはファイルのエクスポートの方法でもあるので重要な項目となります。
Figmaプロジェクトにスタイルガイドがまだ定義されていない場合にのみ、この方法を実行する必要があります。その場合を考えて、そうでないと推定します。
これを実行するには、ここで提供されている基本スタイルガイドを複製又はコピーし、プロジェクトフォルダー内の新しいページ上の新しいウェブサイトに貼り付けます。
Webフローテンプレートを使用している場合は、その上にWebフローテンプレートを作成することも可能です。
2. 基本クラスのスタイル設定
オプションにはなりますが、次のステップはかなり便利です。どの要素でも選択して、Webフロー画面の右上に表示されるセレクターフォルダーに移動できます。
Source: webflow
次に本文（全ページ）のようなタイトルに「すべて」が含まれている名前でタグを付けます。これにより、デザインをインポートした後、グローバル編集が可能となります。グローバルスタイルの定義はFigmaデザインファイルの内容と一致する必要があり、上記に推奨したHTMLのタグテンプレートを使用する理由なのです。それはプロセスを簡素化しスタイルシートを軽くしてくれています。
3. 色のカスタム
次のステップではカスタムカラーを追加してグローバルにします。
まず、定義すべき色が多くある場合はカラーブロックdivを作成すると良いでしょう。 選択したカラーの見本を作成し、グローバルにして、divを変更して別の色を設定できます。
4. Figmaからのエクスポート
Webフローの準備手順が完了したので、Figmaアセットのエクスポートに進むことができます。
Assuming you've marked everything for export during the design phase in Figmaの設計段階でエクスポート用に全てマークを付けたと推定すると、エクスポートはシンプルなプロセスです。
全てをエクスポートするには、フレームが選択されていないかを確認して下さい。特定のフレームのみを使用する場合は、目的のフレームが選択されていることを確認します。
Source: webflow
Macではコマンド+シフト+Eを押して、Windowsではコントロール+シフト+Eを押してエクスポートダイアログを開きます。
エクスポートをもう一度押し、Finder又はExplorerで配置してWebフローウィンドウにドラッグします。「アセット」パネルのアップロードボタンを使用してWebフローから実行することも可能です。
Figmaレイヤーにアイコン/バッグなどのスラッシュがある場合、上記最初のステップで説明したように、新しいサブフォルダーが自動的にWebフローに作成されます。
5. フレーム及びグループをDivに置き換え
整理されたものを維持するという点で便利なことの１つとして、divsを使ってFigmaファイルからより大きなグループとフレームを複製することです。
各divにコンテナーを追加したり、クラス名を割り当てたりすることもできます（クラスは定義せずに）。その理由は、後にアンカーリンクを追加する方が容易になるからです。
6. コンテンツのスタイルを設定
これはおそらく最も難しい部分となりますが、クラスの総称名を維持し、複数のアスペクトのコンビネーションを追加する場合です。
例えば、クラスに「全てのH2サブヘッダー」という名前を付ける代わりに、「全てのH2サブヘッダー」と「赤いテキスト」を使用できます。これは色と一緒にポジションやサイズをカバーし、ページの各セットで変更することが可能です。
7. インタラクションの作成
Figmaの問題点はプロトタイプがほぼフラットであるので、インタラクションをWebフローを使用してウェブへ翻訳できないことなのです。
代わりに、Webフロー自体からのインタラクションを行います。
クラスごとにインタラクションを定義したり、複数の要素やクラスに関するインタラクションを作成することも可能です。
8. 公開及び微調整
最後のステップはデザインを公開し、様々なデバイスに合わせて微調整することです。
デザインフローとビジネスロジックがどのインターフェイスでも維持されていることを確認するために、できるだけ多くのデバイスでテストを行うことです。
もちろん、この方法はウェブサイトを公開するためにFigmaデザインをWebフローに変換する非常に明快な方法と言えます。埋め込みコードやカスタムコードなどの他の要素がある場合、Web[フローではレンダリングされないので異なるプロセスとなります。ただし、上記ステップではポイントAからポイントBに到達します。
Part 2. Figma vs Webフロー: 大きな違いとは
WebフローとFigmaの最大の違いは、Figmaは実際にウェブサイトを展開するまでは行わないけれども、Webフローはウェブデザインや開発の部分を処理するように設計されていることです。Figmaでは複雑なプロトタイプを作成できますが、Webフローに移植するとほぼ役に立たないため、静的要素のインタラクションを作成する必要があります。
もう1つの大きな違いは、WebフローはJavaScriptに基づいていることです。ユーザーのブラウザでJavaScriptが無効になっている場合、サイトにアクセスができません。一方で、FigmaはHTMLとCSSに基づいているので現代のブラウザではウェブにより使いやすいものとなっています。
コラボレーションアスペクトも大きな差別化要因です。Figmaのオンラインプラットフォームはコメントを含む完全なコラボレーションを可能にしますが、Webフローのコメントは非常に異なる動作をします。
またWebフローのデバイスの種類に対するブレークポイントには制限がありますが、Figmaには制限がありません。
全体的に見て、デザインをウェブに直接展開する場合、Webフローvs Figmaの質問は非常に上手に連携するために議論の余地のあるものです。しかしデザインツールとして両方とも多くが望まれます。そのため、もしあなたが新しいユーザー又は別のプラットフォームからの切り替えである場合、クラウドベースであり本質的に協力的で、さらに非常に直感的でもありますが素晴らしいオルタナティブを紹介しました。
Part 3.ベストなFigmaとWebフローオルタナティブ
FigmaはWebフローよりもUI/UXプロトタイプツールよりもデザインツールとしては優れているかもしれませんが、豊富な機能のオンラインUI/UXデザイン及びプロトタイピングツール、組み込みアセットライブラリ、標準機能としての簡単なプロトタイピングを兼ね備えた Wondershare Mockitt ほど良いものではありません。またFigmaよりはるかに低価格で提供できるのです。
こちらがWondershare Mockittで体験できる重要な機能です:
- アセット – コンポーネントの豊富なコレクションが利用可能です。コンポーネントは、Mockittインターフェイスの左側にあるクイックウィジェットパネル又は右側にある総合的で検索可能なライブラリからドラッグして取り込めます。アセットはFigmaのメインコンポーネントのようなマスターステータスをカスタマイズや割り当てることが可能です。ユーザーは1つの画面で異なる状況を表示するダイナミックウィジェットも作成することができます。
- プロトタイピング – リンクを素早く追加し簡単に編集して、様々な種類のインタラクションを表示できます。アセットからターゲットページにリンクをドラッグするだけで完了します！複雑なプロセスはなく、基本のプロトタイプが数分で作成できます。
- コラボレーション – レビューやコメントはリアルタイムで行われ、安全でユーザー定義されたURL又はQRコードを使用してデザイン及びプロトタイプを非常に簡単に共有します。Wondershare Mockittのオンラインの性質では、接続されたどのデバイスのブラウザからでもプロジェクトにアクセスすることができます。
- ハンドオフ – 開発者のハンドオフはMockittを使用すると特にスムーズに行えます。デザイナーはコードを気にする必要がなく、開発者はデザインを気にする必要がありません。
Wondershare Mockittでウェブサイトをデザインする方法
Mockittは複数のデバイスやプラットフォーム用のUI/UXデザインとプロトタイプ作成のツールです。すぐに使用できるアセットはウェブデザイン用のテンプレートコレクションにより補完され、最新のウェブサイトをデザインするために必要な全てを提供する追加のUIキットやその他リソースがあります。こちらが簡素化されたプロセスです：
1. 新しいプロジェクトを作成する
既存のWondershare IDを使用するか、新しいIDを作成できます。無料プランからスタートして、各20の画面で3つのプロジェクトが提供されます。
新しいプロジェクトを開始しデバイスパラメーターを定義すると、新しい画面が表示されます。
2.ウェブサイトインターフェイスのデザインを開始
必要なウィジェットやアセットを画面にドラッグ＆ドロップをして、ウェブサイトのレイアウトを作成できます。必要に応じてページを追加し、各ページのレイアウトを作成します。また遷移を表示するページ状態を作成することも非常に簡単です。
3. ウェブサイトデザインのプロトタイプ
相互作用及び動的機能性を表示するには、アセットを対応するターゲットページにリンクさせます。リンクが完成したら、ジェスチャー、トランジション効果、アニメーションを追加して編集します。
4. デザインを共有する
ウェブサイトのページをデザインし、インタラクティブな要素を作成したら「共有」オプションをクリックします。これにより、オフライン又はオンラインでも、ウェブデザインをどのように共有したいか複数の選択肢が提供されます。
これらの共有リンクを通してフィードバックを収集し、デザイン変更の際にそれらを参照します。
5. デザインを開発者へ引き渡す
デザイナーが行うことはどれほどありません。開発者がプロジェクトにアクセスすると、コードを調べて開発段階に必要な全てのアセットデータをダウンロードできます。
ダウンロードしたファイルは、デザインで使用されるグループ化とフレーミングに従って整理され定義されたスタイルやクラスがすでにあります。
多くの点で、Mockittは使いやすさと手頃な価格であるのでFigmaより優れていますが、デザインと開発のギャップを埋めるという点でも優れています。そのため、世界中に拠点を持つ多国籍企業の女性デザインチーム又は大規模なデザイン部門であろうと非常に魅力のある選択となるのです。
