Chromeで編集可能なデザインレイヤーとしてライブページコードをキャプチャする
wonder.designによるWonder Captureは、デザイナーや開発者がライブウェブサイトを編集可能なデザインの出発点に再利用するのを助けるChrome拡張機能です。この拡張機能はページの構造とスタイルを取得し、キャプチャされたコンテンツが静的なスクリーンショットではなく、デザイン環境内で編集可能なコンポーネントになるようにします。実際のサイト要素を再利用可能な資産に変換することに焦点を当て、Wonderデザインワークフローに接続します。UI/UXデザイナー、ウェブエンジニア、およびプロダクトチームは、制作ページに基づいた迅速なモックアップやリサーチのためにこれを使用します。
デザインワークフロー内で使用するためのサイトコードを抽出します
Wonderは、ビットマップではなくページの基盤となるマークアップとスタイルをキャプチャし、デザイナーが洗練できる編集可能なコンポーネントを生成します。この拡張機能は、テキスト、CSSルール、およびレイアウト情報を保持するため、キャプチャされたアイテムはデザインターゲット内で編集可能なアセットとして到着します。開発者によってリストされた重要なキャプチャモードには、要素およびセクションの選択、さらにフルページのスクロールキャプチャが含まれており、チームにモックアップの具体的な出発素材を提供します。
ローカル処理と迅速なアクティベーションにより、キャプチャをブラウザ内に保持します
開発者は、すべてのキャプチャ処理がブラウザ内でローカルに実行されるため、キャプチャされたデータが外部サーバーにアップロードされないと述べています。アクティベーション方法には、ツールバーアイコンとキーボードショートカット（Alt+Shift+C）が含まれており、デザイナーが現在のタブを離れることなくキャプチャを開始できるようにします。これらの動作により、キャプチャされた素材が編集前にローカル環境内に留まる必要があるワークフローに適したツールとなります。
Wonderエコシステム内で機能しますが、Chromeに依存し、ニッチなユーザーベースがあります
この拡張機能はWonderデザイン環境と直接統合され、キャプチャされたコードをそのプラットフォーム内で編集可能なアイテムとして貼り付けることができます。Chrome拡張機能として配布されており、Chromeを実行するデスクトッププラットフォーム全体で利用可能なため、使用はそのブラウザに依存しています。この拡張機能は、制作由来のアセットを求めるチームのための特化したニッチを占めており、開発者はデザインからコードへのワークフローに向けた小規模で専門的なユーザーベースを指摘しています。
ライブサイトコードを再利用するチームのための焦点を絞った選択肢、明確なエコシステムの制限付き
Wonderは、デザインワークフローに生産由来のアセットをインポートしたいデザイナーや開発者にとって実用的なオプションです。ローカル処理と編集準備が整った出力は、プライバシーを重視し、コードに焦点を当てたモックアップに適しています。この拡張機能はChromeとWonderプラットフォームに依存しているため、シンプルなピクセルスクリーンショットが必要なユーザーやそのエコシステムを使用しないユーザーにはあまり適用できません。
