Animaの最新の進化によって 、Figma内で生成AIコードのパーソナライズ化ができるようになりましたが、これはフロントエンドのデベロッパーにとって画期的なものです。この機能によって、開発者独自のスタイルや技術的なリクエストに直接応えるカスタマイズが可能になりました。 

デベロッパーは簡単なプロンプトを作成して、特定のコーディング規則、フレームワーク、アーキテクチャパターンを使用するように、コード生成プロセスの指示を出すことができます。この記事では、Animaの生成AIがいかにデザインからコードへの変換プロセスを大幅に迅速化し、ソフトウェア開発の効率化とコラボレーションの新たな道を開くのかをお伝えするとともに、デベロッパーがコーディングのクオリティを維持することに成功している実際の使用方法と使用例を見ていきます。

Animaの生成AIを使ってコード規則、スタイル、動作、アニメーションなどを追加する方法をチェックしてみましょう。

1. 生成AIを使ってSEO対策用のセマンティックHTMLを追加する

Figmaのデザインから新しいウェブページのタブを作成するとき、ページ内SEOのために、多くのセマンティックHTMLを追加する必要があります。Animaの生成AIは「SEO対策」用のプリセットを提供しており、Figmaのデザインコンテンツを理解した上で、すべてのタグを追加することができます。

ここでは、Figmaコミュニティで公開されているポートフォリオのテンプレートを使います。

この例では、Animaの生成AIが自動でSEO用の仕様をコードへと組み込みました。

• デザインのコンテクストに沿ったセマンティックなメタタグ
• application/ld+json scriptのプレースホルダ
• <nav
• <main
• リンク先とrel
• <footer>

2. Animaの生成AIを使ってレム単位でレスポンシブフォントを作る

フォントサイズに関しては、ピクセル単位ではなくレム単位を使用するのがより一般的で、レスポンスが良いと言われています。 レム単位はルート要素のサイズを基準としており、画面に対する相対的なサイズやメディアクエリに基づいて簡単に管理することができます。

レム単位は非常によく使われているので、Animaではフォントサイズをレム単位に変換する専用プリセットを用意しています。このプリセットを試すため、Figmaコミュニティ内でこちらのランディングページを使用しました。

AIのパーソナライズタブ内にあるプリセット欄で、「タイポグラフィ」で、「フォントの単位にレムを使用する」を選択しました。

その結果がこちらです。

3. Animaの生成AIで動作やロジックをデザインに追加する：お天気アプリの例

今回は、基礎的なUIのロジックでコードを機能させるために生成AIを使用した、とても良い事例をご紹介します。

この例では、お天気アプリをデザインしました。このアプリはとてもシンプルなもので、メイン画面には検索ボックスと、さまざまな情報を入力できるプレースホルダーがあります。しかし、デベロッパーは通常、デザインとステータス管理の結合方法と、APIコールからステータスを取得する方法を見つけなければなりません。

そのために、Animaの生成AIを使って足りない部分を埋めることができます。APIのエンドポイントに検索ボックスを結合し、その結果をアプリの様々なコンポーネントに入力します。このためには、APIエンドポイントとAPIキーをカスタマイズした指示として提供する必要がありました。

その結果の一部がこちらです。

4. 「機能化」のプリセットを使ってデザインに動作・ロジックを追加する：Pokedexの例

パーソナライズを行わなくとも、再現性の高いReactコードを手に入れることができますが、さまざまなコンポーネントをステータスに連結し、APIコールを実行する多くの作業が残ってしまいます。そこで、「機能化」をオンにしてみました。

ヒント：より複雑なタスクを行う場合には、「Fast（スピード重視）」よりも「Smart（クオリティ重視）」を選択したほうが良いでしょう

下記を見れば、AIがステータス管理を追加し、ポケモンAPIを自力で見つけ、結果を取得するためにawait fetchの使い方を理解し、APIの結果を対応するフィールドに適切に設定し、リクエストが失敗した場合のコンソールエラーをサポートしていることがわかるでしょう。

ヒント2：プリセットで正しい動作を得られなかった場合、自分がやろうとしていることは何なのか理解させるために自由にテキストで指示を出すと良いでしょう。例えば、卓球のゲームを作ったとき、ボールがラケットと画面の上下に当たると跳ね返る必要があることをAPIに説明しなければいけませんでした。

5. Animaの生成AIを使ってアニメーションを追加する

