Abstract72アップデート！インスペクタ機能が追加

はじめに

本記事ではバージョン管理ツール、Abstractの最新のアップデート内容についてご紹介します。

前回のコメント返信機能とメール通知機能が追加された一月前のアップデート以来のアップデートです。

今回で、バージョン0.72.0になったAbstractですが、今回はインスペクタ機能というものが追加されました。

デザインを実装する際に必要な高さ、幅、色、フォントなどが取ってこれる機能です。

前回のアップデート内容の記事:

Abstractにコメント返信、メール通知機能が追加！

Abstractというツール自体についてもっと詳しく知りたい方向け:
【Sketch】デザインをgit管理する！Abstract

インスペクタ機能

Introducing Inspect: Where the file is the design specより

今回新しく追加されたインスペクタ機能ですが、このように今まで、「comment」, 「compare」と並んでいたところに 「inspect」という項目が追加され、こちらをクリックすることで、デザインの寸法などが見れるようになっています！

zeplin with Abstractといったイメージでしょうか。

メリットとしては大きく２つあります。

デザイナーとしては、毎回加えた変更をエンジニアに伝えるコストが少なくなり、エンジニアとしても仕様変更などが起こった際、すぐにデザインに反映されるので混乱が起きにくいです。

詳細

では、本機能の詳細を項目ごとに見ていきましょう。

インスペクタ機能の場所

Introducing Inspect: Where the file is the design specより

まず、どこにあるのか、という問題ですが、今まで、「comment」, 「compare」と並んでいたところに 「inspect」という項目が追加され、こちらをクリックすることで、インスペクタ機能を使うことができます。

また、Option + 1-3 とそれぞれショートカットも用意されているので、頻繁に使う方はそちらのショートカットを使ってください。

レイヤーや距離を測る

レイヤーをクリックすることで、そのレイヤーの配置、大きさ、余白などの情報を見ることができます。
この機能はテキスト、シェイプ、パス、シンボルなど全てのレイヤーに対応しており、
１つのレイヤーをクリックし、他のレイヤーにホバーすることでそのレイヤーとホバーしているレイヤーの距離を測ることも可能です。

レイヤーやシンボルの仕様を見る

レイヤーを選択後、右のパネルで透明度、回転、背景、シャドウ、ラインハイト、上下中央寄せなど
様々な情報を見ることができます。

色やフォントに関する情報がみれる

インスペクタ上ではアートボード上で使われている全ての色をまとめてくれます。
また、フォントに関しても同様に表示してくれたり、それぞれのプロパティを見ることができたりします。

CSSコードをコピー

インスペクタでは、デザイン上の全ての要素のCSSを生成してくれます。
必要なCSS御身を選択するもよし、全てのプロパティを素早くコピーするのもよしです。
他の言語対応は近日予定されているようです

Introducing Inspect: Where the file is the design specより

テキスト内の文字をクリックでコピー

Abstractではアートボード上のテキストをクリックすることでクリップボードに直接コピーすることができます。

Sketchがなくても使える

SketchやAbstractがないエンジニアでも、Abstractのウェブアプリ上で見ることでデザイン実装に関して必要な情報を見ることができます。

まとめ

以上、今回はバージョン管理ツール、Abstractのアップデート内容についてご紹介しました。
今回のアップデートはコメントの返信とメール通知というチームとして進めていく上で便利な機能が追加されました。

本リリースのすべての変更を確認したい方はAbstract公式のrelease notesからご覧ください。

また、現在実装中の機能でリリース予定のものがいくつかあります。

最後に、Abstractでできることや、その使い方やについて知りたい！という方はこちらの記事をご覧ください！
【Sketch】デザインをgit管理する！Abstract