どうも、ウェブ企画パートナーズの竹内です。今回はFigmaの神プラグインを発見したので、そちらをご紹介していきたいと思います。
どんな人におすすめか
このプラグインは様々なシーンで活用できます。例えば：
- 前の制作会社から乗り換えてきたけど、デザインデータを提供してもらえない場合
- これまでIllustratorやPhotoshopでデザイン管理していたけど、今後はFigmaで統一していきたい場合
- 古いソフト（Fireworksなど）で作られたサイトの修正が必要になった場合
- リスティング広告などでA/Bテストをしたい時に、メインビジュアルの差し替えを簡単に試したい場合
こうした様々なデザインの復元ニーズに、高精度で対応してくれるプラグインです。情報感度の高い方はすでにご存じかもしれませんが、まだ知らなかった方はこの機会に知っていただくと、今後の制作がはかどるかもしれません！
html.to.designとは？
このプラグインの公式サイトでは「実際のWebサイトをインポートするとFigmaで扱えるデザインデータになる」という夢のようなことが書かれています。しかも3ステップで簡単にできます：
- プラグインをインストール
- インポートするWebページのURLを入力
- インポートをクリック
これだけで、Webサイトを完全に編集可能なFigmaデザインに変換できるツールです。
インストール方法と使い方
- 「html.to.design」で検索するか、Figmaのプラグイン検索画面から探す
- 「場所を指定して開く」を押して新しいFigmaファイルを作成
- プラグインをインストールして実行
- 変換したいWebサイトのURLを入力してインポート
実際に使ってみた結果
自社のWebサイトをインポートしてみたところ、フォントの問題などはありますが、ほぼ完全に再現できました。要素ごとにちゃんと分かれているので、ボタンだけをクリックしたり、コピーだけを選択したりと細かく編集が可能です。
さらにYahoo!のサイトもインポートしてみたところ、これも完璧に再現されました。ニュースの文言を動かしたり、リンクを変更したりと自由に編集できます。Figmaを使ったことがない方でも面白く使えるのではないでしょうか。
料金プラン
基本的に無料で使えます！無料プランでは30日ごとに最大10件のインポートが可能です。これだけでも十分かもしれません。
- 無料プラン：URL経由でインポート可能、Google拡張機能も利用可能
- プロプラン：ユーザーあたり月額10ドル（約1,000〜2,000円）で無制限インポート、高解像度画像、複数URL一括インポートなどが可能
- チーム向けプロバージョン：チーム管理ダッシュボードなどの機能あり
どちらのプランも年額請求か月額請求（月額は18ドル）を選べます。個人のデザイナーさんなら無料かプロプランで十分でしょう。月10件もインポートすることはあまりないかもしれないので、ほぼ無料で使えるのではないでしょうか。むしろ、このサービスが続くためにもう少し請求してもらった方がありがたいくらいです！
まとめ
このhtml.to.designというプラグインを最初に見たときは「こんなことができるのか」と衝撃的でした。本当に便利な世の中になりましたね。
制作会社としてもデザインデータを渡さないところも多いと思います。弊社も基本的にはデザインデータの提供は行わず、必要な場合は別途買取費用をいただく形式です。しかし、このプラグインを使えば「じゃあお金がかかるならこれを使おう」という選択肢もできました。
もちろん、レイヤーが細かく分けられていなかったり、サイト構造が適当だったり、対応していないフォントがあるなどの制限はあります。それでも、これらの問題を差し引いても非常に便利なツールだと思います。
こういったプラグインの登場により、これまでPhotoshopやIllustratorでWebデザインを行っていたデザイナーさんも、ますますFigmaに切り替わっていくのではないでしょうか。
以上、Figmaの神プラグイン「html.to.design」の紹介でした！