🛰️

Locofy.ai × XD を使ってみる（実践編）

2022/11/21に公開

Adobe XD

React

locofy

tech

はじめに

この記事は、Locofy.ai × XD を使ってみる（導入編）の続きです。
AdobeXDにLocofy.aiの導入が済んでいない方は、導入編から読み進めてください。

英語ですが、YouTubeにも公式チュートリアルが上がっているのでこちらの動画も参考になります。公式チュートリアル

前準備

Locofy.aiのプラグインは、XDにてすでに作成されているデザインに機能を割り当てていくことで、最終的にコードとして出力することができます。
したがって、Locofyの操作をする前にXD上で画面デザインを完成させておいてください。

手順

1. プロジェクトを作成

前準備にて作成したXDデータを開いた状態で画面左下のプラグインメニューを開きます。

プラグイン一覧の中から、Locofy.aiを選択するとプロジェクト作成画面が表示されます。
上から、

プロジェクト名
書き出すフレームワーク選択()
コードタイプ選択
スタイルガイド
スタイリング
ファイル名
の項目を自分の出力したい形式に合わせて選択し、Createを押します。

2. プレビューの確認

まずはXDで作成した画面がブラウザ上でどのように表示されるか確認してみたいと思います。
　後ほど各要素に機能の割り当てを行っていきますが、このプレビュー機能で随時動作を確認しながら作業を進めていくことができます。

プレビュー表示したいレイヤーを選択した状態で、画面左下の「Preview」から「Open Preview」をクリックすることでブラウザが開き、プレビューを確認することができます。
ただし、まだ各要素にタグ付け（機能の割当て）をしていない為、どこを押しても反応はありません。

3. タグ設定（機能割当て）

XDで作成した各要素（ボタンやリンク等）にタグを設定することで、機能を割り当てることができます。
レイヤーを選択した状態で、割り当てたい機能を選択することで各要素にタグが設定されます。

タグ付けを行うと、詳細な設定画面が出て来ます。

〇テキスト

propertiesからタグの情報を選択することができます。

〇ボタン

propertiesの欄ではUIライブラリを選択することができます。
XDの画面に表示されている要素を変更したくない場合は、Noneを選択しましょう。
仮にBootstrapを選択した場合、出力される画面はXDで設定した要素ではなくBootStrapの標準の要素に置き換わります。

Actionの欄では、ボタンを押した際の動作を設定することができます。
別の画面に遷移したい場合は「ChangePag」、別のサイトへ飛びたい場合は「Open pupup」、ポップアップを表示したい場合は「Open pupUp」を選択します。
※ポップアップを使用したい場合は、先にポップアップとして表示したいレイヤーに"popup"としてタグを設定しておく必要があります。