こちらでは、ランディングページUIキットを使ったほかの事例をご紹介します。

これだけでも見栄えは良いですが、最初に楽しげなアニメーションを追加してさらに良いものを作ってみましょう。このような場合、HTML+CSSを選択して、「エントランスアニメーションの追加」のプリセットをオンにします。前述の通り、指示のカスタマイズの欄で、どのようなアニメーションが良いか、詳しく説明することもできます。

こちらが、数秒後に生成された結果です。

6. Animaの生成AIを使ってコード規則を変更する

さきほどご紹介したポケモンのアプリをもう一度見てみましょう。カスタマイズした指示を追加することで、コードのスタイルや規則を修正することができます。
ここでは、「クラスを利用してReactを使う」というカスタマイズした指示を追加してみました。

「機能化」プリセットに追加で指示を出す前と後の結果は次のようになりました。

カスタマイズした指示ありの場合、選択肢がさらに広がります。ほかのAIツールと同じように、多少の微調整が必要だったり、パーソナライズしない場合よりもコード生成が遅くなったりする場合もあります。ですが、それでもパーソナライズ化は使ってみる価値のある機能です！

Anima生成AIを使って、ぜひ利用結果をシェアしてください。

丁寧な使用方法のチュートリアルをお探しですか？こちらの記事をご覧ください​​

The post 生成AIを使用したFigmaのコード変換：Animaの新しいAIカスタマイズコーディングの使用例6選 appeared first on Anima Blog.

Animaを使えば、Figma、Adobe XD、Sketchで作成したデザインをReact、HTML、Vueのコードに変換することができ、デベロッパーがUIのコーディングの使う時間を50%～70%節約できます。Figmaコミュニティで90万回以上ダウンロードされているAnimaはDesign to Codeの分野をリードしており、ユーザーの定期的なフィードバックのおかげで、常に進化を続けています。

この度、生成AIのパーソナライズ機能をローンチします！

サービス開始により、まったく新しい次元のDesign to Codeのワークフローが実現します。開発の仕方はそれぞれ異なるので、1000人のデベロッパーに聞けば、1000通りの技術スタック、コーディングスタイル、ルーティンがあるでしょう。これまで、Animaが生成したコードについて、自分達が書いたコードと同じようにはならないというフィードバックを常に頂いてきました。
生成AIの導入。この1年で、AIの世界は急速に進化し、まったく新しいレベルの可能性が広がってきています。生成AIの進化によって、Animaのコード生成はこれまでとは別次元のレベルに達しようとしています。
Animaはすでに、Figmaからすぐに起動できるピクセルパーフェクトなコード生成サービスを提供しています。今回のアップデートと、2024年初頭に導入予定の一連のAI機能により、ますますデベロッパーが個人やチームで書くのと似た方法でコードが書けるようになります。

パーソナライズの方法とは？

• 普段通り、Figmaでデザインを開きます。
• 「開発モード」もしくは「編集モード」Animaのプラグインを開きます。（編集モードの場合はInspectを開きます）
•  任意のデザイン画面、フレーム、コンポーネント、レイヤーを選択します。
• AnimaがすぐにReactもしくはHTMLのコードを生成します。
• コードを保存したあと、「開く」をクリックしてコードを確認するか、「ダウンロード」をクリックして端末に保存できます。 
  • AIコードのパーソナライズをオンにすると、コードをカスタマイズするための方法が3つ表示されます。
    カスタマイズ指示 – Animaに自由記述で指示を出します。
     例：「SEOのmetaタグを追加」「アロー関数を使用」「コメントを追加」など
  • プリセット – よくある要望がメニューに表示されるので、任意のものを選んで追加できます
     例：「アニメーションを追加」「機能を追加」など
  • コードサンプル – サンプルがもっとも簡単になる場合もあります。
     例：すべてのコンポーネントをオリジナルの方法でまとめて与えることで、Animaはお客様のコードから学習することができます。
• コードを保存したあと、「開く」をクリックしてコードを確認するか、「ダウンロード」(Download)をクリックして端末に保存できます。

Animaに生成AIの力が加わることで、デベロッパーは、どんなFigmaのデザインでも、自分流の書き方に従ったピクセルパーフェクトで動作可能なコードに変換することができます。
当社では、何百万種類ものデザインでコード生成プログラムをトレーニングし、忠実度の高さを確認しました（デザインはオープンソースのシステムScoobyを使用）。微調整した大規模言語モデル（LLM）が、ユーザー独自のフレームワークとスタイルの好みに合わせてより洗練されたコードを作成します。

