Deutsch 
Español 
Français 
한국어 
Polski 
Português 
Weblify vs CSS Peeper
CSS Peeperの代替ツール。Webサイトのリファレンスを編集可能なデザインレイヤーに。
Webサイトのリファレンスについて、CSS Peeperと無料のWeblify Chrome拡張機能を比較します。Weblifyはページや選択した要素を編集可能なFigmaレイヤーにコピーし、CSS Peeperは既存のWebページのデザインの詳細を確認することに重点を置いています。
Google Chrome向けの無料Weblify拡張機能
Thanks so much, Adam!... saved me many, many hours of manual work.
CSS PeeperとWeblify、どちらを選ぶ？
ワークフローを比較して、次のプロジェクトに合ったツールを選びましょう。
| CSS Peeper |  Weblifyなら |
|---|---|
| Webサイトのビジュアルな確認 CSS Peeperは、Webページをビジュアルに確認するワークフローを提供します。 | WebサイトをFigmaに取り込むChrome拡張機能 無料のWeblify拡張機能を使えば、ChromeでWebページ全体または1つの要素をコピーし、編集可能なレイヤーとしてFigmaに貼り付けられます。 Weblifyのガイドを読む |
| スタイルの調査 ページのデザインプロパティを確認しやすくする製品です。 | FigmaからHTML、Tailwind、React、Vueへ Figmaレイヤーを選択し、生成されたHTML、Tailwind、React、Vueのコードをデザインの横で確認してから、実装をコピーまたはダウンロードできます。 Weblifyのガイドを読む |
| アセットの確認 CSS Peeperには、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乗り換える前に確認すること。
このページでは、Webサイトの取り込みとビジュアルな確認を比較しています。再構成されたFigmaレイヤーには確認が必要で、無料の取り込み拡張機能には、別途提供されるWeblify Proのコード確認ワークフローは含まれていません。
ワークフローガイドを読む- タイポグラフィ、画像、入れ子のレイアウトを含むWebサイトの要素から始めます。コピーしたいWebサイトをChromeで開きます。
- ページ全体をコピーするか、要素を1つ選びます。
- 新規または既存のFigmaファイルに結果を貼り付けます。このページでは、Webサイトの取り込みとビジュアルな確認を比較しています。
よくある質問
始める前に知っておきたいこと。
CSS PeeperではなくWeblifyを選ぶべきなのはどんなときですか？
Webサイトのリファレンスをもとに、Figma内で作業を続けたいデザイナー。
CSS Peeperのほうが向いているのはどんなときですか？
スタイルやアセットを確認できるビジュアルなWebサイト確認ツールを探している人。
乗り換える前に確認すべきことは何ですか？
このページでは、Webサイトの取り込みとビジュアルな確認を比較しています。再構成されたFigmaレイヤーには確認が必要で、無料の取り込み拡張機能には、別途提供されるWeblify Proのコード確認ワークフローは含まれていません。
WeblifyのWebサイト取り込み機能は、Figmaの有料プランに含まれていますか？
ページや要素を取り込むWeblify Chrome拡張機能は無料で、Weblify Proのコード確認とは別のものです。拡張機能を使って、対応する結果を自分のFigmaファイルに貼り付けてください。
アップグレードする前にWeblifyを試せますか？
Google Chrome向けの無料Weblify拡張機能。Chrome拡張機能は、Weblify Proのコードインスペクションとは別のものです。
PDF見積書 ↗ 
