Figma『Builder.io(旧HTML to Figma)』が鬼便利！WEBデザイナー初心者＆プロ必見のコピープラグイン

2022-08-182024-06-19

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

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

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

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

あわせて読みたい

ERROR: The request could not be satisfied

そもそもFigmaについてもっと知りたい、という方は下記の記事も参照にしてくださいね。

あわせて読みたい

【初心者必見】Figmaの使い方とワイヤーフレームの作り方を丁寧に解説 Web制作・Webデザインをするにあたりワイヤーフレーム制作ができると、クライアントにも制作予定のサイトの方向性を決めておけるので作業もサクサク進みます。そんなワ…

あわせて読みたい

Figmaのデザインカンプからコーディングするには？画像付きで分かりやすく解説「Figmaで作ったデザインカンプを受け取ったけどコーディング方法が分からない…」こんなお悩みを抱えてどうしようと悩んでいる方もいるかもしれません。 Adobe Illustr…

FigmaのBuilder.io(旧HTML to Figma)とは？

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

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

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

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

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

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

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

FigmaのBuilder.io(旧HTML to Figma)を実際に使ってみよう！

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

Builder.ioは以下の流れで利用します。

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

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

Figmaをインストール

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

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

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

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

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

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

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

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

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

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

検索バーに「Builder.io」と入力しBuilder.io(旧HTML to Figma)を導入

検索バーに「Buider.io」と入力すると、アプリがずらっと並びます。
該当アプリクリックしインストールしましょう。

右クリックでBuilder.io(旧HTML to Figma)を起動させ「import from Web」を選択

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

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

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

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

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

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

インポート後にレイアウトが崩れる場合もあるから、その時は調整してください。