Anima VS CoPilot、GPT (GPT4v)、Bard (Gemini)

すでに生成AIを活用しているデベロッパーは多いです。CoPilotとTab9は、VSCodeですぐに利用でき、ロジックを2倍速く実行することを得意とします。しかし、CoPilotにもTab9にも、Figmaのデザインやデザインシステムのコンテクストはありません。GPTとBardの新機能も同様で、一見きれいなコードができているように見えますが、壊れていて機能しないこともよくあり、Animaの忠実さには及びません。

生成AIを使えば、速くコーディングを行うことができ、複数のツールを混ぜて使用しても問題が起きることがありません。Animaを使うことで、フロントエンドのユーザーインターフェース（UI）のコーディングにかかる時間を半分に短縮することができ、さらにCoPilot・Tab9・GPTを使えば、コードの組み込みが楽にできます。
当社のAndricoがFigma、CoPilot、GPT、Dall-EとAnimaを併用して使う方法を紹介した動画をご紹介します。Andricoはシンプルなゲームを作り、複数のAIツールをどのように活用すれば、より速くシステム開発ができるのかをデモしています。

今後の動向

2024年は、フロントエンドの構築を行うデベロッパーの皆さんにとって、Animaがより良いコーディングのパートナーになるための機能をたくさんリリースしていきます。今後、よりユーザーのコーディング習慣と一致し、デザインとコードベースのコンテクストを理解し、現在のワークフローに統合されたプログラムになるようサービスの向上を行います。
FigmaでAnimaを使って、AIコードパーソナライズ機能についての感想をお聞かせください。
人生にクリエイティブを
Animaへの登録はこちら！
FigmaプラグインのAnimaを使ってみる

The post 生成AI Animaのコードのパーソナライズ方法 – Figmaでコードをカスタマイズするためのプロンプト appeared first on Anima Blog.

FigmaのVueコードへの変換方法

お好きなFigmaで作成したデザインをVueコードに変換する

ゼロからコードを書くこと無くFigmaをVueコードに変換したい方は、こちらの記事をご覧ください。Animaを使って、簡単なステップでFigmaのデザインをVueコードとしてエクスポートする方法をご紹介します。

Animaを使用することで、デザインをVueコード（Vue2およびVue3）に変換できます。

Youtubeのチュートリアル動画を見てステップを確認したい方はこちら。「FigmaのVueファイルへの変換方法」

それでははじめましょう。

ステップ1：FigmaでAnimaを開く

Animaを初めて使用される場合は、検索ボックスにAnimaと記入して検索してください。

ステップ2：Vueコードを選択し、TypescriptまたはJavascriptを選択

次に、コードの選択肢の中から現在のニーズに合うものを選択します。

• フレームワーク：FrameworkのドロップボックスからVueを選択
• 言語：お好みでJavascriptかTypescriptにチェックを入れる

Animaに選択したものがデフォルトのコードとして保存されます。これはいつでも変更することができます。

ステップ3：Figmaのコンポーネント、レイヤー、フレームを選択

デザインセクションを選択した後、AnimaのAIコードゲネレーターがVueコードの作成を始めます。

すでにAnimaをHTMLもしくはReactで使用したことがある場合は、コードの生成に普段よりも時間がかかる場合があります。これは、新しいAIがまだベータ版であることに由来します。しかし、今後生成スピードを改良していきますので、ご安心ください。

ステップ4：コードを保存
満足の行くコードが作成できたら、3つの保存方法があります。

• こちらのアイコンをクリックして、コードのスニペットを直接コピー：
• 「選択範囲をダウンロード」をクリックして、選択したコード全文のデータを含むzipファイルをダウンロード
• 「Codesandboxを開く」をクリックして、すぐにCodesandbox上でコードを確認

手順はたったこれだけ！ぜひやってみてください

• FigmaのAnimaプラグイン
• Animaのアカウント登録
• AnimaのDiscordチャンネルで使用した感想をお聞かせください

Animaを使ってできること：

• FigmaのデザインをReact、HTML、Vueコードに変換
• 使用言語：TypescriptもしくはJavascript
• CSS利用可 (Vue with Tailwind CSSを利用したVueコードも間もなくAIベータ版で利用可能になります)

