Animaを使えば、ユーザーはブレークポイント（メディアクエリ）を設定することで、Figmaのデザインを簡単にHTMLやReactのコードに変換できます。

あなたは何時間もの時間を費やしてFigmaで完璧なウェブサイトを作成したとしましょう。デスクトップでみると、ウェブサイトはとても美しく見えます。しかし、その後スマートフォンの画面でも確認してみると、画面が縮小されて、文字が小粒のようになっています。そこで、この問題の解決策をデバイス別にそれぞれ複数のプロトタイプを作り、意思決定者およびエンジニアと複数のリンクを共有しました。特定の解像度では正しく画面を表示することができますが、他の解像度ではピクセルパーフェクトにはほど遠い見え方になっています。このようなシチュエーションは、デジタルデザインの世界ではよくあることで、複数の解像度をサポートすることは、あればベターということではなく、必須なのです。そこで、ブレークポイントの出番です。
Animaでブレークポイントを使えば、コンパクトなスマートフォンでも、タブレットでも、ワイドスクリーンのモニターでも、デザインが自動的に最良の状態で見えるように調整されます。正しいレイアウトが表示できるようになります。

FigmaのAnimaプラグインを入手

ブレークポイントとは？

ブレークポイントとは、ウェブサイトのコンツとデザインを、表示中のスクリーンのサイズや解像度に合わせて調整される特定のポイントのことです。
現在、デスクトップ、モバイル、そして時にはタブレットやワイドスクリーンのデスクトップ用のページレイアウトを表す異なるアートボードを用意するのが一般的になっています。これらのアートボードはそれぞれブレークポイントを示しています。

ブレークポイントを使うべき理由とは？

1.  ユーザーエクスペリエンスの強化 – ウェブサイトやアプリがどのデバイスでもきれいに表示され、きちんと機能するようにすることで、より多くのユーザーに対応し、インクルーシブでユーザーフレンドリーなデザインにすることができます。
2.  読みやすさとわかりやすさの向上 – ブレークポイントを使うと、デザイナーは単に要素の拡大縮小だけではなく、配置、視認性、コンテンツ、機能性までデバイスの解像度に応じて調整することができます。ランディングページを作成しているなら、これらすべての要素がコンバージョンの向上へとつながるでしょう。
3. SEO – 検索エンジンはモバイル端末で使いやすいウェブサイトを好みます。レスポンシブデザインは検索結果で上位に表示される可能性が高く、知名度とトラフィックが向上します。
4.  意思決定者や顧客とのコミュニケーション – デザインの過程においても、ブレークポイントはすべての解決策をひとつのリンクでシェアすることができるので、エンジニアを巻き込むことなく営業をクロージングできたり、意思決定者を納得したりすることができます。

ブレークポイントは現代のデザイナーにとって欠かせないツールであり、どのような画面でもレスポンシブでユーザー中心のデザインを作成することができます。デバイスの種類に限らず、完成したプロダクトがすべてのユーザーにとって利用でき、魅力的であることを保証できるのです。

ブレークポイントの使い方

ブレークポイントの使い方と、Figmaでレスポンシブなウェブサイトを作成する方法をご紹介します。

1. 複数のレイアウトでデザインする
   まずはFigmaでデザイン作成をはじめましょう。デザイナーはさまざまな画面サイズに対応するページのバリエーションを作成します。通常、モバイル、デスクトップ、タブレットなど、少なくとも2つか3つのバージョンを作成します
2. Animaのブレークポイント機能をアートボードに接続する
   同じページのアートボード（「ホームページ モバイル」と「ホームページ デスクトップ」など）をすべて選択する。それから、Figma用のAnimaのプラグインを使用して、「Responsive pages（レスポンシブページ）」→「+」→「Save（保存）」をクリックします。
3. パブリックリンクもしくはエキスポートコードをパブリッシュする
   o Animaでブレークポイントを設定し、デザインをHTMLもしくはReactのコードに変換する準備をする
   o 「Get code（コードを入手）」をクリックして、HTMLもしくはReactのコードパッケージをダウンロードする。生成されたコードパッケージには、ブラウザのウィンドウサイズに合わせて自動的にレイアウトを調整し、ウェブサイトをレスポンシブにレンダリングするためのすべての必要なコードとアセットが含まれています。このコードはFigmaのデザインをすべての指定したブレークポイントで正しく反映できるように設計されています。
   o もしくは、「Publish（パブリッシュする）」をクリックして、animaapp.ioもしくはユーザー独自のドメインでパブリックリンクを入手する。

