Figma から React のコードを生成する！「Figma to HTML, CSS, React & more!」

2022.6.7

学びの共有

はじめに

今回は Figma から React のコードを生成できるプラグイン「Figma to HTML, CSS, React & more!」について紹介し、実際に生成されたコードがどのようなものなのか見てみましょう。

Figma からコード生成できるプラグインは「Anima – Export to HTML, React & Vue code」や「Quest – Figma to React Components, HTML pages」などがありましたが、React のコード生成に関しては課金する必要があったため検証の対象外としました。

使ってみた

それでは実際にコード生成までの流れをご紹介します。

まずはプラグインを Figma にインストールしたら、Figma でプロジェクトを開きます。今回はデモ用に Essential UI – Figma Ui Kit というテンプレートを使わせてもらいます。

適当なコンポーネントを右クリックしてメニューを開きます。今回はベーシックなボタンから React コードを生成してみましょう。メニューから「Plugins > Figma to HTML…」を選択します。

プラグインのメニューが開きます。今回は特にカスタマイズは必要ないので「Generate Code」をクリックしましょう。ブラウザが開き https://builder.io/ に遷移します。

先ほど選んだボタンがインポートされています。右上の「<>」のボタンからコードを生成できます。

「Get code」ボタンを押すと下からウィンドウが出てきました。React のほか Vue や Web Components、SolidJS のタブが存在し、かなり幅広くの UI ライブラリに対応していることがわかります。

React + styled-jsx でスタイリングされたコンポーネントのコードを見てみましょう。letter-spacing は機械的に出力された印象があり手直しが必要そうですが padding や border-radius まで細かい数値が一括で出力できるのは可能性を感じますね。

export default function MyComponent(props) {
  return (
    <>
      <div className="div">Button</div>
      <style jsx>{`
        .div {
          display: flex;
          flex-direction: column;
          max-width: 50px;
          justify-content: flex-start;
          border-radius: 5px;
          padding-top: 15px;
          padding-bottom: 15px;
          padding-right: 40px;
          padding-left: 40px;
          background-color: rgba(35, 166, 240, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
          line-height: 28px;
          letter-spacing: 0.20000000298023224px;
          text-align: center;
          font-family: Montserrat, sans-serif;
        }
      `}</style>
    </>
  );
}

おまけ

ちなみに LP ページ全体からコード生成できるか試してみました。

数十秒待ったあとエラーになってしまいました。

> Oh no, there was an error! To troubleshoot, if you are importing a whole page, try importing a smaller part of the page at a time, like one section or even one button

ページ全体ではなくセクションやボタンのようなページの小さな部分をインポートするように、とのことです。

おわりに

今回は Figma のコンポーネントから React コードを生成するまでをご紹介しました。現状、デザイナーから渡された Figma から余白やフォントサイズ、色などをインスペクタで読み取って、エンジニア自ら実装に起こす必要があるので、ここが省力化できるとより創造的な作業にリソースを割けそうです。あと「Figma to HTML, CSS, React & more!」は OSS なのでこれから微力ながら貢献していきたいですね。

以上、お読みいただきありがとうございました。