Locofy.ai × XD を使ってみる（導入編）

Locofy.aiとは

公式Twitterにはこのように書かれています。

Ship products 3-4x faster - convert Figma or Adobe XD designs into React, HTML-CSS, Gatsby, Nextjs and React Native code!

要するにデザイン系ツールであるAdobeXD(もしくはFigma)から、自動的に「React」「HTML-CSS」「Gatsby」「Nextjs」「React Nativ」といったプログラムに変換しコードを書き出してくれる便利なプラグインです。

今回は、AdobeXDにLocofyを導入してみたいと思います。

導入手順

1.アカウント作成
Locofy.ai公式ページにて画面右上の"Sign up FREE Beta"よりアカウントを作成します。現在はベータ版とうことで無料でアカウントを作成することができます。(今後どうなるかは不明)

2.プラグイン導入
作成したアカウントを使用してログインを行うとこのような画面が表示されます。
今回は、AdobeXDを使用するので「Get Adobe XD Plugin」を選択します。

すると、Adobeのプラグイン導入画面に映るのでインストールを行います。

3. XDを開く
   Adobe XDを開き、画面左下のプラグインボタンを押し、プラグインの一覧の中にLocofy.aiが表示されていれば、導入成功です。
   

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

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

実践編

この記事の続きはこちら⇒実践編