最新記事を公開しました→ 詳しくはこちら

Figma『HTML to Figma』が鬼便利!WEBデザイナー初心者&プロ必見のコピープラグイン

WEBデザイナー御用達「Figma」のプラグイン「HTML to Figma」が鬼便利なのでご紹介します。
このHTML to Figmaは他サイトのデザインをまるまるコピーできる優れものです。
デザイン初心者にも嬉しいツール。僕もWeb制作のデザイン提案の際にはいつも活用しています。

このプラグインを利用すると、例えば良いなと思ったサイトや参考にしたいサイトなどのデザインをまるまるコピペできるため、自分のサイトにデザインを当てはめた時に「paddingはこれくらいがいいかな」「アイキャッチはこの大きさにしよう」などデザインの当たりをつけやすくなります。

クライアントへデザイン提案をする際にもモデルとなるサイトをコピペできるため、ワイヤーフレームも簡単に作成できて便利です。しかも複数のサイトを同じプロジェクトにコピペできるので、お気に入りのデザインを複数組み合わせての作成も容易にできます。※くれぐれもデザインをそのまま丸パクリはしないでください。あくまで参考にしましょう。

今回はそんなHTML to Figmaの導入方法を画像を交えながら解説します。

目次

FigmaのHTML to Figmaとは?

FigmaのHTML to Figmaとは、上でもご紹介したように他サイトのデザインをまるまるコピペできるプラグインです。
HTMLやCSSなどをコピーするのではなくて、デザインをまるごとコピペできるツールだと理解してください。

「デザインをまるまるコピペして何がいいの?」

と思われる方もいらっしゃるでしょう。
しかしこの”まるまるデザインをコピペできる”というのはとても便利なことでもあるんです。

ワイヤーフレームをスムーズに、直感的に作成できるようになる

例えばウェブデザイナーさんならクライアントさんへのワイヤーフレーム作成に役立ちます。
クライアントさんによっては「このサイトデザインが好きだから雰囲気を似せてほしい」と考えることもありますよね。

そんな時は雰囲気を似せたいサイトをまずHTML to Figmaでコピーしてそこからカスタムしていけば初心者でも簡単に直感的にフレームワーク作成ができるようになります。

実装できるデザインに留めるのは必要ですが、どのようなデザインになるかなどパッと見せられるメリットが大きいので、FigmaのHTML to Figmaはウェブデザインに携わる人なら持っておきたいツールの一つと言えるでしょう。

FigmaのHTML to Figmaを実際に使ってみよう!

それではFigmaのHTML to Figmaを実際に実装する方法をご紹介します!
Figmaをまだ持っていない方は、インストールから始めてください。

HTML to Figmaは以下の流れで利用します。

  1. Figmaをインストール(無料会員登録がまだの場合は会員登録もします)
  2. Figmaアプリを起動し、デザインファイルを新規作成
  3. デザインファイルの編集ページで右クリック「プラグイン」→「プラグインを更に検索」
  4. 検索バーに「HTML to Figma」と入力しHTML to Figmaを導入
  5. 右クリックでHTML to Figmaを起動させ「import to Figma」を選択
  6. 「URL to Figma」にコピーしたいサイトのURLを挿入
  7. コピーされたサイトを編集する

ひとつひとつ解説します。

Figmaをインストール

まずFigmaをインストールしていない方はインストールしてください。
下記のURLからダウンロードできます。

https://www.figma.com/downloads/

Desktop appとありますので、ご自身が使っているOSにあわせクリックしインストールしてください。
この時、会員登録もすませておきましょう。
会員登録は以下のURLから行います。

https://www.figma.com/pricing/

プランは3つあります。
今回は無料で始められる「Free」を選んで会員登録をすませてください。

Figmaアプリを起動し、デザインファイルを新規作成

ダウンロードしたファイルをクリックしインストールしたら、Figmaアプリを立ち上げます。
立ち上げると上記のような画面に移りますので、「デザインファイルを新規作成」をクリックしましょう。

デザインファイルの編集ページで右クリック「プラグイン」→「プラグインを更に検索」

「デザインファイルを新規作成」をクリックすると、上記の画像のような画面になりますので、こちらで右クリックしてください。

右クリックしたのちに「プラグイン」→「プラグインを更に検索」の順でクリックします。

検索バーに「HTML to Figma」と入力しHTML to Figmaを導入

検索バーに「HTML to Figma」と入力すると、該当するアプリがずらっと並びます。
この中の、オレンジっぽい「< >」こういうアイコンを見つけてクリックしインストールしましょう。

右クリックでHTML to Figmaを起動させ「import to Figma」を選択

右クリックして「プラグイン」にカーソルをもっていくと、インストールしたHTML to Figmaが出現しますので、そちらをクリックしてください。

すると上記のようなポップアップが出現します。
こちらを翻訳したものが以下です。

Figma をコードに書き出す
Figma のデザインをレスポンシブなコードに変換します。サインアップは必要ありません。
Figma ファイルをエクスポートするための準備方法を説明します。
フレームや要素に固定された高さ/幅を使用しないようにします。

自動レイアウトを使用するようにコンテンツをセットアップします。

その後で必要なことは以下の通りです。
必要に応じて、応答性と最終的なスタイルを調整します。

何かが壊れているように見える場合は、必要に応じてBuilder.ioでレイアウトを調整します。

このプラグインは魔法ではないので、可能な限りあなたのデザインを取り込もうとします。レイアウト、レスポンシブ、スタイルなど、インポート後に最終的な調整が必要な場合があります。

Figma

つまり、インポート後にレイアウトが崩れていることもあるから、その時は調整してねということですね。

タブの「Import to Figma」をクリックして、コピーしたいサイトのURLを貼ってください。
SITEサイズを調整したい場合は「Viewport Width」も変更し、「Import to Figma」と書かれた青いボタンをクリックしましょう。

今回は当サイトのURLを入力してみました。

Viewport Widthは1200のまま変更せずでも大丈夫です。

コピーされたサイトを編集する

コピーされたサイトを元に、デザインのポイントを参考にしながらワイヤーフレームを作成していきましょう。

下記のように複数のサイトをインポートすることも可能です。
お気に入りのデザインを複数、参考に組み合わせてオリジナルのワイヤーフレームを作成することも容易です。

まとめ

FigmaのHTML to Figmaはウェブデザイナーにとって画期的なプラグインです。
ウェブデザインは他サイトの良いところをうまく取り入れながら作成していくことでデザインセンスも高まりますし、技術向上にも役立ちます。

「デザインにいつも時間がかかりすぎてしまう」
「参考にしたいサイトはあるけどどのように参考にしたらいいかわからない」

など、ウェブデザインについてお悩みの方は是非、FigmaのHTML to Figmaを試してみてくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次