The post FigmaのVueコードへのエクスポートの仕方 appeared first on Anima Blog.

この記事では、Animaを使用して、FigmaのデザインをTailwind CSSにシームレスにエクスポートする方法をご紹介します。

Animaを使えば、作成したデザインをTailwindの基本スタイルにマッピングすることができます。色、間隔、タイポグラフィなどのデザイン属性は、簡略化してTailwindのクラスに変換されます。スタイルやバリアブルを使用している場合、AnimaのAIコード生成がTailwindの設定ファイルとして生成を行います。

Tailwindは非常に便利なフレームワークで、特にワークフローを効率化し、レスポンシブなウェブアプリケーションを簡単に作りたいと考える開発者には最適です。

これから、Figmaでデザインした作品をTailwind CSSの世界に持って行く方法を見ていきましょう！

Animaを使ってできること：

• FigmaのデザインをReact、HTML、Vueコードに変換
• 使用言語：TypescriptもしくはJavascript
• CSS、TailwindCSSが利用可能

それでははじめましょう。

(対応する動画を見ながら手順をかくにんしたいばあいは、こちらからYoutubeのチュートリアル動画をご覧いただけます。If you prefer to follow the steps with the related video, here is the YouTube tutorial: FigmaのデザインのTailwind CSSへの変換方法 )

Figmaで作成したデザインをTailwindコードに変換する方法

ステップ1：変換したいFigmaアイルでAnimaのプラグインを実行する

お好きなモード（通常モードもしくは開発モード）でAnimaのプラグインを開きます。初めてAnimaを使う場合は、検索ボックスにAnimaと入力してください。Animaへのアカウント登録が必要になります。登録はほんの数十秒で完了します。

ステップ2：React、TypescriptまたはJavascript、Tailwindの順で選択

次に、コードの選択肢の中から現在のニーズに合うものを選択します。

• フレームワーク：FrameworkのドロップボックスからReactを選択
• 言語：お好みでJavascriptかTypescriptにチェックを入れる
• スタイリングの項目でTailwind CSSを選択

選択したものがデフォルトのコードとして保存されます。これはいつでも変更することができます。

ステップ3：Figmaのコンポーネント、レイヤー、フレームを選択

あとは、Tailwindのフレームワークでエクスポートしたい部分を選択するだけで、Animaがコードの生成を行ってくれます。 

ステップ4：コードを保存

満足の行くコードが作成できたら、3つの保存方法があります。

1. ボタンをクリックするか、キーボードのショートカットを使ってコードのスニペットをコピーする。
   
2. 「選択範囲をダウンロード」をクリックして、すべてのファイルをzipでダウンロード 
3. 「CodeSandboxで開く」をクリックして、コードがどのように実装されるか確認する。表示の例：CodeSandbox link.  ぜひやってみてください！

• FigmaのAnimaプラグイン
• Animaのアカウント登録
• AnimaのDiscordチャンネルで使用した感想をお聞かせください

The post FigmaのデザインをTailwind CSSでエクスポートする方法 appeared first on Anima Blog.

FigmaのデザインをReactに変換する方法をお探しですか？この記事では、Figma内でAnimaを使用して、Figmaのコンポーネントをクリーンで規則に則ったReactのコンポーネントに簡単に変換する方法をご紹介します。

AnimaはFigmaのオフィシャルパートナーであり、Animaのコード生成AIは、Figmaの新しい開発モードのパネルにデフォルトで統合されています。Figmaの開発モード用のAnimaがあれば、Figmaのあらゆるコンポーネントやデザイン画面に対して、効率的ですぐにリリース可能、かつメンテナンス可能なコードをリアルタイムで生成することができます。

Animaのコードの特徴はこちら：

• すぐに実行可能なサブコンポーネントサポートつきの機能的なReact + TypeScript/JavaScriptコード
• Figmaのバリアントとプロップをベースにした、ステートフルでインタラクティブなReactコンポーネント
• Figmaオートレイアウト をベースにしたレスポンシブ対応のCSSフレックス
• 通常のCSS、Styled Components、Tailwind CSS、そしてまもなく実装されるCSSモジュールから、お好みでスタイルが選択可能

YouTube – Animaを使用した、Figmaで作成したデザインのReactコードへの変換方法

それでははじめましょう。

Animaを使用した、Figmaで作成したデザインのReactコードへの変換方法

Animaには、Figmaで作成したデザインからReactコードを生成する方法が2種類あります。

