2018年6月27日

デザイン

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

目次

  1. はじめに
  2. インスペクタ機能
  3. 詳細
  4. まとめ

はじめに

本記事ではバージョン管理ツール、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といったイメージでしょうか。

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

  • zeplinなどのように外部ツールにデザインをエクスポートしなくても確認できる
    • バージョン管理ツール内でインスペクタを立ち上げることができるので、デザインが最新のものかいちいち確認しなくてもOK
      (変更したデザインがどこなのかも「compare」で確認することができるので、その分のコミュニケーションコストも少なくなります)

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

    詳細

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

    インスペクタ機能の場所


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

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

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

    レイヤーや距離を測る

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

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

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

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

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

    CSSコードをコピー

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


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

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

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

    Sketchがなくても使える

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

    まとめ

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

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

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

    • コミット間で変更されたプロパティのハイライト
    • コード生成の多言語対応 (Sass, iOS, Android)
    • Sketchのエクスポート設定によるアセット生成
    • 外部ディベロッパーにデザインデータを渡せるAPI

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

    Sketchのお仕事に関するご相談

    Bageleeの運営会社、palanではSketchに関するお仕事のご相談を無料で承っております。
    zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
    ぜひお気軽にご相談ください。

    無料相談フォームへ

    0

    0

    AUTHOR

    sasakki デザイナー

    アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

    アプリでもっと便利に!気になる記事をチェック!

    記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

    簡単に自分で作れるWebAR

    「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

    palanARへ
    palanar

    palanはWebARの開発を
    行っています

    弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

    webar_waterpark

    palanでは一緒に働く仲間を募集しています

    正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
    ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

    話を聞いてみたい

    運営メンバー

    eishis

    Eishi Saito 総務

    SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

    sasakki デザイナー

    アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

    しまだ

    しまだ デザイナー

    WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

    Miu マーケター

    ドイツでWEBマーケティングしています。

    しんのき エンジニア

    主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

    yamakawa

    やまかわたかし デザイナー

    フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

    furuya エンジニア

    サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

    Sayaka Osanai デザイナー

    Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

    はらた

    はらた エンジニア

    サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

    うえまつゆい エンジニア

    サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

    kobori

    こぼり ともろう エンジニア

    サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

    sasai

    ささい エンジニア

    フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

    damien

    Damien

    WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

    デザイナーゲスト

    ゲスト デザイナー

    CONTACT PAGE TOP