コラム｜Figmaのプラグイン「html.to.design」が便利すぎて感動した件

「html.to.design」というFigmaのプラグインをご存知でしょうか。たぶんかなり有名なプラグインだと思います。

既存サイトのリニューアルデザインをする際、私はサイトをスクショしてアートボードに貼り、変更箇所を追加で作成する。という作業をしていました。
それをFigmaで行おうとすると、スクショの画質が荒くなってしまうのです。オンライン上で軽快に作業するために、解像度が低く変更されてしまうのかもしれません。

クライアントにデザインを提案するときに、ガビガビのスクショは見せたくありません。なんだか仕事が適当な印象を受けます。

困っていたときに解決してくれたのが、「html.to.design」です。
これは、既存のサイトのURLを入力するだけでサイトをFigma上で編集可能なデータに置き換えてくれるプラグインです。
このプラグインを見つけたきっかけは、スマートキャンプさんのnoteでした。

htmlをベクター形式のオブジェクトに置き換えてくれるこちらのプラグイン、無料版では月の回数制限があり、書き出すデバイスのサイズ選択も限られています。
私は無料版でw1440pxで書き出しました。

書き出したデータのmargin等を測ってみると、小数点が含まれる箇所が多数。
これは元のデータがwordpressだからなのか、リキッドレイアウトだからなのか。
原因はわかりませんが、不思議な小数点が含まれる箇所が多く見受けられました。

今回私が行うリニューアルは、全体ではなくごく一部。
そのためリデザインしてコーダーさんに渡す時には注意書きとして「既存の余白のルールに沿って実装してください」と記載しておきました。

小数点がでてしまうのは不便ではあるものの、構造そのものもグループ化されて書き出されるのでリデザインがとても楽でした。
これからも活用していきたいと思います。