【Zeplinの使い方】デザインデータ(Adobe XD/Photoshop/Figma)からのコーディングを効率化する方法

Zeplin

こんにちはTERUです。
フリーランスでWEB制作(コーディング と ディレクション業務)をしています。

読者の悩み

  • デザインデータ(XDやPSD)からのコーディングをもっと効率的にできないかな?
  • Zeplinの使い方が知りたい

本記事では、こういった疑問に答えます。

僕も普段コーディングで利用している便利ツール、「Zeplin」について導入方法から使い方まで説明いたします。
「Zeplin」を利用することで、Adobe XDやPhotoshop、Figmaのデザインデータからコーディングに必要な情報を素早く取得することができ、作業効率を上げることができます。

そもそもコーディングって何?どんな働き方や学習方法があるの?という事が気になる方は「コーディングとは?働き方や学習方法を解説する【初心者向け】」の記事をご覧ください。

本記事の信頼性

  • Web制作会社にてディレクターを経験
  • WordPressを使ったWeb制作を数多く経験
  • 2019年8月〜フリーランスとして活動開始
目次

Zeplinとは?

Zeplinとは、デザインデータをチームメンバーに共有するためのツールです。
いろんな使い方ができますが、本記事では、コーディングする観点に絞って説明します。

Zeplinでデザインデータを読み込むことにより、各要素の距離や CSSといったコーディングに必要な情報をすぐに確認することができ、作業効率の改善につながります。

Zeplinの便利機能4選

ここでは、コーディングする際に便利なZeplin機能を紹介します。

  • CSSの自動生成
  • フォントとカラーコード の表示
  • 画像書き出し
  • テキストデータの簡単コピー

1つずつ説明しますね。

CSSの自動生成

デザインデータからコーディングに必要なCSSを読み取ってCSS形式で表示してくれます。
※コーディングで一番助かる機能です。

1)要素を選択すると画面右に必要なCSSが表示されます。
CSSの自動生成

TERU

全てそのまま利用できる分けではないですが、あるだけでかなり効率化できます。

フォントやカラーコードの確認

要素を選択することで、背景色やボーダー、フォントファミリーも表示されます。

背景色とボーダー

背景色とボーダー

フォントファミリー

フォントファミリー

画像書き出し

デザインデーター内の画像も簡単に書き出すことができます。
書き出し形式の選択倍率を指定した書き出しも可能です。

1)画面右のナイフのアイコンを選択します。
画像書き出し
書き出せる画像のリストが表示されます。

2)リストを選択すると書き出し形式が表示されるので、選択します。
※今回はJPG形式を選択します。
画像書き出し2

選択できる書き出し形式

  • PNG
  • JPG
  • WebP

3)画面右下の「Download」ボタンを選択して書き出し完了です。
画像書き出し3

書き出し倍率の設定

Assets右横のマークから、「Bitmap Scales」を選択すると設定できる倍率「1x、2x、3x」が選択できます。
画像書き出し4

TERU

チェックがついている倍率の画像が書き出されます。

注意点

画像を書き出すためには、Zeplinに読み込む前にデザインデータで下記の準備が必要になります。

  • Photoshopの場合:対象の画像をアセット化しておく
  • Adobe XDの場合:対象の画像を「書き出し対象」に設定しておく

テキストデータの簡単コピー

要素に入っているテキストデーターをワンクリックでコピーすることができます。
テキストデータの簡単コピー
※「Copied to clipbord」と表示されればコピー完了です。

TERU

小さなことですが、コーディング作業の効率化に繋がります!

Zeplinの使い方(導入編)

Zeplinの使い方(導入編)
Zeplinの導入方法について、画像つきで詳しく説明します。
Zeplinは一部機能は有料ですが、無料版でもコーディングで利用する場合は問題ありません。

Zeplinのアカウント作成

公式サイトにアクセスしてアカウント登録を進めます。

(1)赤枠部分を選択します。

Zeplinのアカウント作成

(2)アカウント登録画面が表示されるので、「メールアドレス」、「ユーザー名」、「パスワード」を入力し、登録ボタンを選択します。

Zeplinのアカウント作成2

(3)アプリのダウンロード画面が表示されるので、WindowsかMacを選択します。
※ここではMacを選択します。

Zeplinのアカウント作成3

(4)ダウンロードしたZeplinアプリをダブルクリックして開始します。

Zeplinのアカウント作成4

(5)ログイン画面が表示されるので、登録した「メールアドレス」、「パスワード」を入力してログインします。

