Chrome extension to Figma：ログイン後のページやlocalhostをFigmaへ

開発者は、実際に作ったものをデザイナーに見せたり、コードで作ったプロトタイプをレビューのためにFigmaに取り込んだりする必要がよくあります。いつもの選択肢は、誰も編集できないスクリーンショットか、画面を手作業で作り直すことです。拡張機能は第3の選択肢を提供します。localhostを直接キャプチャするのです。

ご自身のブラウザで動作するため、拡張機能は開発サーバーがレンダリングするものをそのまま見られます。たとえば次のようなものです。

• まだどこにもデプロイされていないフィーチャーブランチ
• ローカルデータやモックAPIに依存するページ
• VPNやプライベートネットワーク上のステージング環境
• コンポーネントのプレイグラウンドや個別のストーリーページ

要素ピッカーを使えば、ページ全体ではなく1つのコンポーネントだけをキャプチャできます。ハイライトし、パディングも必要なら上矢印キーでコンテナまで出て、Enterを押します。結果はレンダリングされたCSSからAuto Layoutが推定されたフレームになり、flexboxの行は間隔とパディングを持つ水平方向のAuto Layoutフレームとして届きます。

これにより、ハンドオフが双方向になります。デザイナーは実装の編集可能なフレームを受け取り、リリースされたものにコメントしたり調整したりできます。レイアウトがどう対応するかはCSSのflexboxとgridをAuto Layoutへのガイドで紹介しています。

ChromeからFigmaにキャプチャを取り込む方法は2つあり、どちらも同じレイヤーが得られます。

貼り付け

キャプチャ後、結果はクリップボードに置かれます。Figmaに切り替えてHTML to Framesを開き、Browserタブで貼り付けます。お好みで、代わりにキャプチャを.h2fファイルとして保存し、後でプラグインに取り込むこともできます。この方法では、データがあなたのコンピューターから外に出ることはありません。

Send to Figma

ワンタイムコードを使って、一度だけ拡張機能をプラグインに接続します。その後は、クリップボードを経由せずに各キャプチャが開いているプラグインへ直接届くため、複数の状態を続けてキャプチャするときに速くなります。

Send to Figmaでは、キャプチャはプラグインが受け取るまで、最大30分間こちら側のメモリに保持されます。ディスクには書き込まれません。

どちらの方法でも、1回のキャプチャはプランの1回のインポートとしてカウントされ、得られるレイヤーはまったく同じです。

ログイン後のページを読み取れる拡張機能は、慎重に確認されるべきです。HTML to Frames Chrome拡張機能は、できるだけ何もしないように設計されています。

• **ブラウザ内で動作します。**キャプチャは、表示しているページからローカルで作成されます。
• **アカウント不要。**利用するためにサインアップやサインインは必要ありません。
• **アナリティクスなし。**拡張機能に利用状況のトラッキングはありません。
• **リモートコードなし。**拡張機能がサーバーからコードをダウンロードして実行することはありません。
• **デフォルトでは何も送信しません。**データが届くのはSend to Figmaを選んだ場合のみで、その場合もプラグインを待つ間、最大30分間メモリに保持されるだけです。

キャプチャには、キャプチャすると選んだページの内容だけが含まれます。個人情報や顧客データが表示されたページをキャプチャする前に、そのデータが共有のFigmaファイルに入ってよいかを検討し、要素ピッカーで必要な部分だけを取得しましょう。

Figma側では、プラグインはファイルの内容を読み取りません。新しいレイヤーを書き込み、自身のフレームのメタデータだけを読み取ります。構成の全体はセキュリティページで、インストールとペアリングはドキュメントで説明しています。拡張機能はChrome Web Storeでの公開に向けて準備中です。