Figma × Locofyでデザインから自動でコードを作成する
この記事で学べること
- とりあえずFigmaで作ったデザインを、Locofyを使用し自動でコード生成する
※細かい説明は省いています。
Locofyとは
LocofyとはFigmaでデザインしたものを、超高速にコードへ変換できるコード自動生成プラグインです。
React、React Native、HTML/CSS、Next.jsといった複数種類のコードに変換することができます。
使ってみた
-
Figmaでデザインを書き起こしました。なお、私はデザイナー職ではありませんので、デザイン力のかけらもありません。ご了承ください。
以下、Figmaでデザインしたもの。
-
次にFigmaのプラグインでLocofyを検索します。Locofy FREE BETAというプラグインが出てくるのでクリック。
-
クリックすると、サインアップを求められます。登録してください。
-
登録が完了したらFigmaに戻ります。コードに変換したいデザイン部分を選択し、Locofyの実行ボタンをクリックします。
その後、以下の画面に移ります。上部のプルダウンを開き、「+ Create New」をクリックし、変換コードの設定を作成します。Type Project Nameを入力する横でフレームワークの種類も選ぶことができます。
設定できる項目
- フレームワーク（React、HTML/CSS、Next.js、Gatsby、React Native）
- 言語（TypeScriptかJavaScript）
- スタイル（CSSかTailwindかその他諸々）
- その他細かい調整
今回はReact・TypeScript・Tailwindに設定し変換を行います。
- 設定が完了したら、右下のView Codeをクリックします。次の画面でも
※この画面でも詳細設定ができるみたいですが、今回は割愛します。
次の画面です。FrameはSelected framesを選択し、青いボタンをクリック。
-
クリックするとコード変換準備できましたという画面が出ますので、青いボタンをクリックします。
-
自動でブラウザが開き、コード生成された画面に移ります。
※ブラウザでLocofyへのログインが求められるかもしれません。
ログインが済んでいると以下の画面が開き、デザイン通りの実装がされています。
コードも確認することができるため、コピペで使用することもできます。
まとめ
今回はとりあえずデザインから自動でコード生成してみるということを説明しました。
細かい説明は省略しています。
使ってみて、Locofyというプラグインはコンポーネントの作成などに向いているのかなと感じました。
Discussion