Kaleidoscope で hover 部分を確認

Kaleidoscopeが便利そうで  |  gaspanik weblog
この記事を見てKaleidoscope 公式サイトを見ているうちに思いついた、デザインファイルのどの部分が hover で変化するのか確認するのに使えるんじゃないかと!

hover で変化するボタンなどよくありますね。
全く違う色になるとか別のパーツが出現するといったわかりやすい変化だと目視で確認できますが、微妙に淡い色になるなどのちょっとした変化だと、ボタンを表示して hover の動きをつけた状態だと変化に気付くのに、デザインファイルを見比べても見落としやすいです。

そこで Kaleidoscope を使ってみたところ、比較対象の画像を重ねて変化している部分が白く浮き出るようになっているので、hover で変化する部分が一目瞭然です。
メニューは全て英語ですが使い方はとても簡単で、比較したいファイル 2 つをドラッグするだけ。
比較するファイルが画像の場合は、右下の Difference をクリックすると異なる部分だけが白く、他はグレーアウトで表示されます。

これはもうひゃっほうレベル。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です