FigmaのDev Modeでのコードインスペクトを使うには何が必要ですか？

確認したいFigmaのレイヤーやコンポーネントを用意してください。Weblifyでの最初のステップ：Dev Modeでデザインを開く。

FigmaのDev Modeでのコードインスペクトで何ができあがりますか？

最終的にフレームワークに合わせたコードと実装の詳細ができあがります。最後のステップ：元のデザインを変更せずにWeblifyを使う。

アップグレードする前にFigmaのDev Modeでのコードインスペクトを試せますか？

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

Weblifyの機能

FigmaのDev Modeで実装コードを直接インスペクト。

開発者は、元のデザインファイルの編集権限がなくても、FigmaのDev ModeからWeblifyのコードをインスペクトできます。

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

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

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

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

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

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

実際の使い方

FigmaのDev Modeでのコードインスペクトを、
いまのワークフローに。

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

Weblify Pro

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

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

機能ガイドを読む

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

よくある質問

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

必要なもの、FigmaのDev Modeでのコードインスペクトで作れるもの、試す方法をまとめました。

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

仕上がりはフレームワークに合わせたコードと実装の詳細です。最後のステップ：元のデザインを変更せずにWeblifyを使う.

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