FRONT-END.AI

About this plugin

FRONT-END.AIユーザー専用プラグインです。

FRONT-END.AIを利用するために必要な情報をダウンロードできます。

■ FRONT-END.AIとは

FRONT-END.AIはWebエンジニア向けのローコードサービスで、デザインデータのレイヤー構造を修正することなく、デザインカンプ(jpg)とアセット一式をアップロードすることで、日米特許取得済の「デザインを理解するAI」がhtml / css ※を自動生成するWebサービスです。ユーザーは生成された結果を必要に応じて、Web上で解析結果を編集することができ、コードをダウンロードできます。

本プラグインを用いて、書き出したレイヤー情報データと一緒にカンプ、アセットファイルをアップロードすることでより正確なテキストや画像を取得することができます。従来から提供している「デザインを理解するAI」と組み合わさることにより、生成されるhtmlの精度も大幅に向上いたします。

（※cssは一部）

※本プラグインはFRONT-END.AI契約者向けプラグインです。

FRONT-END.AI をご利用になりたい方は、

https://front-end.ai からお申し込み下さい。

■ 使い方

1. Figma上で、画像として書き出したいレイヤーに書き出し設定をします。
2. フレームを選択し、FRONT-END.AIプラグインを起動し、zipファイルをダウンロードします。
3. zipファイルを解凍します（解凍するとカンプと各アセットとoutput.jsonが格納されています）。
4. FRONT-END.AIにログイン後、新規プロジェクト作成にて、output.json(2)とカンプと各アセット(3)をFRONT-END.AIにアップロードしてください。