Deutsch 
Español 
Français 
한국어 
Polski 
Português 
Weblify vs CSS Scan
CSS Scanの代替ツール。Webサイトのリファレンスを編集可能なFigmaファイルに。
Webサイトのリファレンスを編集可能なレイヤーとしてFigmaにコピーしたい場合、WeblifyはCSS Scanの代替になります。無料のChrome拡張機能でページ全体または1つの要素をコピーし、結果をデザインファイルに貼り付けられます。
Google Chrome向けの無料Weblify拡張機能
Thanks so much, Adam!... saved me many, many hours of manual work.
CSS ScanとWeblify、どちらを選ぶ？
ワークフローを比較して、次のプロジェクトに合ったツールを選びましょう。
| CSS Scan |  Weblifyなら |
|---|---|
| WebサイトのCSSの確認 CSS Scanは、Webページのスタイルを確認するためのツールを提供します。 | WebサイトをFigmaに取り込むChrome拡張機能 無料のWeblify拡張機能を使えば、ChromeでWebページ全体または1つの要素をコピーし、編集可能なレイヤーとしてFigmaに貼り付けられます。 Weblifyのガイドを読む |
| CSSのコピー 既存のページ要素からCSSを取得することに重点を置いた製品です。 | FigmaからHTML、Tailwind、React、Vueへ Figmaレイヤーを選択し、生成されたHTML、Tailwind、React、Vueのコードをデザインの横で確認してから、実装をコピーまたはダウンロードできます。 Weblifyのガイドを読む |
| 開発者向けのワークフロー 実装済みのWebサイトの確認に役立つワークフローです。 | Figma内でのライブコードプレビュー 生成されたWebコードをWeblify内でさまざまなビューポートサイズで表示し、引き継ぎやダウンロードの前に結果を確認できます。 Weblifyのガイドを読む |
無料のGoogle Chrome拡張機能。最初のページや要素をFigmaにコピーしてみましょう。
無料のChrome拡張機能を入手ワークフローを選ぶ
作業に合ったツールを選びましょう。
実際の使い方
Weblifyでできること。
ワークフローを支える機能を、デモと設定ガイド付きで紹介します。
無料のChrome拡張機能で、どんなWebサイトもFigmaにコピー。
Weblifyの無料拡張機能を使えば、Chromeでページ全体をコピーしたり要素を1つだけ選んだりして、編集可能なレイヤーとしてFigmaに貼り付けられます。
- Webページ全体のコピー
- 要素単位の選択
- 編集可能なFigmaレイヤー
どのFigmaレイヤーもHTML、Tailwind、React、Vueでインスペクト。
Figmaレイヤーを選択すると、生成されたHTML、Tailwind、React、Vueのコードをデザインの横でインスペクトし、実装をコピーまたはダウンロードできます。
- HTMLとCSSのインスペクト
- Tailwindでの出力
- ReactとVueでの出力
Figmaでコードをインスペクトしながら、描画結果を確認。
生成されたWebコードをWeblify内でさまざまなビューポートサイズで描画し、引き継ぎやダウンロードの前に結果を確認できます。
- ブラウザでのライブレンダリング
- レスポンシブプレビュー
- Figmaデザインの横でプレビュー
実際のプロジェクトで試す
ワークフローをWeblifyに移行しましょう。
チームのプロセスを変える前に、代表的なファイルで試してみましょう。
Weblify Pro乗り換える前に確認すること。
CSSの確認と、編集可能なWebサイトの取り込みは別の作業です。無料のWeblify Chrome拡張機能はPro版のコード確認とは別のものであり、取り込んだレイヤーはWebサイト本来のFigmaコンポーネントやアプリケーションロジックを復元するものではありません。
ワークフローガイドを読む- 編集可能なデザインリファレンスとして必要な、公開Webページのセクションから始めます。コピーしたいWebサイトをChromeで開きます。
- ページ全体をコピーするか、要素を1つ選びます。
- 新規または既存のFigmaファイルに結果を貼り付けます。CSSの確認と、編集可能なWebサイトの取り込みは別の作業です。
よくある質問
始める前に知っておきたいこと。
CSS ScanではなくWeblifyを選ぶべきなのはどんなときですか？
確認したCSSだけでなく、編集可能なWebサイトのリファレンスをFigmaで必要とするデザイナー。
CSS Scanのほうが向いているのはどんなときですか？
実装済みのWebページからCSSを確認・コピーする必要がある開発者。
乗り換える前に確認すべきことは何ですか？
CSSの確認と、編集可能なWebサイトの取り込みは別の作業です。無料のWeblify Chrome拡張機能はPro版のコード確認とは別のものであり、取り込んだレイヤーはWebサイト本来のFigmaコンポーネントやアプリケーションロジックを復元するものではありません。
Webサイトをコピーすると、元のデザインシステムも復元されますか？
いいえ。Weblifyはページから、対応する編集可能なレイヤーを再構成します。結果を確認し、必要に応じて再利用可能なデザインシステムの構造を作り直してください。アプリケーションロジックや元のソースコンポーネントは別物です。
アップグレードする前にWeblifyを試せますか？
Google Chrome向けの無料Weblify拡張機能。Chrome拡張機能は、Weblify Proのコードインスペクションとは別のものです。
PDF見積書 ↗ 
