Deutsch 
Español 
Français 
한국어 
Polski 
Português 
Weblify vs Zeplin handoff
Zeplinの代替ツール。Figmaのレビューの中で開発者にフレームワークの出力を。
開発者への引き継ぎについて、ZeplinとWeblifyを比較します。Weblifyは、開発者向けのDev Modeにも対応したFigmaのワークフローで、HTML、Tailwind、React、Vueのコードを確認できます。
無料でインストールできます。Proの無料トライアル25回付きで、クレジットカードは不要です。
Thanks so much, Adam!... saved me many, many hours of manual work.
Zeplin handoffとWeblify、どちらを選ぶ？
ワークフローを比較して、次のプロジェクトに合ったツールを選びましょう。
| Zeplin handoff |  Weblifyなら |
|---|---|
| デザイン引き継ぎプラットフォーム Zeplinは、デザインから開発への引き継ぎのためのワークスペースを提供します。 | Figma Dev Modeでのコード確認 開発者は、元のデザインファイルの編集権限がなくても、Figma Dev ModeからWeblifyのコードを確認できます。 Weblifyのガイドを読む |
| チームでのコラボレーション Zeplinは、デザインチームと開発チームの引き継ぎを整理します。 | WebサイトをFigmaに取り込むChrome拡張機能 無料のWeblify拡張機能を使えば、ChromeでWebページ全体または1つの要素をコピーし、編集可能なレイヤーとしてFigmaに貼り付けられます。 Weblifyのガイドを読む |
| 実装のコンテキスト デザインの仕様を開発作業につなげる製品です。 | FigmaからHTML、Tailwind、React、Vueへ Figmaレイヤーを選択し、生成されたHTML、Tailwind、React、Vueのコードをデザインの横で確認してから、実装をコピーまたはダウンロードできます。 Weblifyのガイドを読む |
25回の無料Proトライアル付き。クレジットカードは不要です。
自分のファイルでWeblifyを試すワークフローを選ぶ
作業に合ったツールを選びましょう。
実際の使い方
Weblifyでできること。
ワークフローを支える機能を、デモと設定ガイド付きで紹介します。
FigmaのDev Modeで実装コードを直接インスペクト。
開発者は、元のデザインファイルの編集権限がなくても、FigmaのDev ModeからWeblifyのコードをインスペクトできます。
- FigmaのDev Modeとの連携
- 開発者向けの閲覧のみアクセス
- HTML、Tailwind、React、Vue
無料のChrome拡張機能で、どんなWebサイトもFigmaにコピー。
Weblifyの無料拡張機能を使えば、Chromeでページ全体をコピーしたり要素を1つだけ選んだりして、編集可能なレイヤーとしてFigmaに貼り付けられます。
- Webページ全体のコピー
- 要素単位の選択
- 編集可能なFigmaレイヤー
どのFigmaレイヤーもHTML、Tailwind、React、Vueでインスペクト。
Figmaレイヤーを選択すると、生成されたHTML、Tailwind、React、Vueのコードをデザインの横でインスペクトし、実装をコピーまたはダウンロードできます。
- HTMLとCSSのインスペクト
- Tailwindでの出力
- ReactとVueでの出力
実際のプロジェクトで試す
ワークフローをWeblifyに移行しましょう。
チームのプロセスを変える前に、代表的なファイルで試してみましょう。
Weblify Pro乗り換える前に確認すること。
生成コードの確認は、引き継ぎ管理のあらゆる機能と同等ではありません。必要に応じて共有の仕様書とレビュープロセスを維持し、生成されたコードは対象のフロントエンドプロジェクトで検証してください。
ワークフローガイドを読む- 元のデザインに閲覧のみの権限で開発者に引き継ぐ場面から始めます。Dev Modeでデザインを開きます。
- 確認するレイヤーを選択します。
- 元のデザインを変更せずにWeblifyを使います。生成コードの確認は、引き継ぎ管理のあらゆる機能と同等ではありません。
よくある質問
始める前に知っておきたいこと。
Zeplin handoffではなくWeblifyを選ぶべきなのはどんなときですか？
既存のFigmaデザインを確認しながら、生成された実装の候補を必要とする開発者。
Zeplin handoffのほうが向いているのはどんなときですか？
Zeplinの、より幅広いデザイン引き継ぎのワークスペースとチームのプロセスに頼っているチーム。
乗り換える前に確認すべきことは何ですか？
生成コードの確認は、引き継ぎ管理のあらゆる機能と同等ではありません。必要に応じて共有の仕様書とレビュープロセスを維持し、生成されたコードは対象のフロントエンドプロジェクトで検証してください。
WeblifyのDev Modeでの確認に、開発者の編集権限は必要ですか？
Weblifyが対応するDev Modeのワークフローでは、元のデザインの編集権限がなくても確認できます。開発者の通常のFigmaアクセス権を確かめ、統合する前に生成された出力を確認してください。
アップグレードする前にWeblifyを試せますか？
はい。Figma CommunityからWeblifyをインストールすると、Proの無料トライアルを25回使えます。クレジットカードは不要です。
PDF見積書 ↗ 
