メグリでUI/UXデザインを担当しているセオです。
今回はですね（といいつつQiita初投稿）、Figmaのプラグイン「html.to.design」を使ってみたら超絶便利だったというお話しをさせていただきます。
まずはFigmaについて
AdobeがFigmaを200億ドルで買収するというニュースが話題になったことで、Figmaの名前を聞いたことがある方は多いんじゃないかと思いますが、Figmaってなあに？という方のために簡単にFigmaについて説明をしたいと思います。
Figmaのオフィシャルサイトでは、Figmaは「コラボレーションインターフェイスデザインツールである」と説明されています。
インターフェイスデザインツールと聞くとなんとなくフォトショップとかイラストレーター的なデザインをするツールなんだろうなとイメージが湧くのではないでしょうか。
Figmaはそのイメージ通り、デザインができますし、ワイヤーフレーム作成やらCSSの書き出しやら画面遷移の確認ができるプロト作成等、デザイン意外にも色々できるツールです。
しかも全ての機能がブラウザ上で使える（間違ってたらごめんなさい）上に（デスクトップアプリも有り）、個人利用はなんと無料！
Figmaユーザーの3分の2が非デザイナーらしいんですが、このことからもFigmaの汎用性の高さが窺えます。
また、「コラボレーションインターフェイスデザインツール」と言うだけあって、「コラボレーション」という大きな特徴も持っています。
デザインやワイヤーフレーム作成などの作業を複数人でリアルタイムに行うことができるので、
みんなでワイワイ会話をしながらワイヤーを描いたり、修正したりなど、効率良く作業ができます。
さらに、Figmaにはコミュニティがあって、そこに自分で作ったUI素材やアイコンなどの作品を共有したり、他のユーザーの作品をダウンロードして素材として使わせてもらうといったことができます。
デザイン素材だけでなく、Figmaの機能を拡張する自作プラグインを共有することもできますし、他のユーザーが作成したプラグインをインストールすることもできます。
もっと便利な機能がたくさんありますが、ここでは説明しきれないので、割愛します。
個人的には手放せないツールになっています。
↑Figmaのプラグイン一覧画面
プラグイン「html.to.design」について
さて、少々前置きが長くなりましたが、ここからが本題です。
html.to.designは、先ほどの
Figmaの機能を拡張する自作プラグインを共有することもできますし、他のユーザーが作成したプラグインをインストールすることもできます。
に該当するサードパーティ製のプラグインです。
ざっくり言うと、プラグインのダイアログ上でサイトのURLを入力するだけで、そのサイトのデザインデータを作成してくれる便利なツールです。
使い方もかなり簡単なので、実際にやってみましょう！
まずコミュニティ画面で「html.to.design」と検索すると一覧に出てくると思いますので、そいつをクリックします。
プラグインの詳細画面に遷移したら、右上の「試す」ボタンをクリックします。
そうするとFigmaの空のデザインファイルが自動で新規に作成されます。
そして、html.to.designのダイアログが開かれていると思いますので、実行ボタンをクリックします。
実行ボタンをクリックするとプラグインがインストールされ、スクショのようなダイアログが出てきますので、「Public website to import」のところにデザインデータを作成したいWebサイトのURLを入力します。
サンプルとして弊社サービスサイトのトップページのURLを入れて、「Import to canvas」ボタンをクリックします。
1秒、2秒、3秒・・・
はい！25秒ほどで、サービスサイトのトップページがFigmaのデザインデータとしてコンバートされました。
プラグインさえインストールしてしまえば、コンバートの手順はURLを入力するだけなので、めちゃくちゃ簡単です。
使ってみた感想
デザインの再現性はかなり高い
CSSで指定されているフォント、フォントサイズ、行間、マージン通りにデザインデータが作成されるので、ほぼサイトの見た目通りに再現されます。
画像もhtmlで読み込んでいる画像（png、jpg、svgなど）もそのまま引っこ抜いてくれます。
再現性できない場合もある
フォントアイコンを使っているところは再現されませんでした。
スクショの赤枠部分のように別のアイコンになったり、空白になったりします。
テキストの表示がおかしくなっている箇所がありました。
また、サイト上でbackground-imageを使って画像を表示している箇所は、Figmaでは画像データの両サイドに余白が付いた状態でコンバートされていました。
こんな感じでいくつか再現できない箇所がありましたが、弊社サービスサイトトップに限って言えば、むしろうまく再現できなかった箇所がこれしか無かったので、html.to.designの再現性の高さはスゴいと思いました。
こういう場合に使うと便利かも
前任のデザイナーと引き継ぎがうまくできておらず、デザインデータが無い...泣。
こんな時は、html.to.designでデザインデータを作成→手で調整
の流れで0から作り直すより何倍も効率的にデザインデータを作成できると思います。
また、PhotoshopやIllustratorなどで作成したデザインデータをFigmaでつくり直したい場合にも使えそうですね。（Webサイトが存在することが前提となりますが）
サイト上で使っている画像データを丸っと引っこ抜きたい場合もに有効かなと思います。
ただ引っこ抜くだけなら他のツールでも良いと思いますが、Figmaだと画像書き出しの選択肢が色々あるので、svgをpngで書き出したりなど、画像を引っこ抜いた後に書き出しの設定を変更したい場合にはおすすめです。
イケてるサイトをデザインデータ化して、あれこれいじりながら自身のスキルアップに活用することもできそうですね。
ここがちょっとメンドクサイ
もしhtml.to.designで作成したデザインファイルを中長期的に運用していくのであれば、レイヤー構造を調整する必要があると思います。
- レイヤーの階層構造がhtmlのマークアップを踏襲した形になっているため、デザイン効率が良い形にレイヤーをグルーピングし直す
- レイヤー名が「div」「p」「ul」といったhtmlのタグになっているので、デザイン上わかりやすい名前に付け替える
まあ自動的にいい感じのレイヤー構造にしてくれって言うのが無理な話で、html.to.designが悪いわけでは無いんですが...
最後に
html.to.designは、そんなに頻繁に使う機能ではないかもしれませんが、ここぞという時にパフォーマンスを発揮してくれるプラグインだと個人的には思います。
実際、既存LPの別パターンを作成する必要があるのにデザインデータが無い、というシチュエーションに出くわしたことがあります。
1からデザイン起こさなきゃダメかな...とブルーな気持ちになっていた時にhtml.to.designの存在を知り、これ使えるかも...と思って使ってみたら秒でデザインデータが生成できたので、これはスゲぇ！と感動したものです。
以上がhtml.to.designを使ってみた感想です。
ではまた。