ブレークポイントのもっと詳しい情報

• 複数の画面とFigmaリンク – Animaは、Figmaのプロトタイプリンクをすぐにサポートし、複数のページにブレークポイントを設定することができます。
•  ブレークポイントとオートレイアウト – Figmaのオートレイアウトもサポートしています。さらに、ALを使用することで、さらに良いユーザーエクスペリエンスを提供することもできます。
•  バックグラウンドで機能するCSS – AnimaはCSSメディアクエリを使って、スクリーンの大きさに合わせて異なるレイアウト 間を移動できます。
• 最良のパフォーマンスのためにアートボードで作成すべき画面サイズとは？
  •  アートボードの幅は、このレイアウトの最小の幅を表示しましょう。
  •  つまり、1200pxのデスクトップパソコンと350pxのモバイル端末を使用する場合、幅が1200px以下の画面ではモバイルレイアウトが表示されます。350px以下の場合は、350pxの最小版をキープします（一般的にはモバイルブラウザの画面ではスクロールではなく縮小されます）。

FigmaのデザインをAnimaでレスポンシブなウェブサイトに変換することで、開発のプロセスが合理化され、デザイナーとデベロッパーは、初期デザイン段階からコーディング段階まで、綿密な意思疎通をしながら作業することができます。

おすすめの記事
FigmaのデザインのHTML/CSSへのエキスポート方法
無料でAnimaを使ってみる
Animaアカウント作成はこちら

FigmaのAnimaプラグインを入手

The post Animaのブレークポイント: Figmaのデザインをレスポンシブなウェブサイトに変換 appeared first on Anima Blog.

生成AIの時代において、私達はAIが自分の言うことを理解してくれるものだと期待しています。そして、たいていの場合、実際に理解をしてくれます。ほんの少しのヒントで欲しいものを与えてくれるAIツールは、まるで魔法のようです。

Animaの目標は、フロントエンドの設計を自動化することです。そうすることで、人間が時間を無駄にすることがありません。2023年の間に、AnimaのAIは75万個のコードスニペットを生み出しました。これは人間のコーディング作業の1000年分にあたります。Figmaのプラットフォーム上で100万回以上インストールされているAnimaは、先進的なDesign to Code分野のツールです。

次の段落では、毎日のフロントエンドコーディングの自動化について、さらに深く見ていきましょう。

現在のLLM（大規模言語モデル）はフロントエンドとUIを理解していない

コードの完成から指示まで、コード生成には様々なモデルがあります。現在、複数の人気のCoplitと呼ばれるコーディングアシスタントが存在しており、Coplitはこれらのコードモデルに基づいて、コーディングの高速化を支援してくれます。

しかし、フロントエンドの自動化となると、期待と生成されたものとの間に大きなギャップがあることも少なくないでしょう。Animaの能力とこの領域への理解によって、当社ではこのギャップを埋めることを目指しています。

そして今日、当社はFrontierというAIコーディングアシスタントをご紹介します。Frontierはフロントエンドの構築を行うデベロッパー向けのツールです。

Frontier – ご自身の思い通りのAIコード生成ができる、フロントエンド特化型コード生成

AnimaのFrontierは総合開発環境（IDE）を必要としている場所に適応します。最も人気のあるIDEであるVSCodeからはじめましょう。

まず、Frontierは全体のコードベースを分析し、コードデザインシステム、フレームワーク、規則、要素をマッピングします。この作業には数秒で終了し、ローカルで行われるため、ご自身のコード情報はしっかりと守られています。

つぎに、Animaの最先端のDesign to Codeエンジンを使用することで、Frontierはユーザーのデザインを解析し、デザインバージョンとデザインシステムのコードの中にあるものを理解します。

そして最後に、VSCodeの中にあるFigmaのデザインの任意の部分を選択してみましょう。すると、ご自身のコードに基づいたコードが入手できます。まるで魔法のようですね。

アクセスをリクエスト

自動化でデザインシステムの導入を増やす

熟慮したプロジェクトには、数千とはいかないまでも、数百の構成要素がよくあります。

設計システムのガバナンスと採用は、これらのプロジェクトを維持するために極めて重要なやりがいのあるタスクです。自動化が役立ちます。

