はじめに

Figmaではプラグインを使うことにより、既存画面からデザインを起こすことが可能です。

そのため既存デザインがないプロジェクトにアサインされ、追加画面や画面修正を頼まれたときに大活躍します。(多分）

注意事項

• jsでモーダル等を表示制御している場合は表示が崩れる場合がある。
• たまにテキストが出力されないことがある。
• スクロールが必要なサイトは全部表示されないかも
• divの数だけrectangleがあるのか、不要な図形が出力されることがある
• 一切グループ化、フレーム化されない状態で出力されるので、インポート後こちらで適切な形に修正しなければいけない
• ログイン後のUIが欲しい場合や、セキュリティ制限があるサイトの場合は、chrome拡張機能を使う必要あり。 ニュースサイトなど誰から見ても同じUIの場合は必要ない。

手順

1. HTML To Figmaの導入

• Chrome拡張機能
• Figma Plugin

1.5. (必要に応じて)

右上のこのアイコンをクリック

• 該当ページを開き、Chrome ExtensionのHTML To Figmaアイコンをクリックし、表示されるボタンをクリック。
• jsonが保存される

2. デザインをインポートする

• Figmaで[Plugins]→[HTML To Figma]を開き、urlを打ち込む。1.5の手順を踏んでいる場合はupload hereをクリックし、jsonを選択する

3. インポート完了

なんかちょっと壊れてる気がしなくもないですができました。
あとは煮るなり焼くなり好きにしましょう。

地獄のグループ化、フレーム化作業が待っているぞ！

おわり

ページ全体を使うのでなく、あるサイトのあるコンポーネントのつくりを参考にしたいとかそういう役割で使うほうがコスト低くてよさそうです。