こんにちは。寺崎です。
実務ではなかなかデザインを行うことがなく、勉強する機会も減っているのですが、ディレクターの立場としてもう少し勉強したいなと思っています。
そこで先日アップデートされたFigmaのプラグイン「html.to.design」を使ってみて、とても良かったので共有したいと思います。

html.to.designとは？

Figmaのプラグイン「html.to.design」は、デザイナーにとって非常に便利なツールです。
「html.to.design」を使うことで、WebページのHTMLコードをデザインファイルとして変換することができるので、様々なWebサイトをデザインデータ化し、色々触ってみることで自身のスキルアップに役立てることができます。

また、例えばWebサイトのデザインをリニューアルする際に前任のデザイナーとうまく連携が取れず、デザインデータが残っていない場合などもあるかもしれません。
その場合もこのプラグインを使うことで現在のWebサイトを簡単にデザインデータ化することができ、スムーズにリニューアルを行うことが可能になります。

html.to.designの使い方

使い方はとても簡単です。
以下の手順で行うことができます。

1. Figmaを開きプラグインから「html.to.design」をインストール

左上のFigmaのアイコンから「プラグイン」＞「プラグインをさらに検索…」で「html.to.design」と検索する。

実行ボタンを押すと、インストールは完了です。

2. 好きなURLをインポートする

インストールが完了すると上記のような画面が出てくるので、Import via URLにデザインデータ化したいURLを記入し、「import」を押下します。
デフォルトではAppleのURLが入っています。

数十秒待つとデザインデータ化されたものが現れます。
こちらで完了です。

こういった感じで文字まできちんと生成されて、ファイルごとに触ることができます。もちろん日本語も対応してくれています。

まとめ

使い方が非常に簡単で、実務でも使うことができるプラグインです。
使用頻度は少ないと思いますが、いざという時にデザイナーの助けとなる１つだと思います。
「html.to.design」を活用し、よりクリエイティブなWeb制作を実現しましょう。