任意の Web サイトを figma デザインに変換する方法

figma は、UX/UI デザイナーや Web デザイナーの間で急速に人気が高まっている優れたツールです。この無料のブラウザーベースのツールを使用して、レスポンシブ Web デザインをすばやく簡単に作成できます。

ほとんどの人は Figma でゼロからデザインを作成しますが、実際の Web サイトからインスピレーションを得て、既存の HTML ページから直接 Figma のデザインを簡単に作成できます。方法は次のとおりです。

HTML から Figma のデザインを作成する理由

既存の Web デザインを Figma デザインとして複製したい理由はたくさんあります。Figma プラグインを介してこれを行うと時間が節約され、デザインの微調整に集中できます。

既存の Web ページを再作成して Web デザインを実践することは、マスターから学ぶ優れた方法です。アクセスできなくなった Web ページを以前にデザインして公開したことがある場合は、HTML から Figma へのデザイン ツールを使用することもできます。ゼロから再設計する代わりに、Figma に変換して再度作業することで時間を節約できます。

このツールが便利な理由がわかったところで、次はその仕組みを学びましょう。

任意の Web サイトを figma デザインに変換する方法

Figma ベースの設計作業を開始するには、Figma を開いてログインまたはサインアップする必要があります。ブラウザ バージョンのFigmaを使用するか、デスクトップ アプリをダウンロードできます。どちらもこのプロジェクトでは同じように機能します。

新しいデザイン ファイルを開いて、HTML から Figma へのデザイン プロジェクトを開始します。

ステップ 1: html.to.design プラグインをダウンロードする

ライブ Web サイトを Figma デザインに直接変換できるようにするには、プラグインが必要です。Figma には、電話やデバイスのモックアップを作成するためのプラグインなど、設計に役立つ無数のプラグインがあります。必要に応じて、変換した Web サイトのデザインを後でモックアップに追加できます。

プラグインをダウンロードするには、Figma メニュー(Figma ロゴ) > Plugins > Find more plugins を選択します。または、 Resources > Pluginsを選択することもできます。いずれかのオプションから、検索バーにhtml.to.designと入力します。

divRIOTS が提供するオプションを見つけて、 [実行] を選択します。これにより、プラグインが Figma キャンバスのダイアログ ボックスとして開きます。

ステップ 2: Web サイトの URL を貼り付ける

html.to.design プラグインは無料ですが、プロ バージョンを提供しています。無料版でデザイン プロセスを完全に完了することができます。

Figma でデザインしたい Web サイトを見つけます。ログインすることによってのみアクセスできる Web ページではなく、公開 Web サイトを使用する必要があります。私たちのホームページ MakeUseOf.com を使用します。

完全な URL をコピーして Figma のインポート ボックスに貼り付け、Apple Web サイトのプレースホルダーを置き換えます。

ステップ 3: デザインを読み込む

Web サイトの URL を貼り付けた後、インポート ボックスの下にある[設定]を開いて、デザインのサイズを選択します。さまざまなデバイスのデザインをインポートできますが、デスクトップ URL を使用した場合はデスクトップ デバイスを選択する方がうまくいき、モバイル デバイス用のモバイル URL を使用した方がうまくいきます。

デフォルトのオプションとして利用できない、デバイスまたはサイズのカスタム オプションもあります。ライトテーマのMacBook Pro 14 インチを選択しています。

デバイスとビューの設定を指定したら、[インポート]を選択して、Figma で HTML デザインを有効にします。Figma のデザインが読み込まれるまで、ロード バーが完了するまで待ちます。

使用した Web サイトによっては、一部の書体を置き換える必要があることを説明するポップアップ ボックスが表示される場合があります。これは、ライセンスされた書体の著作権によるものです。Figma は、アクセスできる書体に置き換えます。

ポップアップを終了し、プラグイン ダイアログを終了して、新しいデザインを完全な形で表示します。

ステップ 4: Figma のデザインを編集する

ここから、好きな方法で Figma Web ページの編集を開始できます。前述のように、この HTML から Figma への機能を使用すると、既存の Web ページがどのように設計され、独自の Web ページをゼロから作成するように促されたかを知ることができます。Web サイトのベース デザインを使用して、Figma でトランジションを使用してプレゼンテーションを作成したり、他のデザイナーが Web ページをセットアップする方法を単純に学習したりできます。

左側のメニューにレイヤーがあります。これは HTML から直接変換されているため、レイヤーは、自分でデザインするときに慣れているものよりも詳細であり、さらには混乱を招く可能性があります。デザインのセクションを選択して、左側のメニューで強調表示されたレイヤーを見つけます。

デザイン アスペクトをダブルクリックして、画像を置き換えたり、タイトルや本文を再入力したり、レイアウト内で項目を移動したりできます。html.to.figma プラグインは、リンクをクリックしたりページを変更したりするときに、アニメーションやトランジションの設定を複製しません。これらは自分で追加できます。

プライベート Web ページを変換する方法

プライベート Web サイト (アクセスするにはアカウントが必要) とパブリック Web ページを作成するプロセスの大部分は同じです。ただし、URL を貼り付ける代わりに、ファイルを生成する Chrome 拡張機能を使用する必要があります。

まず、前と同じ方法で Figma と html.to.figma プラグインを開きます。

ステップ 1: Chrome 拡張機能をダウンロードして実行する

この拡張機能は Google Chrome でのみ使用できるため、Chrome を開いて開始します。Figma プラグイン ダイアログ ボックスから、Chrome 拡張機能を選択するか、 Chromeブラウザーで拡張機能を開きます。

[ Chromeに追加] > [拡張機能を追加] を選択して、拡張機能をブラウザーに追加します。

拡張機能を追加したら、デザインを複製したいプライベート Web サイトまたはページ (Instagram ページを使用しています) に移動し、拡張機能を選択します。折りたたまれた拡張機能は、ブラウザのパズル ピース アイコンの下にあります。

ページ全体をキャプチャするか、表示されているものだけをキャプチャするかを尋ねられます。選択すると、キャプチャがダウンロードに表示されます。h2d ファイル。

ステップ 2: 生成されたファイルを Figma プラグインにドラッグする

ブラウザで Figma アプリまたは Figma サイトに移動し、ダウンロードしたものをドラッグします。h2d ファイルをボックスに入れます。ファイルは、公開 Web サイト オプションと同じ方法でロードおよび生成されます。

パブリック Web ページ バージョンと同様に、デザインの側面をダブルクリックして編集したり、左側のメニューをクリックしてレイアウト上のどこに表示されるかを確認したりできます。

Figma のすりガラス効果など、新しいデザイン要素を Web ページのデザインに追加したり、Figma プレゼンテーションのマスター テンプレートとして Web ページのデザインの一部を複製することもできます。2022 年には Adob​​e が Figma を買収したので、今後、Figma のより楽しい使い方が期待できます。

figma のデザインのインスピレーションとして、任意の Web サイトを使用してください

Figma は主に Web サイトまたは UX/UI ページをゼロから設計するためのものですが、既存の Web ページにデータを入力して、それらがどのように構築されたかを確認する絶好の機会です。空の状態からどこから始めればよいかわからない場合は、Web デザインを既存のサイトのレプリカにすることもできます。

html.to.figma プラグインを使用すべきもう 1 つの大きな理由は、アクセスできなくなった Web サイトを既に設計している場合です。実際に最初からやり直すことなく、Figma でページを作成して最初からやり直すことができます。