---
title: "新しいRevenueCat Figmaプラグインで、Figmaデザインを即座にペイウォールへ変換"
description: "ペイウォールのバリエーションを、これまでにないスピードで作成・エクスポート・反復できます。"
language: "jp"
publishedAt: "2025-11-27T18:52:35Z"
updatedAt: "2025-11-27T18:52:35Z"
authors:
  - name: "Charlie Chapman"
    url: "https://www.revenuecat.com/jp/blog/author/charlie-chapman"
category: "[ エンジニアリング ]"
categoryUrl: "https://www.revenuecat.com/jp/blog/engineering"
readingTime: 1
canonical: "https://www.revenuecat.com/jp/blog/engineering/revenuecat-figma-plugin"
---

# 新しいRevenueCat Figmaプラグインで、Figmaデザインを即座にペイウォールへ変換

ペイウォールのバリエーションを、これまでにないスピードで作成・エクスポート・反復できます。

## Table of contents

- [FigmaフレームからRevenueCatペイウォールへ](#figmarevenuecat)
- [なぜ重要なのか](#section)
- [チュートリアル動画を視聴し、ドキュメントを読む](#section-2)

高いコンバージョンを生むペイウォールのデザインは、たいていFigmaから始まります。デザインチームが日常的に作業し、試し、反復している場所だからです。RevenueCatのPaywalls Editorは、そうしたFigmaデザインを素早く、簡単に再現できるように作られていますが──その工程自体をなくせたらどうでしょうか？

今日、まさにそれを実現します。

新しく公開された [RevenueCat Figmaプラグイン](https://www.figma.com/community/plugin/1571207414894772119) を利用することで、デザインからライブのペイウォールへ一瞬で移行できるようになりました。Auto Layoutを使用したFigmaフレームを、1回のエクスポートでRevenueCat内の完全編集可能なペイウォールへ直接変換できます。

## FigmaフレームからRevenueCatペイウォールへ

プラグインをインストールすると、次のことが可能になります：

- **1つのFigmaファイルから複数のペイウォールをエクスポート**：迅速な反復や、A/Bテスト用のバリエーションをまとめて準備するのに最適です。
- **レイアウトとスタイルを正確に保持**：テキストはテキストとして、画像は画像として、フレームはスタックとして──すべて自動で正しくマッピングされます。
- **主要コンポーネントを自動検出**：*Button、Purchase Button、Package* などのレイヤー名は、それぞれ対応するRevenueCat Paywallコンポーネントに変換されます。
- **デザインをそのままPaywall Editorへ送信**：グロースチームやCXチームは、コピー調整、プロダクト差し替え、ローカライズ、実験のセットアップなどを、追加のデザインやエンジニアリング作業なしで行えます。
このワークフローにより、デザイナーはアプリに自然に溶け込む、ブランドらしいリッチなペイウォールをFigmaで自由に作り込みつつ、プロダクトチームはRevenueCat内で素早く反復できる柔軟性を得られます。

## なぜ重要なのか

多くのチームにとって、ペイウォールの制作はFigmaから始まります。デザイナーは、エンジニアリングやグロースチームが関わるよりも前に、レイアウト、ビジュアルの階層、ブランド表現、コンバージョンを意識したバリエーションを作り込みます。しかしこれまでは、そのデザインをライブのペイウォールに反映するには、Paywall Editorで手作業で再構築する必要がありました。

新しいプラグインは、その工程を完全に取り除きます。

これからは、デザイナーが普段作業している場所であるFigmaのままペイウォールを構築でき、小さなコピー調整から大幅なリデザインまで、あらゆるバリエーションを数秒でエクスポートできます。一方、PMやグロースチームは、エクスポートされたデザインをすぐに実験に変換し、成果を比較し、追加のデザインファイルなしで更新を公開できます。

より速く、よりシンプルで、よりコラボレーションしやすい──そんな新しいペイウォール反復のアプローチです。

> **Tip:**
> [Paywalls.com](https://www.paywalls.com/)では、実際のペイウォール例を閲覧できます。UI要素、アプリカテゴリ、トレンドや高成長のペイウォールなどでフィルタリングしながら、さまざまなスクリーンを参照できます。

## チュートリアル動画を視聴し、ドキュメントを読む

フロー全体を最初から最後まで確認したい場合は、完全なウォークスルーをご用意しています：

**フル動画チュートリアル**

[Video](https://www.youtube.com/watch?v=dhUADHmZMjg)

**ドキュメント**
[https://www.revenuecat.com/docs/tools/paywalls/creating-paywalls#importing-from-figma](https://www.revenuecat.com/docs/tools/paywalls/creating-paywalls#importing-from-figma)

**Figma Pluginを入手する**
[https://www.figma.com/community/plugin/1571207414894772119](https://www.figma.com/community/plugin/1571207414894772119)

高品質でブランドらしいペイウォールを最速で作る方法──それは、デザイナーがすでに使っているツールをそのまま使うことです。プラグインを試し、複数のバリエーションを実験し、これまで以上のスピードでペイウォールを公開しましょう。