FRONT-END.AI​

For the Japanese translation, please see below.
日本語訳は下にあります。

This is a plugin for users of FRONT-END.AI, a developer-focused low-code platform.

🎉 Try FRONT-END.AI for Free!
Sign up here 👉 https://front-end.ai

🚀 What is FRONT-END.AI?

FRONT-END.AI is an AI-powered tool that accelerates initial coding by auto-generating HTML from design data.
Our patented "AI that understands design" (patents granted in the US, Japan, and China) enables highly advanced design interpretation.

The plugin for Visual Studio Code provides seamless editing of HTML code in your VS Code environment, streamlining the development process.

:white_check_mark:What can you do with the VS Code plugin?

"AI that understands design" automatically generates semantic, responsive HTML and partial CSS.

:large_blue_diamond:The plugin instantly generates clean, editable code directly in your VS Code environment based on complete design data uploaded from Figma.
:large_blue_diamond:The generated HTML can be freely edited and finalized in VS Code.

:sparkles:Feature

1. Excellent Design Adaptability
   • Powered by “AI that understands design”, it automatically detects structure in both template-based and highly original design comps - just upload your design and assets, no need to tidy up your layer structures.
2. Fastest Code Generation
   • Get production-ready code for your VS Code environment in as little as 15 seconds.
3. Readable HTML
   • Generates clean, structured HTML that’s easy for engineers to read and maintain.

:woman_technologist:How to use

1. Open the Figma plugin and export your design data. Save all files locally.

   1. Set up export settings for each layer in your design.
      
   2. Select Main Menu > Plugins > FRONT-END.AI.
      
   3. When the modal appears, click the Export button to download the ZIP file, then extract it.
      

2. Launch the FRONT-END.AI in VS Code and upload the files you saved locally.

   1. Click the FRONT-END.AI icon in the sidebar and log in.　　

   2. Click Upload your design and select the complete set of files exported via the Figma plugin (design comp, assets, and output.json file).
      

   3. Click Specify download destination and choose the directory where the generated files will be downloaded.
      

   4. Please make sure the design comp, assets, and output.json file are checked, then click Analyze.
      

3. HTML code is automatically generated, completing the initial implementation phase. You can now focus your time on more creative and meaningful development work.

（以下、日本語訳です）

FRONT-END.AI​

本拡張機能はFRONT-END.AI利用者向けプラグインです。

🎉 今すぐお試し！FRONT-END.AIでは、無料でトライアルをご利用いただけます。
アカウントのサインアップはこちらhttps://front-end.aiからお願いします。

🚀 FRONT-END.AIとは

FRONT-END.AIとは、デザインデータからHTMLコードを自動生成することで、初期のコーディング作業を大幅に効率化できる開発支援ツールです。 当サービスに搭載された**「デザインを理解するAI」は、アメリカ・日本・中国で特許を取得**しており、高精度なデザイン解析を実現しています。

FRONT-END.AIのVS Codeプラグインを利用すれば、VS Code上でAIにより生成されたHTMLコードの編集をシームレスに行うことができ、開発フローがよりスムーズになります。

​

:white_check_mark:FRONT-END.AIにできること

VS Code から「デザインを理解する AI」によりHTML/CSS*を自動生成

:large_blue_diamond:Figmaのデザインデータから「デザインを理解するAI」が構造を判別しHTMLを生成し、VS Codeに直接出力します。
:large_blue_diamond:出力されたHTMLをもとにVS Code上で自由に編集し、最終化させます。
（※cssは一部）

:sparkles:特徴

1. 優れた適応能力
   • テンプレートのようなデザインから、完全オリジナルなデザインまで、デザインカンプとアセットファイルを読み込めば、「デザインを理解するAI」が構造を判別します。
   • デザインデータの構造をきれいにする必要はありません。
2. 素早いコード出力
   • VS Code向けのコードは、最短15秒で自動生成されます。
3. 理解しやすいコード出力
   • エンジニアにとって、可読性の高く、構造的なHTMLが書き出せます。 ​

:woman_technologist:使い方

1. Figmaプラグインからデザインデータの書き出しを行い、ローカルに保存します。

   1. 各レイヤーでアセットの書き出しを設定します。
      

   2. メインメニュー>プラグイン>FRONT-END.AIを選択してください。
      

   3. モーダルが開いたら、書き出すボタンを押下し、zipファイルをダウンロードして解凍してください。
      

2. VS CodeからFRONT-END.AIを開き、ローカルに保存したファイルををアップロードします。

   1. サイドバーのFRONT-END.AIアイコンを押下し、ログインします。
      

   2. Upload your designを押下し、Figmaプラグインで書き出したファイル一式（デザインカンプ、アセット、output.jsonファイル）を選択します。
      

   3. Specify download destinationを押下し、生成されたファイルをダウンロードするディレクトリを指定します。
      

   4. デザインカンプ、アセット、（output.jsonファイル）の左にチェックが入っているのを確認したらAnalyzeを押下します。
      

3. HTMLが自動生成され、初期コーディングが完了します。削減された時間でよりクリエイティブな開発体験を実現できます。