Deutsch 
Español 
Français 
한국어 
Polski 
Português 
Weblify vs Locofy
Figmaからコードへの直接の引き継ぎに、Locofyの代替ツール。
Weblifyで、Figma内でのコード確認とダウンロードに絞ったワークフローを使えます。選択したレイヤーの出発点を開発者に渡しつつ、プロジェクトの設計やコンポーネントの統合は既存のツールで進められます。
無料でインストールできます。Proの無料トライアル25回付きで、クレジットカードは不要です。
Thanks so much, Adam!... saved me many, many hours of manual work.
LocofyとWeblify、どちらを選ぶ？
ワークフローを比較して、次のプロジェクトに合ったツールを選びましょう。
| Locofy |  Weblifyなら |
|---|---|
| コンポーネントライブラリを対応付ける Locofyは、Figmaコンポーネントをカスタムのコードコンポーネントに対応付けられます。 | コードの出発点を使う Weblifyの対応出力を確認したうえで、本番のコンポーネント規約を適用します。 Weblifyのガイドを読む |
| 生成コードを開発につなげる Locofyは、コードのエクスポートとCLI連携のワークフローを提供します。 | Figmaからコピーまたはダウンロード デザインファイル内で、Weblifyを使ってコードを直接引き継げます。 Weblifyのガイドを読む |
| より幅広い生成ワークフローを使う Locofyは、デザインの準備と実装をつなげます。 | 選択したレイヤーの確認に集中 対象の幅でコードをプレビューし、アプリケーションの挙動はエンジニアリングのワークフローに任せます。 Weblifyのガイドを読む |
25回の無料Proトライアル付き。クレジットカードは不要です。
自分のファイルでWeblifyを試すワークフローを選ぶ
作業に合ったツールを選びましょう。
実際の使い方
Weblifyでできること。
ワークフローを支える機能を、デモと設定ガイド付きで紹介します。
どのFigmaレイヤーもHTML、Tailwind、React、Vueでインスペクト。
Figmaレイヤーを選択すると、生成されたHTML、Tailwind、React、Vueのコードをデザインの横でインスペクトし、実装をコピーまたはダウンロードできます。
- HTMLとCSSのインスペクト
- Tailwindでの出力
- ReactとVueでの出力
Figmaでコードをインスペクトしながら、描画結果を確認。
生成されたWebコードをWeblify内でさまざまなビューポートサイズで描画し、引き継ぎやダウンロードの前に結果を確認できます。
- ブラウザでのライブレンダリング
- レスポンシブプレビュー
- Figmaデザインの横でプレビュー
元のデザインをアップロードせずにFigmaのコードをインスペクト。
Figmaレイヤーをインスペクトし、生成されたファイルをダウンロードできます。元のデザインデータはWeblify内にとどまります。
- デザインの外部保存なし
- Figma内でのインスペクト
- ローカルへの直接ダウンロード
実際のプロジェクトで試す
ワークフローをWeblifyに移行しましょう。
チームのプロセスを変える前に、代表的なファイルで試してみましょう。
Weblify Pro乗り換える前に確認すること。
Locofyは、より幅広いデザインシステムとの統合をカバーしています。Weblifyの出力は開発者による調整が必要で、すべてのFigmaコンポーネントを既存の本番ライブラリに自動で対応付けるわけではありません。
ワークフローガイドを読む- 引き継ぎの要件を代表するコンポーネントまたは画面を決めます。
- Weblifyで、目的の形式の対応出力を確認し、プレビューします。
- 生成されたファイルをレビューし、コードベースと既存のコンポーネントに統合します。
よくある質問
始める前に知っておきたいこと。
LocofyではなくWeblifyを選ぶべきなのはどんなときですか？
より大きくつながった生成ワークフローではなく、レイヤー単位の対応コードとライブプレビューが必要なチーム。
Locofyのほうが向いているのはどんなときですか？
Locofyのコンポーネントマッピングとコード統合のワークフローを使いたいエンジニアリングチーム。
乗り換える前に確認すべきことは何ですか？
Locofyは、より幅広いデザインシステムとの統合をカバーしています。Weblifyの出力は開発者による調整が必要で、すべてのFigmaコンポーネントを既存の本番ライブラリに自動で対応付けるわけではありません。
アップグレードする前にWeblifyを試せますか？
はい。Figma CommunityからWeblifyをインストールすると、Proの無料トライアルを25回使えます。クレジットカードは不要です。
PDF見積書 ↗ 
