アプリのUIデザイン作成ツールとして有名な Sketch 。今週、バージョン44が発表されたタイミングで、Sketch をより使いやすくするオープンソースの優れた無料プラグインをまとめてみました。 Sketch のユーザーコミュニティーは、とても活発に情報交換が行われており、ワークフローを根本的に改善する数多くの素晴らしいプラグインを見つけることができます。この記事では、すべてのデザイナーが持っておきたいベストプラグイン12選をご紹介します。 UIデザインの作成ツール Sketch！10の魅力と入門フリー素材50個まとめ Sketch Measure Sketch Measure は、デベロッパーやプロジェクトマネージャー、他のチームメンバーの作業を整理し、プロジェクトの概要をまとめるのに役立ちます。 また、デザインからコーディングまですべてのプロジェクトを一人でこなすひとにも便利なツール

@mixin lineClip($line-number: 2, $line-height: 1, $right-space: 1em, $background-color: #ffffff) { position: relative; overflow: hidden; height: calc(#{$line-number + em } * #{$line-height}); padding-right: $right-space; line-height: $line-height; background-color: $background-color; &:before { content: "..."; position: absolute; right: 0; bottom: 0; display: inline-block; width: $right-space; } &

TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS

あらゆるサイトで利用されているボタンは、小さいですがユーザーが直接操作を行う重要なパーツ要素のひとつです。ボタンをデザインをするとき、見た目だけでなく押したときのエフェクトの作成に迷ってしまうという人も少なくないでしょう。 今回、Animocons というCodropsによるアニメーションボタンを使い、Bootstrapを使う感覚で、HTMLとクラス名を書くだけでアニメーションつきのボタンが簡単に実装できるようにしました。 注目が集まっているアニメーションを利用した、動きにアクセントのあるボタンデザインを作成してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方は簡単で、クラスつきのHTMLを書くと、その要素がアニメーションボタンになります。 ※ アイコンに