はじめに
Animaは、デザイナーや開発者がデザインをコードに変換するのを支援するプラットフォームです。Figma、Adobe XD、Sketchのようなデザインツールから直接React、Vue、またはHTMLコードを生成することをサポートし、フロントエンド開発をより速く簡単にします。ユーザーはこれを使用して、忠実度の高いインタラクション・プロトタイプを作成できるほか、開発標準を満たし、直接使用できるコードを自動的に生成することもできる。Animaの中核となる目標は、デザインと開発間の反復的なコミュニケーションを減らし、チームの効率を向上させることだ。デザインから本番稼動までを迅速に行いたい個人やチームに適しており、迅速な反復が必要なプロジェクトに特に有効だ。このプラットフォームには、無制限のコードエクスポートやエンタープライズレベルのサポートなど、より高度な機能を提供する有料プランもある。
機能一覧
- デザイン・トゥ・コードFigma、Adobe XD、またはSketchからReact、Vue、HTML、CSSコードを生成します。
- 高忠実度プロトタイプフォーム、GIF、ビデオなどのインタラクティブな要素を追加して、リアルなプロトタイプ体験を作成できます。
- 自動設計システムデザイン・コンポーネントは自動的にコード・コンポーネントに変換され、フロンティア機能によって開発環境に同期されます。
- レスポンシブ・レイアウトブレークポイントの設定や柔軟なレイアウトをサポートすることで、さまざまなスクリーンにコードを適応させることができます。
- チームワークデザインチームと開発チームが同期して作業できるよう、リアルタイムのコラボレーション機能を提供します。
- コード・パーソナライゼーションAIは、生成された結果をチームのコード習慣に適応させ、実際の開発ニーズに近づける。
- エクスポート＆パブリッシュコードを直接エクスポートすることも、プロトタイプをオンラインウェブサイトとして公開することもできます。
ヘルプの使用
アニマの始め方
アニマの使用には複雑なインストール作業は必要なく、主にプラグインとウェブ側で操作します。以下はその詳細な手順である：
1.プラグインのインストール
- デザインツールでのインストール::
- Figma（またはAdobe XD、Sketch）を開く。
- Figmaメニューバーのプラグイン > すべてのプラグインを参照 をクリックします。
- Anima」を検索し、「インストール」をクリックする。
- インストールが完了すると、プラグインがツールバーまたはプラグインメニューに表示されます。
- アカウント登録::
- プラグインを開くと、ログインまたは登録のプロンプトが表示されます。
- https://www.animaapp.com/ にアクセスし、"Sign Up "をクリックしてアカウントを登録し、Eメールとパスワードでログインする。
- インストールの確認::
- プラグインをインストールした後、デザインツールでプロジェクトを開き、プラグインアイコンをクリックすると、Animaインターフェースが表示されます。
2.コードの生成方法
- デザインの準備::
- レイヤーに明確な名前を付け、レイアウトが論理的であることを確認しながら（自動レイアウトを使用するなど）、Figmaでデザインを完成させます。
- Animaプラグインを開く::
- Figmaプラグインメニューをクリックし、Animaを選択します。
- ポップアップ画面で、コードを生成する必要のあるページまたはフレームを選択します。
- コード・タイプを選択::
- プラグインのインターフェイスで、"Export Code "をクリックします。
- React、Vue、またはHTML（CSS付き、Tailwind CSSなど）を選択します。
- セッティングの調整::
- レスポンシブ・レイアウトにしたい場合は、「ブレークポイント」をクリックしてブレークポイントを設定する。
- コードをパーソナライズする必要がある場合は、「コードのパーソナライズ」オプションをオンにし、AIがあなたの習慣に従ってコードを最適化します。
- 輸出コード::
- Generate "をクリックし、コードが生成されるまで数秒待つ。
- コードを開発環境にコピーするか、ZIPファイルをダウンロードしてください。
- ほら::
- 無料版ではコードエクスポートの数に制限がありますので、より多くの機能を利用するにはプロ版（月額$31～）へのアップグレードをお勧めします。
3.忠実度の高いプロトタイプの作成
- 相互作用の追加::
- Figmaでデザイン要素を選択し、Animaプラグインを開きます。
- インタラクティブ機能の追加」をクリックし、フォーム、ビデオ、ロティ・アニメーションなどを選択してください。
- クリックでジャンプ、表示で非表示など、トリガーアクションを設定する。
- プレビュー効果::
- プラグインの「プレビュー」をクリックすると、プロトタイプがブラウザで表示されます。
- プロトタイプの公開::
- Publish "をクリックすると、チームやクライアントと共有できるオンラインリンクが作成されます。
- 操作技術::
- プロトタイプをウェブページに埋め込んで簡単に表示するには、「Live Embed」機能を使用します。
4.フロンティア自動設計システムの使用
- フロンティアのインストール::
- Visual Studio CodeにFrontierエクステンションをインストールする（Animaのウェブサイトからダウンロード）。
- Animaアカウントにログインし、Figmaプロジェクトに接続します。
- 同期コンポーネント::
- Figmaで同期が必要なコンポーネントに印を付けます。
- VS CodeでFrontierを開き、"Sync "をクリックすると、デザインは自動的にコード・コンポーネントに変換されます。
- 管理コード::
- 生成されたコードはストーリーブックとの統合をサポートし、CSSはオートレイアウトに変換されます。
- コードを修正した後、Frontierを介してFigmaに逆同期させることができる。
5.チームワーク機能
- 招待メンバー::
- アニマのウェブサイトで、「チーム設定」にアクセスする。
- 同僚のメールアドレスを入力して招待リンクを送信します。
- リアルタイム同期::
- チームメンバーは、最新のデザインやコードをプラグインやウェブサイドで見ることができます。
- 修正は即座に更新され、通信コストを削減する。
6.特殊機能の動作フロー
- コード・パーソナライゼーション::
- プラグインの "AI設定 "を開き、あなたのチームの既存のコードサンプルをアップロードしてください。
- AIが命名規則や構造を分析し、チームの習慣に沿ったコードを生成する。
- レスポンシブデザイン::
- プラグインで「レスポンシブ」を選択し、ブレークポイントスライダーをドラッグする（例：768px、1200px）。
- コードの適応を確実にするために、さまざまな画面効果をプレビューします。
- 出版サイト::
- プラグインの「ウェブサイトとして公開」をクリックします。
- ドメイン名（要有料プラン）を設定し、独立したウェブサイトを作成します。
使用上の推奨事項
- 初挑戦簡単なデザインから始めて、コードを生成するプロセスに慣れてください。
- 最適設計Figmaの自動レイアウトでコード品質を向上。
- 支払いプラン頻繁に使用する場合は、無制限のエクスポートとプレミアムサポートのロックを解除するために、ProまたはEnterpriseプランに加入することをお勧めします。
日本語 
简体中文 
English 
Deutsch (Sie) 
Português do Brasil