1. Reactデザイン画面全体のコードとすべてのフロー(Figmaの編集権限が必要)：
   • Reactに対応したプロトタイプやMVPが必要な場合に最適です。
   • Figmaの画面とすべてのフローをAnimaのウェブアプリに同期する必要があります。
   • ブレイクポイントやページ間のFigmaリンクにも対応した状態で、同期したプロジェクトのReact（JSXまたはTSX）をエクスポートできます。
   • ※外部同期とコード処理業務が必要です。※
2. 個々のコンポーネントのReactコード(Figmaの読み取り専用モードで利用可能)
   • 再利用可能なReactコンポーネントを求めるデベロッパーにとって、最も効率的でアクセスが容易な方法です。
   • Figmaの開発モード内でFigmaのコンポーネントをReactのコンポーネント（JSXもしくはTSX）に変換します。
   • 選択したコンポーネントと個々のサブコンポーネントのコードをすぐに生成し、インスペクトし、コピーできます。
   • ワンクリックでコードパッケージ全文をダウンロードしたり、Codesandboxで開いたりすることができます。

方法 1：すべてのフローを含むReactコードを生成する

ステップ1：FigmaでAnimaのプラグインを開きます

ステップ2：「Turn Design to Code」を選択します。

ステップ3：Reactに変換したいFigmaコンポーネンツ、デザイン画面、フローのいずれかを選択します。

この方法を使用すると、Animaはブレイクポイントを使用して定義したさまざまな画面サイズを読み取り、メディアクエリに変換して、あらゆるFigmaデザインからレスポンシブReactコードを生成することができます。

ステップ4：プラグインの下部から「Sync」ボタンをクリックします。

ステップ5：同期が完了したら、「Go to Anima」からAnimaに移動します。

ステップ6：Animaのウェブアプリでプロジェクトに移動し、「< > Code」のアイコンを選択してコードモードに切り替えます。 

ステップ7：フレームワークの選択肢から「React」を選択して、「Javascript」か「Typescript」を選択し、「Change to React」をクリックします。

ステップ8：画面の右上部の「コードをエクスポート」ボタンをクリックして、特定の選択部分、デザイン画面、あるいはプロジェクト全体のコードパッケージをzipファイルでダウンロードできます。

方法 2：個々のコンポーネントとデザイン画面に対して React コードを生成する

ステップ1：Figmaのインスペクトパネルの上部のトグルを使って、開発モードに切り替え、「Plugins」のタブを選択します。

ステップ2：開発モードでAnimaのプラグインを実行します。(プラグインのリスト上にない場合は、検索ボックスに「Anima」と入力します。)

ステップ3：Figmaのコンポーネント、レイヤー、フレームを選択します。

ステップ4：右側のパネルに、実行可能なReactとCSSのコードが表示されます。トグルを使って、TailwindとStyled Componentsを切り替えることができます。

トグルを使うと、選択したコンポーネントのインスタンス（「Usage」）と、すべてのバリアントとサブコンポーネントを含む完全な定義（「Source」）を簡単に切り替えることができます。

コードウィンドウの上部から、JSXとTSXを切り替えることもできます。

ステップ5：「Download selection」をクリックして、すべてのコードが入ったzipファイルをダウンロードするか、「Open in Codesandbox」をクリックして、すぐにコードを開くことができます。

CodeSandboxでの表示例はこちら 

.

Figmaで簡単に作成できるReactコンポーネントを使ってフロントエンドの構築を2倍速く完了しましょう 無料で試してみる

figmaプラグイン用 Anima

The post FigmaデザインのReactでの実装：FigmaでクリーンなReactコンポーネントを作成する方法 appeared first on Anima Blog.

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のプラットフォームは、これまで通りインテリジェントな分析・適応ができ、ピクセルパーフェクトなデザインに忠実なコードを生成できるだけでなく、ユーザーのプロジェクトの既存のコーディングパターンや慣習とシームレスに融合できるようになったのです。このパーソナライズされたアプローチにより、統合にかかる時間を劇的に短縮し、どのようなコードベースでも違和感なくコードが出力されることをお約束いたします。

The post AnimaでのDesign-to-Codeにおける生成AIの導入 appeared first on Anima Blog.

自分でコードを書くこと無くFigmaのデザインをHTML へ変換したいとお考えですか？こちらの記事では、Animaを使って、簡単なステップでFigmaのデザインをリリース可能な状態のHTMLコードファイルとしてエクスポートする方法をご紹介します。

