Weblify Figmaプラグインのインストール

1. 任意のFigmaファイルを開きます。
2. Figma下部のツールバーにあるActionsアイコンをクリックします。
3. Plugins & Widgetsタブをクリックして、結果をFigmaプラグインに絞り込みます。
4. 検索バーでWeblifyを検索します。
5. 検索結果のWeblifyをクリックします。
6. Saveボタンをクリックして、Weblifyプラグインをインストールします。

Figma Organizationに所属するFigmaユーザーは、承認済みのプラグインしかインストールできない場合があります。一部のFigmaプラグインをインストールできない場合は、社内のFigma Organizationの管理者に連絡して、Weblifyプラグインを承認してもらってください。

Weblify Figmaプラグインの実行

Weblify Figmaプラグインをインストールしたら、次の手順でFigmaファイル内でプラグインを実行します。

1. Figmaファイルのページキャンバス上の任意の場所を右クリックします
2. Plugins ▶ メニュー項目にマウスカーソルを合わせます
3. Saved plugins ▶ メニュー項目にマウスカーソルを合わせます
4. Weblifyプラグインのメニュー項目をクリックします

FigmaファイルでWeblifyプラグインを一度実行すると、次回からはFigma右側の列（Pluginの小見出しの下）にあるWeblifyアイコンをクリックして、すばやく再起動できます。

Figmaファイルでプラグインを実行できるのは、そのファイルへのEdit権限を持つFigmaユーザーだけです。View権限しかない場合、そのファイルではFigmaプラグインを一切実行できません。

Weblifyのインストールと有効化

Figmaプラグインのインストールと実行

Figma内でWeblifyを実行する方法

Weblify Proを有効にする

Proライセンスキーの購入方法と使い方

Weblifyを使う

Webサイトを作成

テンプレート、セクション、要素から編集可能なWebページを作成します

Webサイトをインポート

無料のChrome拡張機能で、ページや選択した要素をコピーします

監査とエクスポート

静的なHTML・CSSのWebサイトを検証してダウンロードします

Figmaレイヤーのインスペクト

選択したレイヤーからHTML、Tailwind、React、Vueのコードを生成します

よくある質問

Weblifyのトラブルシューティング

よくある問題とその対処法

Weblifyのセキュリティ

Weblifyの仕組みの詳細

領収書

メールの領収書とPDFの請求書を探す

請求・お支払い

Proサブスクリプションを管理する

ライセンスのシート管理

キーに紐づけるFigmaユーザーを管理する

Weblifyの無料版とPro

無料版とProの機能を比較する

Weblifyの機能

• テンプレート、セクション、要素、レスポンシブレイアウトから、編集可能なWebページを作成できます。
• 無料のChrome拡張機能で、公開サイトやログインが必要なサイトをFigmaにコピーできます。
• 生成したWebサイトの出力を、さまざまなビューポート幅でプレビューできます。
• Weblifyのページを監査し、静的なHTML・CSSのWebサイトとしてエクスポートできます。
• 選択したFigmaレイヤーを、HTML/CSS、Tailwind、React、Vueのコードとしてインスペクトできます。
• 生成したコードをコピーしたり、画像アセット付きのコンポーネントZIPをダウンロードしたりできます。
• FigmaのAuto Layout、折り返し、最小・最大のレイアウトプロパティに対応しています。
• FigmaのDev ModeからWeblifyのコードインスペクトツールを使えます。