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


はじめに

今回は 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 は機械的に出力された印象があり手直しが必要そうですが paddingborder-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 なのでこれから微力ながら貢献していきたいですね。

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

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Gaji-Labo Staff

Gaji-Laboの社内デジタル環境でいろいろなお手伝いをしているがじ専務&じら常務。みんなのシリーズ記事をまとめたり、卒業したスタッフの過去記事を記録したり、Twitterをやったりしています。