Animaを使用することで、Figma、Adobe XD、Sketch上でデザイン忠実度の高いコードベースのプロトタイプを作成し、数回クリックするだけでデベロッパーフレンドリーなHTLMコードとしてエクスポートできます。

FigmaからHTMLに直接変換を行うことで、ウェブベースの生データプロトタイプを作成し、オリジナルのシンプルなウェブサイトやランディングページを展開し、デベロッパーにUI全体を網羅するクリーンなコードパッケージを提供し、より迅速に開発を行うことができるようになります。

それでははじめましょう。

***ビジュアルを見て学習したい方は、こちらの動画をご覧ください。FigmaのHTMLへの変換Youtubeチュートリアル動画***

Figma のアニマを入手

Figmaで作成したデザインのHTMLコードへの変換方法

FigmaのデザインをHTMLコードに変換し、コード全文や個々のコンポーネントのコードを出力する方法をお探しですか？今回は、Animaを使用して、FigmaからHTMLとCSSを取得する2つの簡単な方法をご紹介します。

1. 方法(1)：FigmaからHTMLのWebページ全体とフローを出力： (Figmaの編集権限が必要): 
2. 方法(2)：Figmaの開発モードからHTMLコードパッケージを出力 (Figmaの読み取り専用モードで利用可能):: 

方法(1)：FigmaからHTMLのWebページ全体とフローを出力 (Figmaの編集権限が必要)

ステップ1：Figmaの編集モードでAnimaプラグインを実行

まず、Figmaのプロジェクトを編集モード(メインモード)で開いてAnimaのプラグインを実行します。

すでにAnimaを開発モードで実行したことがある場合には、「最近使用したリソース」に表示されます。

ステップ2：HTMLコードでエクスポートしたいFigmaのプロジェクトを同期する

AnimaのウェブアプリでFigmaのプロジェクトを開くためには、プロジェクトを同期する必要があります。(デザインの同期方法をチェック)

Animaのウェブアプリへのデザインの同期が完了したら、Animaプラグインで誘致が届きます。「Animaに移動」をクリックして、Figmaのデザインのプレビューが表示されたブラウザのタブを開きます。

ステップ3：エクスポートの方法(HTMLとCSS)を選択してコードをエクスポート

右上部の「Export Code」をクリックして、「Full Project」を選択します。するとポップアップウィンドウが開いてエクスポートしたいフレームワークを確定します。今回の場合は、「HTML」「ピクセル(Px)」「Flexbox」(Figmaのデザインで設定されたレスポンシブ動作を維持するため)を選択しています。

「ZIPファイルをダウンロード」をクリックすれば完了です。プロジェクトのコードパッケージが出力できました。

方法(2): Figmaの開発モードから直接HTMLコードパッケージを出力 (Figmaの読み取り専用モードで利用可能)

ステップ1：Figmaで開発モードを有効にする

まず、Figmaを開きます。パネルの上部にDev Modeと書かれた緑色のトグルがあります。それをクリックすると、デフォルトで 「Inspect」タブが表示されていますが、「Plugins」タブに切り替えます。

ステップ2：Animaプラグインを実行

次に、Animaのプラグインを開発モードで開きます。

プラグインのリスト上にない場合は、検索ボックスにAnimaと記入して検索してください(上の画像参照)。そこから、プラグインを実行したり、簡単にアクセスするためにパネルの上部にピン留めしたりすることができます。

ステップ3：Figmaのコンポーネント、レイヤー、フレームを選択

Figmaのコンポーネント、レイヤー、フレームを選択すると、対応するHTMLコードがリアルタイムで表示されます。パネルからコードをコピーしたり、CodeSandboxで開いたり、コードパッケージをダウンロードすることができます。

これが、個々のコンポーネントやスクリーンに対して最も速く、最も簡単な方法にコードを取得する方法です。開発モードには読み取り専用モードでもアクセスできるので、デベロッパーへのデザインの引き渡しにも最適です。

ですが、複数のページやインタラクションを含む完全なプロジェクトをエクスポートしたい場合は、Animaのウェブアプリを使用する必要があります。ですが、こちらの方法もとても簡単でお手軽ですので、ご心配なく！

The post FigmaのHTMLコードへのエクスポートの仕方 appeared first on Anima Blog.