Zeplinのアカウント作成5

Zeplinのプロジェクト作成

デザインデータを取り込むためのプロジェクトを作成します。

(1)「Create Project」を選択します。

Zeplinのプロジェクト作成

(2)プロジェクトの種類は「Web」で「Create」を選択します。

Zeplinのプロジェクト作成2
Zeplinのプロジェクト作成3
※プロジェクトが作成されていることを確認します。

XDとZeplinの連携

XDでZeplinを利用するための連携方法になります。

Adobe社からXDとZeplinを連携するためのプラグイン(Zeplin for Adobe XD)が提供されていますので、プラグインのインストールを行います。(準備はこれだけです!)

参考:Zeplin for Adobe XD プラグインを使ってデザインを共有しよう!

PhotoshopとZeplinの連携

PhotoshopでZeplinを利用するための連携方法になります。簡単です。

(1)Zeplinのメニューから、[Adobe Photoshop Integration]-[install Plugin…]を選択してPhotoshopにZeplinのプラグインをインストールします。

(2)Photoshopの環境設定からプラグインメニューを選択し、「Generatorを有効にする」にチェックがついていることを確認します。

Windowsの方はこちらの公式サイトの手順を参考にして下さい
※英語ですが、内容は簡単です!

FigmaとZeplinの連携

FigmaでZeplinを利用するための連携方法になります。

(1)Zeplinのメニューから、[Figma Integration]-[install Plugin ・・]を選択します。FigmaにZeplinのプラグインをインストールします。

FigmaとZeplinの連携

(2)Figma上で利用するZeplinのプラグインをインストールします。

「install」を選択します。

FigmaとZeplinの連携2
Figmaのプラグインインストール画面

インスタールが完了すると、下記のメッセージが表示されます。

FigmaとZeplinの連携3
TERU

これでZeplinを利用するための準備は完了です。

Zeplinの使い方(実践編)

Zeplinの使い方(実践編)
ここでは、XDやPhotoshopのデザインデータをZeplinに読み込んでコーディングに利用する流れを具体的に説明します。

Photoshopの場合

(1)対象のデザインデータ(psdファイル)をPhotoshopで開きます。

(2)[ウィンドウズ]-[エクステンション]-[Zeplin]を選択します。

Photoshopの場合

(3)photoshopの画面右側に[Zeplin]の拡張画面が表示されるので、「アートボード」を選択した状態で「Export〜」をクリックします。

Photoshopの場合2
※初めからアートボードがない場合は、全てのレイヤーを選択した状態で右クリック-[レイヤーからのアートボード]を選択

(4)先ほど作成したプロジェクトが表示されるので、選択した状態で、[Import]をクリックします。

Photoshopの場合3
※Zeplinへのデータ取り込みは完了です。

(5)Zeplinのアプリを確認するとプロジェクト内にデザインデータが取り込まれています。

Photoshopの場合4

(6)取り込まれたデータを確認すると各要素の距離や コーディングに必要な情報が確認できます。

Photoshopの場合5

XDの場合

(1)対象のデザインデータ(xdファイル)をAdobeXDで開きます。

(2)インポートしたいアートボードを選択し、メニューの[プラグイン]-[ Zeplin for XD]-[Export Selected …]を選択します。

AdobeXDからZeplinへのデータ書き出し

(3)ポップアップ画面が表示されるのでプロジェクトを選択し[Export]をクリックします。

AdobeXDからZeplinへのデータ書き出し2


※これでZeplinへのデータ取り込みは完了です。後はPhotoshopと同じでZeplinの画面で操作できます。

参考:Publishing designs from Adobe XD

Figmaの場合

(1)Figma上で対象のアートボードを選択します。

(2)メニューから「Plugins」ー「Zeplin」を選択します。

Figmaの場合

初めてZeplinと連携する際は、Zeplinアカウントの接続を求められます。

Figmaの場合2

接続した後、Figmaとの連携を許可します。

Figmaの場合3

下記の画面が表示されると接続完了です。

Figmaの場合4

※再度Figmaの画面からZeplinのプラグインを選択します。

(3)「Export」を選択して、デザインデータを取り込みます。

Figmaの場合5

(4)Zeplinのプロジェクトを選択し、Exportします。

Figmaの場合6

※これでZeplinへのデータ取り込みは完了です。後はPhotoshopと同じでZeplinの画面で操作できます。

今回はコーディング速度を上げる便利ツール「Zeplin」について説明いたしました。

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
目次
閉じる