Figma│無料!サイトをFigmaで再現するツール

HTMLからFigmaに変換するツールはhtml.to.designが有名ですが、有料サービス(制限付きで無料でインポートできる)です。

無料でHTMLからFigmaにコンバートするツールを見つけたので紹介いたします。

目次

著者

WEB制作をしながらカナダ留学をしているデジタルノマド
技術的なことが好きでWordPressのカスタマイズもいろいろ自作しています。

WordPressのカスタマイズに困ったらご相談ください!

HTML to Figmaの使い方

使い方は簡単です、Figmaのプラグインを入れてキャプチャーしたいURLを入力するだけです。

Figmaのプラグインを導入

Figmaの画面を開いて、プラグイン(Builder.io – AI-Powered Figma to Code (React, Vue, Tailwind, & more))をインストールします。

インストール後、Builder.ioを起動。

URLを入力してインポート

Builder.ioを起動して、Import UIタブに移動。

あとはURLを入力して、画面幅を入力

そしてFramesのチェックを入れましょう(階層を再現してくれます)

Import to Figmaのボタンを押すとサイトが生成されるので待ちましょう。

CSSの再現度はhtml.to.designの方が上ですが、そこそこの結果で変換できました。

Chrome拡張機能を使ったHTML to Figmaの使い方

他にも方法があるので、今回はChrome拡張機能を使った方法を紹介します。

Chrome拡張機能「HTML to Figma – by Builder.io」の導入

下記のChromeの拡張機能をインストールしましょう。

コピーしたいサイトを開きます。

今回は当サイトのTOPページをFigmaに変換してみます。

拡張機能のアイコンをクリック、下記のメニューが表示されるので、CAPTURE PAGEのボタンを押してみましょう。

ボタンを押した後に、page.figma.jsonというデータがダウンロードされます。

Figmaにインポートする

Figmaの画面を開いて、プラグイン(Builder.io – AI-Powered Figma to Code (React, Vue, Tailwind, & more))をインストールします。

インストール後、Builder.ioを起動。

Import UIのタブを押して、Upload the figma.json file here から先ほどのjsonをアップロードしましょう。

しばらく待つとサイトが構築されます。

まとめ

正直、HTMLからFigmaへのコンバートはhtml.to.designの方が優秀です。

それは階層構造まで再現するからです。

とはいえ有料(制限付きで無料でインポートできる)ですので、今回のBuilder.ioでも十分に役に立つでしょう。

気になった方は試してみてください。

次に読んで欲しい記事

全記事一覧

カスタマイズの依頼・相談

目次