Figmaでのライブコードプレビューを使うには何が必要ですか？

確認したいFigmaのレイヤーやコンポーネントを用意してください。Weblifyでの最初のステップ：選んだFigmaレイヤーをインスペクトする。

Figmaでのライブコードプレビューで何ができあがりますか？

最終的にフレームワークに合わせたコードと実装の詳細ができあがります。最後のステップ：各ターゲット幅で結果を確認する。

アップグレードする前にFigmaでのライブコードプレビューを試せますか？

はい。WeblifyにはProの無料トライアルが25回付いています。クレジットカードは不要で、トライアル後も無料の機能を引き続き使えます。

Weblifyの機能

Figmaでコードをインスペクトしながら、描画結果を確認。

生成されたWebコードをWeblify内でさまざまなビューポートサイズで描画し、引き継ぎやダウンロードの前に結果を確認できます。

Weblify Proを試す
Proの無料トライアル25回付き

インストールセキュリティ機能ガイド

無料でインストールできます。Proのトライアルが25回付いていて、クレジットカードは不要。困ったときは担当者がすぐにサポートします。

Thanks so much, Adam!... saved me many, many hours of manual work.

世界トップクラスの企業のチームが利用しています

Weblifyを試してみませんか？ まずは25回の無料Proトライアルから。クレジットカードは不要です。 Weblifyを無料で試す → 料金を見る

実際の使い方

Figmaでのライブコードプレビューを、
いまのワークフローに。

実装を始めるのに、寸法やスクリーンショット以上の情報が必要なデザイナーと開発者のために作られています。

Weblify Pro

開発で使う言語でデザインを確認。

Weblifyは、選択したFigmaのレイヤーをコードとレンダリングされたプレビューに変換し、引き渡し前に確認できるようにします。開発者はデザインを一から書き起こすのではなく、目的のフレームワークで作業を始められます。

機能ガイドを読む

準備するもの: 確認したいFigmaのレイヤーやコンポーネント
仕上がり: フレームワークに合わせたコードと実装の詳細
こんな用途に: デザインからコードへの引き渡しを進めるデザイナーと開発者
利用できるプラン: Weblify Pro for Figma

よくある質問

始める前に知っておきたいこと。

必要なもの、Figmaでのライブコードプレビューで作れるもの、試す方法をまとめました。

まず確認したいFigmaのレイヤーやコンポーネントを用意します。Weblifyで機能ガイドに沿って進めてください。最初のステップ：選んだFigmaレイヤーをインスペクトする.

仕上がりはフレームワークに合わせたコードと実装の詳細です。最後のステップ：各ターゲット幅で結果を確認する.

はい。Figma CommunityからWeblifyをインストールすると、Proの無料トライアルを25回使えます。クレジットカードは不要です。