概要
既存のサイトを再現するFigmaのプラグイン「html.to.design」を実務中に使用した際に
スムーズに進まない例があり共有。
■ プラグイン「html.to.design」とは
これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」
https://coliss.com/articles/build-websites/operation/work/html-to-design-figma-plugin-ver2.html■ できること
Webページを1クリックでFigmaのデザインデータに変換可能
月12回まで無料で変換できる
・実務で”使える”データとして落とし込んでくれる
・フォントスタイル・サイズ・画像・カラーなど諸々そのままFigmaデータに落としこんでくれる
・構造をhtmlから把握してくれるのか、レイヤー整理された状態でダウンロードされる
■Figmaで制作中に起こったこと
Googlefoamを使用するため、テストのページを作成。そのページをプラグイン「html.to.design」にて読み込んだ。その際に、Googleのセキュリティの面でひっかかり、権限を開放しても読み込まれないことが起きた。
また、繰り返すうちに一部再現できる箇所もあったりなかったりとまばらという結果に。
読み込まれたパーツを使用してデザインカンプの作成開始。
自動で位置調整される「オートレイアウト」がONになっているのか、一部調整すると別のところが変更が入るなどで微調整を繰り返す事例が発生した。
■対策
・googleアプリを使用する際は、権限を開放する
・読み込まれない場合は別の方法を探すなどシフトする
・Figmaの「オートレイアウト」は便利な機能だが、使いこなすにはある程度理解と学習が必要な為、基本はOFFで作業する
