FigmaデザインからReactコンポーネントを生成するツール clapyを試してみた

2022/12/03に公開

はじめに

この記事は CODE BASE OKINAWA Advent Calendar 2022 2日目の記事です。

今回は最近気になっていた Figmaのデザインからreactのコードを生成するツールclapyを試してみたことについて書きました。
思っていたよりも生成されたコードの精度が高くて便利そうだったので紹介したいと思います。

https://clapy.co/

clapyとは

Figmaのデザインから reactのコードを自動生成する Figma Pluginです。

インストールや使い方の詳細は公式ドキュメントにおまかせしますが、通常のFigmaのプラグインと同じようにインストールするだけで、簡単に利用することができます。

https://docs.clapy.co/get-started/install-the-plugin

試してみる

さっそく試してみます。まずコードを生成する元となるFigmaのデザインデータが必要です。

Figmaでデザインされたデータならなんでもいいのですが、僕の手元の環境にデザインは作ってみたものの時間がなくて実装できてないポートフォリオサイトのデザインがあったので、今回はこちらを使って試してみます。

デザインとデザインデータの構造は以下のようになっています。

プラグインを実行し、Generate Codeボタンをクリックします。

Generate Codeボタンを押すと、コードが生成されます。デフォルトでは、codesandbox で生成されたコードを確認できます。若干おかしいところもありましたが、ほとんど忠実に再現できててすごい。

https://j4vuze.csb.app/

https://codesandbox.io/s/j4vuze

生成されたコードを読んでみる

生成されたコードの例

codesandboxから生成されたコードの一部を抜粋してみました。デザインの構造的には一番上のレイヤーにあたる部分のコンポーネントのコードです。

// /src/components/TopSP/TopSP.tsx
import { memo } from 'react';
import type { FC } from 'react';

import resets from '../_resets.module.scss';
import { Card } from './Card/Card';
import { HeaderSP } from './HeaderSP/HeaderSP';
import { KeyboardArrowDownIcon } from './KeyboardArrowDownIcon';
import classes from './TopSP.module.scss';

interface Props {
  className?: string;
}
/* @figmaId 1:28 */
export const TopSP: FC<Props> = memo(function TopSP(props = {}) {
  return (
    <div className={`${resets.clapyResets} ${classes.root}`}>
      <HeaderSP
        className={classes.headerSP}
        classes={{ dSC008701: classes.dSC008701, maskGroup: classes.maskGroup }}
        swap={{
          keyboardArrowDown: <KeyboardArrowDownIcon className={classes.icon} />,
        }}
        text={{
          about: <div className={classes.about}>Top</div>,
        }}
      />
      <div className={classes.frame78}>
        <Card
          className={classes.card}
          classes={{ _60f95161b382b3c00f3b3057_80_ca: classes._60f95161b382b3c00f3b3057_80_ca }}
        />
        <Card
          className={classes.card2}
          classes={{ _60f95161b382b3c00f3b3057_80_ca: classes._60f95161b382b3c00f3b3057_80_ca2 }}
          text={{
            about: <div className={classes.about2}>History</div>,
          }}
        />
        <Card
          className={classes.card3}
          classes={{ _60f95161b382b3c00f3b3057_80_ca: classes._60f95161b382b3c00f3b3057_80_ca3 }}
          text={{
            about: <div className={classes.about3}>Skill</div>,
          }}
        />
      </div>
    </div>
  );
});

生成されたコードとデザインデータの構造を比べてみるとわかりますが、Figmaのデザインデータの各要素がそのまま綺麗にHTMLの構造と一致するようになっており、コンポーネント名前もFigmaの要素と一致するようになっています。

コンポーネントとコンポーネントからインスタンスを作って少しカスタマイズしたデザインがある場合、生成されたコードはコンポーネント一つとカスタマイズした部分がpropsでオーバーライドできるようになっているようで、便利そうでした。

そのほか、生成されたコードの構造やコンポーネントのコードの詳細については、ドキュメントのTHE GENERATE GUID に詳細が書かれています。

https://docs.clapy.co/the-generated-code/the-project-structure

https://docs.clapy.co/the-generated-code/components

https://docs.clapy.co/the-generated-code/instances

Frameの命名をいい感じにするプラグイン

生成されたコードを眺めていると、frame78のような名前のコンポーネントやクラス名があるのがわかります。これはFigmaのデザインデータのFrameの名前がそのまま生成したコードに反映された状態なのですが、Frameの命名をあらかじめわかりやすい名前に定義しておけば、生成されるコードにもそれが反映されます。

わかりやすい命名でコードが生成されて欲しいので、Frameの命名もいい感じに設定してあげると良さそうですが、既に命名されてないフレームがたくさんあった場合、それを修正するのはめんどくさそうです。調べてみると、AIを使ってFrameの命名をいい感じにつけてくれるプラグインがあったので、これも合わせて使ってみると便利そうだと思いました。

https://www.figma.com/community/plugin/1160642826057169962/Figma-Autoname

おわりに

これまでに、Figma to React のツールをいくつか試してみたことがあったのですが、今回使った Clapyは今まで触ったFigma to React のツールでかなり精度が高い気がしました。便利。

利用プランについて、フリープランだとコードの生成が月3回までの制限があるようで、フリープランの次のプランがプロフェッショナルプランで生成の制限回数なしで月99ドルするようで、個人で使うには結構ハードルが高い印象でした。(個人でもいい感じに使えるようになるプランに期待)

ドキュメントの GENERATE GUIDのページに、コードの自動生成の仕組みについていろいろ面白いことが書かれてそうだったので、時間ある時改めて読んでみようと思います。

GitHubで編集を提案

Discussion