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

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

新しく公開された RevenueCat Figmaプラグイン を利用することで、デザインからライブのペイウォールへ一瞬で移行できるようになりました。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やグロースチームは、エクスポートされたデザインをすぐに実験に変換し、成果を比較し、追加のデザインファイルなしで更新を公開できます。

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

Paywalls.comで実際のペイウォール例からインスピレーションを得る

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

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

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

フル動画チュートリアル

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

Figma Pluginを入手する
https://www.figma.com/community/plugin/1571207414894772119

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