AnimaでのDesign-to-Codeにおける生成AIの導入1 min read

Animaの最新のAIリリースと今後の展開

AnimaはAIを搭載したDesign-to-Codeプラットフォームで、FigmaやXDを動作可能かつピクセルパーフェクトなコードに変換することができます。
バックグラウンドでは、機械学習要素によってレイヤーの自動名称設定とコードのクリーニングが既に行われているため、エンジニアは2倍速く構築を行うことができます。

Animaはdesign-to-code分野の先駆者で、70万回以上のインストール数を誇り、デベロッパーコミュニティ内でNo.1のFigmaアドオンになっています。AnimaはAmazon、Cisco、Samsung、Deloitteなどの業界大手企業で利用されているサービスです。「AnimaのおかげでUIのコーディング時間が50%も短くなった」という嬉しい声もユーザーから寄せられています。

コーディングの慣習におけるロングテール減少

これまで、当社ではハイエンドのReactとHTMLコードに集中的に取り組んできました。Animaのコードクオリティは、ピクセルパーフェクトで、クリーンで、メンテナンスがしやすいという点で、他の追随を許しません。

当社では、過去12ヶ月間で、1000以上の研究開発チームとZoomで打ち合わせを行いました。その結果、市場全体の44％が新規プロジェクトにReactを選択しているにもかかわらず、フロントエンドの技術スタックはバラバラでした。1000のチームには複数のリポジトリがあり、それぞれが独自の慣習を持っていました。

生成AIの導入

Animaの最先端のコード生成エンジンと生成AIの機能を組み合わせれば、より多くのフレームワークで、より速く開発ができ、高性能のコードを維持することができます。

LLMを使用することで、さらに様々なコーディングの慣習に対応することができ、サービスをより迅速に拡大することができるのです。

Animaにはビジュアルテストが組み込まれています。Figmaはレイアウトからスタイル、コンポーネント、インタラクションまでサポートしており、すべてすぐに活用することができます。

現在における生成AI導入の意義

現時点で、Figma用Animaのユーザーは、Vue/CSS、Vue/Tailwind（Vue 2とVue 3の両方）、React/Styled-componentsにJavaScriptまたはTypeScriptでデザインをエクスポートすることができます。このようなフレームワーク、スタイル、慣習のマトリックスは、今後も急速に広がっていくでしょう。

当社では人工知能の力を用いてフレームワークのサポートを拡大し、デベロッパーのフロントエンド開発のニーズにさらに幅広く対応できるよう、準備を行っています。つまり、Angular、Ember.js、Backbone.jsのような確立されたフレームワークを使用している場合でも、Svelte、Meteor、Aureliaのような新しい技術を試している場合でも、当社の製品によってお客様のサポートが可能です。フロントエンド開発の状況は多様であることをよく理解しており、AI主導のアプローチにより、あらゆる規模・複雑さのプロジェクトに対応できることを保証します。

さらに、シンプルさと効率性を求める人向けのMithril、Alpine.js、Stencilのようなフレームワークを使用している場合でも、AIによって強化されたフロントエンドのコード生成を使用するメリットがあります。当社では、AIを活用して製品の機能を継続的に強化し、さまざまなフレームワークをサポートすることで、確実にフロントエンド開発環境におけるイノベーションの最前線に立ち続けられるよう努めております。そのため、今後さらに素晴らしい発展が見込まれることでしょう。

ひとつご留意いただきたいのは、AIはコードを作成するのに少し時間がかかる場合がありますが、その結果、最高の品質と効率を提供可能だということです。さらに、AIはユーザーの皆様のチームのコーディング慣習に合わせてパーソナライズすることが可能です。

AnimaとマルチモーダルLLMの違い

生成AIを搭載したAnimaとマルチモーダル大規模言語モデル(LLMs)は、どちらも画期的なイノベーションですが、技術的には異なるニッチなニーズに対応しています。Animaが、FigmaのようなデザインプラットフォームをReactのような実用的なコードに直接変換することで、デザインと開発のギャップを埋めることに重点を置いているのに対し、マルチモーダルLLMは、テキスト理解と視覚処理を組み合わせることで、複数の様式にまたがるコンテンツを理解し、生成することを可能にします。Animaは、ウェブやアプリの開発プロセスを合理化し、手作業のコーディングなしでデザインを実装することができる特別なツールだと考えられます。他方、画像入力機能を備えたOpenAIのChatGPTのようなマルチモーダルLLMは、AIの視野を広げ、テキストと画像の両方を相乗的に解釈して生成ができるようにするものです。どちらも革新的なものですが、Animaはデザイナーや開発者のワークフローを最適化することに特化したツールであるのに対し、マルチモーダルLLMは包括的なAI主導のコンテンツ作成と理解のための新たな扉を開くものなのです。

Animaはデザインをピクセルパーフェクトなコードに変換することを得意としており、Figmaのようなプラットフォームから細部までデザインを正確に取り混むことができます。他方、マルチモーダル LLM は、テキストと画像の両方を扱うことができる汎用性がありますが、デザインからコードへと完璧にレプリカを作るということのみに特化したタスクには対応していません。Animaはデザインの忠実性を保証するツールであり、LLMは幅広いコンテンツ理解を提供するものなのです。

次のバージョンでできることとは？

Animaの次期バージョンでは、Design-to-Code体験を他に例を見ないカスタマイズレベルまで高めています。どの開発チームにも独自のコーディングスタイルと慣習があることを考慮し、Animaではユーザーがそれぞれのコードベースからサンプルを読み込ませることができるようになりました。Animaのプラットフォームは、これまで通りインテリジェントな分析・適応ができ、ピクセルパーフェクトなデザインに忠実なコードを生成できるだけでなく、ユーザーのプロジェクトの既存のコーディングパターンや慣習とシームレスに融合できるようになったのです。このパーソナライズされたアプローチにより、統合にかかる時間を劇的に短縮し、どのようなコードベースでも違和感なくコードが出力されることをお約束いたします。