「FRONT-END.AI」がAdobe XD連携を強化 書き出しを効率化するプラグインの提供を開始

  • このエントリーをはてなブックマークに追加
2022/10/31 17:00

 Tsunagu.AIは、フロントエンド開発におけるコーディングをAIによって自動化するローコードサービス「FRONT-END.AI」のAdobe XD連携を強化し、利用ユーザー向けにアセット書き出し効率化の XDプラグインとHTML srcset属性の自動生成機能を提供開始したことを発表した。

 FRONT-END.AIはウェブエンジニア向けのローコードサービスで、デザイナー作成のデザインカンプ(jpg)とアセットをアップロードすることで、独自開発の「デザインを理解するAI」が解析し、html/cssを自動生成するサービス。ユーザーは自動生成のコードからコーディングを開始することで、初期工程を削減できる。

 さらに、Adobe XDのデザインデータを利用することで、正確なテキストや画像の取得などhtmlの大幅な精度向上、フォントサイズなどのcssプロパティ自動生成が可能となる。

リリース機能概要

 FRONT-END.AIユーザー向けに提供しているAdobe XDでのアセット書き出しとhtmlのコーディングを効率化するプラグインの最新版をリリースした。同リリースにより、アセットの拡張子と書き出し倍率を個別指定したうえで一括書き出し、さらにsrcset属性も自動生成できるようになった。

1)画像ごとに拡張子を指定

2)拡張子ごとに書き出し倍率を指定し一括書き出し

3)書き出した画像へのパスをsrcset属性として自動生成

 これによって、従来のhtml生成機能と組み合わせることにより、Adobe XDを使ったコーディング業務の工数圧縮を実現した。