AIのセキュリティと防波堤

フロンティアは、企業で使用可能なレベルのセキュリティソリューションを提供するため、ゼロから構築されました。

企業におけるAIの導入は、下記のようなよくあるプライバシーの懸念によって、ためらわれがちです。

• プライバシーの保護：LLMモデルのトレーニングを通して、自社のコードが「漏洩」し、他社がコードの一部を入手してしまう可能性はないか？
• プライバシーの侵害：LLMに取り込んで微調整したりトレーニングされた他社のコードが、確実に自社のコードベースに入ってこないようにする方法はあるか？セキュリティや著作権侵害の懸念がある。

Figmaデザインに対するAnimaの解釈を統合するコードを生成し、同時にユーザーのコードベースを使用するためには、簡単な方法があります。単にLLMにコードベースのトレーニングをさせれば良いのです。しかし、このためには、莫大な量の企業および個人のコードをアップロードし、カスタムLLMをトレーニングする必要があるため、深刻なプライバシーとセキュリティの懸念があります。当社は、企業環境で働くデベロッパーにとっては特に、セキュリティとプライバシーが非常に重要であることを理解しています。そこで、当社は全く異なるアプローチを取りました。

当社では、コードをクラウドにアップロードするのではなく、VS Codeの中で、ローカルにデータ収集、インデックス作成、MLモデルを実行しました。このツールは、デベロッパーのデバイス上で、関連するコードを特定し、インデックスを作成します。集まった情報はコードベースの一部としてローカルで保管されます。これによって、コードはクラウド上ではなく、Git上でチームメンバーに安全にシェアすることができます。特定のコンポーネントをインスタンス化する必要がある場合、当社はローカルで事前に莫大な量の情報処理を実行してから、クラウドでLLMに対し、イングレスでもエグレスでも企業をリスクに晒すことのない最小限のコードと必要な情報のみを送ることができます。この革新的なアプローチは、ほとんどの操作がデベロッパーの高速コンピューター上で行われるため、パフォーマンスが向上するというメリットもあります。

Frontierの裏側 – LLMs、ML、AIファーストのシステム構造

AnimaのFrontierは、この分野におけるAnimaの豊富な経験に基づいた、AIを使ったフロントエンドの自動化ツールで、ミッションの実現のために先進的なテクノロジーを活用しています。

99%をLLMの自動化ツールで作った結果、30％の確率で素晴らしいコードができあがることはありますが、これは趣味の範囲では十分だとしても、プロには適しているとは言えません。

LLMは新たな革新をもたらしてくれる強力なツールではありますが、精度が高いとは言えません。Animaでは、タスクに適したツールを選択し、テストとベンチマークを行っています。LLMに関しても、当社はコンテクストを与え、結果を検証し、成功に導く準備を行っています。

この複雑な問題を解決するにあたり、当社では問題を10個の小さな課題と要件に細分化しました。クリエイティブを必要とし、LLMで解決するのがベストな問題もあります。特定のモデルは他のものと比べて迅速で性能が優れていました。一部の問題には、一般的な機械学習・コンピュータビジョン問題（つまり生成ではなく分類）が求められるものもありました。また、試行錯誤で解決するのが最も良い問題もありました。

それぞれの問題について最適なソリューションを組み合わせることで、LLMベースのコードソリューションにありがちな、間違った出力のリスクを最小限に抑えながら、驚異的な結果を生み出すことができるのです。

Frontierの未来

当社はデベロッパーがフロントエンドのコーディングを迅速に行えるよう、AIで実現可能なことはすべて活用したいと思っており、現在はまだこのミッション実現の第一歩に過ぎません。AnimaのFrontierは、今後、デザインの更新に合わせてコードをアップデートし、壊れたコードを修復し、ステートとテーマを理解し、要素を正しく名付け、仕様を読み、さらに人間のデベロッパーに近い考え方ができるようになるはずです。

当社のツールには非常に多くの機能が搭載されています。ぜひご自身がもっとも困っていることや、現在フロントエンドデベロッパーの皆さんがAIにやってほしいと思っていることを教えて下さい。 AnimaのDiscordチャンネルから当社と直接お話ができます。

アクセスをリクエスト

The post Frontier – ご自身の思い通りのAIコード生成ができる、フロントエンド特化型コード生成 appeared first on Anima Blog.

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.