デザインデータの共有・管理ツール【avocode】

サービスの詳細

avocodeは、Webデザイナーとフロントエンドエンジニア間のデータのやり取りを簡単に管理することができるサービスです。
Adobe PhotoshopやXD、Sketch、Illustrator、Figmaで作ったデザインファイルを取り込むことで、コーディングに必要なCSS情報や素材のスライスを行うことができます。
Windows、Mac、Linuxに対応しており、アプリ版も用意されています。

またSlackやNotion、VSCodeなど外部ツールとも連携可能なので、これらをうまく使うことで効率的に開発を進めることが可能です。

今回は、筆者の作成した簡単なXDファイルを使ってavocodeの基本的な機能をご紹介します。
「ADD PROJECT」または「NEW PROJECT」から新規プロジェクトを作成します。

プロジェクト名とプラットフォームを選択し、CREATE PROJECTをクリックします。

プロジェクトができたので、ドラッグアンドドロップでファイルをアップロードします。
完了したらファイルをダブルクリックもしくは右クリックからOPENで開きます。

画面の左側にはレイヤー情報、右側にはサイズ、ファイルのバージョンや更新者、アップロード日時などのファイル情報、使われているカラー・フォント情報が表示されています。

つづいて左側タブについてご紹介します。
1番上の手のひらアイコンは移動ツールで、ファイルを見やすい位置に移動できます。

2番目の矢印アイコンは、選択ツールで、各要素をクリックしてその情報を表示させることができます。たとえばヘッダー部分を選択すると、以下のように右側にCSS情報が表示されました。
デフォルトではCSSですが、COPY ALLのとなりの設定アイコンをクリックすると、SassやSwiftなど他の言語に変更することも可能です。

3番目の定規アイコンは、メジャーツールで、要素間のサイズを表示します。
PHILOSOPHYをクリックしてメイン画像にカーソルを置くと、PHILOSOPHYとメイン画像間の距離が表示されました。

4番目のスポイトアイコンは、カラーピッカーです。ヘッダー部分をクリックすると、右上にカラーが登録されました。

5番目のナイフアイコンは、スライス機能です。スライスしたい項目を選択して、エクスポートすることができます。

最後のアイコンはピクセルチェッカーです。
実際にコーディングしたものが正しいサイズかどうか確認することができます。
ピクセルチェッカーをクリックすると、透過度とサイズを変更できるウィンドウが開くので、コーディングしたものと重ねてUIに問題ないかチェックが可能です。
ピクセルチェッカーはデスクトップアプリでのみ利用可能ですので、ご注意ください。

この他にも、GitHubのようなリビジョン管理や、コメント機能があります。
プランによって利用制限があるので詳しくは公式HPを確認してください。

筆者の視点

類似サービスでは、対応しているデザインファイルの種類がSketchとPhotoshopに限定されているものが多いのに対して、さまざまな種類に対応している点が魅力です。

またレイヤー情報が表示できる点や、CSS以外の言語でエクスポートできる点、そして個人的にはテキストエディタと連携していて、コーディング内容をリアルタイムで確認できる点とピクセルチェッカーが特に便利であると思いました。

デザイナーとコーダー間の情報のやり取りは手間がかかりますが、avocodeを使えば紹介した機能やリビジョン管理、コメント機能などを使って認識のずれを軽減することができます。
有料サービスではありますが、かなり業務効率化につながると感じたので、無料期間を利用してぜひ一度試してみてはいかがでしょうか。