概要
Figma をコードにエクスポートします（CSS、Tailwind CSS、またはスタイル付きコンポーネントを使用した HTML、React、または Vue コード）
手順
中央の下のメニューからアクションを選択してください。（有料と無料ではアイコンが異なります。）
プラグインとウィジェットをクリックし、Animaで検索してください。
まず最初にモード選択画面があり、上部の画面が出ている場合は【Swithボタン】で切り替えてください。現在、このモードではAesopの仕様に対応できません。
今回はこの画面のモードを使用します。
Create new projectでまずは新規プロジェクトを作成しましょう。案件毎にこのプロジェクトを作成することをお願いします。
プロジェクト名は【一意となるProject名】で設定してください。
Responsive pageを選択してください。
Desktop / laptop / SP それぞれのデザインカンプのフレームを選択してください。
Desktop / laptop / SP それぞれのデザインカンプが認識されると上記画面のようになりますので、完了後に【Save page】をクリックしてください。
ボタンのホバー設定については調整中です。（こちらはシステム部と調整できましたら、Slackとこちらのページにてお知らせいたします。）
【Get Code】をクリックしてください。
【HTML】を選択してください。
【Go to Anima】を選択すると、デフォルトのWebブラウザが開かれます。
Webブラウザが開かれたら、Export Codeをクリックし、Download ZIPからZIPファイルをダウンロードしてください。
ZIPファイルをダウンロードするとこのような画面が表示される場合があります。（初回？のみ）そのまま待ちましょう。
ZIPファイルをダウンロードする場所を選択してください。（Webブラウザの設定によって場所の指定ができない場合があります。）
ZIPファイルの中身は、index.htmlファイルとimg / fonts / css フォルダになります。（index.htmlは名前がフレーム名から設定されますが、名前の命名が安定しない場合があります。こちらも調査・検証をして解明できましたらまたSlackにて共有いたします。）
できあがったHTML/CSSをそのままではまだ不十分なコーディングデータです。
このデータをAesopのシステムにアップロードすることでLPとして利用できます。
※今回はこのFigma Plugin Animaを利用する方法を覚えていきましょう。
コメント