Plasmic - デザインとReactコードを橋渡しするビジュアルビルダー

はじめに

「デザイナーが作ったFigmaのデザインを、Reactコンポーネントに手作業で移植する」——このプロセスに時間を溶かした経験がある方は多いのではないでしょうか。デザインの微調整のたびにエンジニアへ差し戻しが発生し、開発速度がボトルネックになってしまうケースもよくあります。

Plasmicは、このデザインとコードの間にある溝を埋めるためのビジュアルビルダーです。ドラッグ&ドロップでUIを構築しながら、既存のReactコードベースとシームレスに統合できる点が最大の特徴で、非エンジニアのメンバーでもランディングページやコンテンツの更新を任せられるようになります。

Plasmicとは

Plasmicは、React向けのオープンソースなビジュアルビルダーです。単なるノーコードツールとは異なり、独自のReactコンポーネントやデータソース、既存のデザインシステムを取り込んだ上で、非開発者でも編集可能なUIを構築できる「コードベース統合型」の設計になっています。

主な特徴

ビジュアル編集とコードの共存 - ドラッグ&ドロップでレイアウトを組みつつ、registerComponent で自作Reactコンポーネントをエディタに取り込めます
豊富なデータ連携 - Supabase、Contentful、Shopifyなどの主要なデータソースに加え、HTTPやGraphQL APIとも接続できます
チーム協業機能 - 非開発者への編集権限付与や、ブランチ機能・複数人同時編集モードを備えており、デザイナーとエンジニアが同じプロジェクト上で作業できます

インストール

Next.jsプロジェクトで利用する場合は、専用のローダーパッケージをインストールします。

npm install @plasmicapp/loader-nextjs

Reactの一般的なプロジェクトで使う場合は、以下のパッケージを利用します。

npm install @plasmicapp/loader-react

基本的な使い方

まず、Plasmicのプロジェクトを初期化する設定ファイルを用意します。

// plasmic-init.ts
import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: "YOUR_PROJECT_ID",
      token: "YOUR_PUBLIC_API_TOKEN",
    },
  ],
  preview: false,
});

次に、PlasmicRootProvider と PlasmicComponent を使って、ビジュアルエディタ上で作成したページやコンポーネントをレンダリングします。

// pages/index.tsx
import {
  PlasmicComponent,
  PlasmicRootProvider,
} from "@plasmicapp/loader-nextjs";
import { PLASMIC } from "../plasmic-init";

export default function IndexPage() {
  return (
    <PlasmicRootProvider plasmic={PLASMIC}>
      <PlasmicComponent component="LandingPage" />
    </PlasmicRootProvider>
  );
}

これだけで、Plasmicのエディタ上で組んだレイアウトがNext.jsアプリ内にそのまま表示されます。

実践的なユースケース

自社で作り込んだReactコンポーネントを、そのままPlasmicのエディタに取り込んで再利用することもできます。たとえば、既存のヒーローセクション用コンポーネントを登録してみましょう。

// components/HeroSection.tsx
import { PLASMIC } from "../plasmic-init";

type HeroSectionProps = {
  children?: React.ReactNode;
};

export default function HeroSection({ children }: HeroSectionProps) {
  return <div className="hero-section">{children}</div>;
}

PLASMIC.registerComponent(HeroSection, {
  name: "HeroSection",
  props: {
    children: "slot",
  },
});

こうしてコンポーネントを登録しておけば、デザイナーやマーケターがPlasmicのエディタ上でこの HeroSection をドラッグ&ドロップで配置し、テキストや画像を自由に差し替えられるようになります。ランディングページのA/Bテストや、キャンペーンごとのコンテンツ更新をエンジニアの手を介さずに回せる点は、リリースサイクルの短縮に直結する大きなメリットです。

社内向けの管理画面やSaaSの顧客ポータルのように、頻繁にUIの調整が発生するプロダクトでも、Plasmicを使えばエンジニアはデータ連携やロジックの実装に専念し、画面のレイアウト調整はデザイナーに任せるという分業がしやすくなります。