Q&A おすすめSketchプラグイン
使用されているSketchのPluginを教えてほしいです！ しゅんさん どんなUIデザイナーかで決まります Sketch は UI デザインツールとして優秀なアプリです。日本ではまだまだ Photoshop が有力な現場が少なくないですが、欧米では Sketch が過半数以上を占めている状態です。およそ 2000 人のデザイナーを対象にしたデザインツールの調査によると、UIデザイン、ワイヤーフレームの定番は Sketch になっています（2018年1月現在）。 私の仕事でも欠かせないツールではあるものの、プラグインの組み合わせ次第でまったく違う使い方になる場合があります。定番と呼べるプラグインはありますが、それ以外は自分の役割や仕事現場によって大きく変わります。Airbnb のようにオリジナルのプラグインを開発して、自分たちのワークフローを最適化しているところもあります。 よって、自分が
Sketch 初心者は入れておきたいオススメのプラグイン6選 - KitchHike Tech Blog
こんにちは。デザイナーの羽野です。KitchHike では Web プロダクトのデザインとコーディングを担当しています。最近は React Native に手を出し始めました。Web の知識が活かせるのでなかなか楽しいです。 さて、デザインの際は Sketch を使っているのですが、恐らく知らない方はもういないんじゃないでしょうか。Sketch の便利さを語ろうとしたらそれだけでひとつ記事が書けてしまいますが、便利さのひとつにプラグインを活用した拡張性の高さが挙げられます。 というわけで、今回は Sketch を使うにあたってぜひとも入れておきたいプラグインを厳選して紹介したいと思います。必須系プラグインに的を絞ってあるので、Sketch 初心者の方はぜひ入れてみてくださいね。 Runner http://sketchrunner.com/ Sketch はデフォルトでも便利ですが、使って
基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選｜Goodpatch Blog グッドパッチブログ
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基本機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
Sketchにインストールしておくと便利なプラグインのまとめ
Sketchはそのままでも利用できますが、プラグインをいれると更に便利になります。 Webページやスマホアプリの制作に便利なSketchのプラグインを紹介します。 Paddy 文字数を変更したり、子要素のサイズを変更すると、親要素のレイアウトが崩れてしまうことがあります。そんな時は、このプラグインが便利です。 要素にpaddingを指定したら、それを保ったままレイアウトを変更できます。機能は他にもあり、要素間のスペースを保持する、複数の要素のツラを左・中央・右・上・中央・下で揃えるなど、要素を配置するための便利な機能が備わっています。 ガイドラインの作成が簡単になるSketchのプラグイン -Measure Measure デザインのガイドラインを作成する時に面倒なのが、サイズやスタイルを調べてそれを記述することです。Measureは指定した要素のサイズやカラーなど、要素のスペックが記述で
Sketch LibrariesとAbstractを使ったAtomic Designの実践💪 | Nagisaのすゝめ
はじめに こんにちは！ 社長室インキュベーションチームで新規サービスのデザインを担当しています田村です。 先日、デザイナーリーダーの川畑が執筆した記事にある通り、Nagisaではデザイン手法としてAtomic Designを採用しています。 Atomic Designは、コンポーネント指向のデザイン手法です。 コンポーネント指向はパーツの再利用と効率の良い運用を可能とし、デザインの追加・変更が容易であり作業の効率化に繋がります。 また、React Storybookなどを使用すれば「あのボタンがない」「カラーが違う」などの実装段階での抜け漏れも防げますし、デザイン変更のハードルも下がるかと思います。 コンポーネントの粒度がしっかりと定義できていれば、エンジニアさんとの共通言語が増えてコミュニケーションの質が高まることも期待できます。 このようにAtomic Designはデザイナーの作業効
Sketch ✕ Atomic Design デザインの制作時間を大幅に減らす仕組みとは？！ ｜ブログ｜root｜芯を問い、成長に貢献する
この記事はGoogleのUXデザイナーJoe Toscano氏のブログ記事を公式に許可をいただき翻訳したものです。 最近、「デザインをコーディングと同じようにモジュラーでつくる方法」という記事を書きました。その記事でも説明したように、Atomic Design は、チーム内での複製とコミュニケーションが簡単なデザインをつくることを可能にするすばらしい方法です。 チーム内でのコミュニケーション力を強化するだけでなく、モジュラーデザインは、デザインのスタイル変更をとてつもなく簡単にすることができます。適切に使いこなせば、モジュラーデザインによって制作時間を大幅に減らし、収益を大きく改善できるはずです。 有意義なコミュニケーションが重要他のデザイナーやデザインチームと仕事をするときによく経験する問題の一つが、仕事の引き継ぎです。他の人の仕事を引き継ぐとき、そのデザインが整理されていない状況という
Sketch を使い倒す！デザイン作業が捗る「時短」プラグイン50個まとめ【2017年版】
デザインアプリ Sketch が、デザインの現場で人気となっています。公式の利用ユーザー数は発表されていませんが、多くのデザインチームがSketchを使っており、名前を聞いたことがある人も多いのではないでしょうか。 Sketch が他のデザインアプリと決定的に異なる点のひとつとして、活発に活動する開発者コミュニティと、これまでに作成された素晴らしいプラグインがあります。これらのSketchプラグインを使用すれば、豪華な3Dイラストやユニークなアニメーションなどを手軽に作成することができます。 今回は、ウェブデザイナーの制作時間を短縮できる「時短」Sketchプラグイン50個をまとめてご紹介します。カテゴリ別に分類されているので、自分にぴったりのプラグインを探してみてはいかがでしょう。 Sketchってこんなに便利！デザイナーが入れておきたい無料プラグイン12個まとめ UIデザインの作成ツー
[Sketch 3] シンボルのインスタンスごとにテキストや画像を設定できるオーバーライド機能の使い方 | DevelopersIO
目次 はじめに シンボルを作る コンテンツをオーバーライドする 小技: 不要なフィールドをインスペクタに表示しない方法 まとめ はじめに 2016年4月に Sketch 3.7 がリリースされ、シンボル機能が大幅に改善しました。 今回は、改善された機能のなかでも特にうれしかったテキストや画像等のコンテンツをオーバーライドする機能について、その使い方をご紹介します。 シンボルを作る まずはシンボルを作ります。 サンプルでこんな感じのプロフィールカードUIを作ったので、メニューの Layer > Create Symbol からシンボルを作ります。 シンボルを作ったらインスタンスを選択します。 インスペクタに注目です。なにやら文字を入力したり画像を選択したりできそうなフィールドが追加されているのがわかります。 画像を見ていただくとわかるように、フィールド名がイマイチです。 これは、レイヤー名が
![[Sketch 3] シンボルのインスタンスごとにテキストや画像を設定できるオーバーライド機能の使い方 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ba5931eb59fad75ed3e9d66f5af338c3bf381a3b/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F12%2Fsketch.png)
Sketchのバージョン41で追加された『シンボルのOverrides』を使ってUIデザインの状態管理をラクにする - よりぶろ
Sketchが装いも新たにバージョン41に上がりました。 今回のアップデートの目玉は何と言っても『Nested Overrides』ではないでしょうか。 説明文には Symbol instances can now override their nested Symbols to any other Symbol with the same size. と書かれています。これ、どんな機能かと言うと『シンボルのOverrides』なんですね。 Overridesについて軽くおさらいをすると、Sketchのシンボルには『インスタンスに対してラベルや画像を（親の情報を維持したまま）別の内容に上書きすることができる』機能がついているんですね。それがOverridesです。 こういったシンボルを作って インスタンスを複製して配置した後に、こんな感じにそれぞれのテキストや画像を変えられるのです。 ちな
Craftより良いかも？Sketch上でプロトタイピングするプラグイン「Mirr.io」触ってみた
先日こんな記事を書いたわけですよ ついにSketch上でPrototypeの作成が可能に…！待ってました、Craftバージョンアップデート！！ で、皆さん喜んでらっしゃったじゃないですか。そしたらびっくりですよ、あっという間に同じようなプラグインが出てきちゃって。しかもなんかCraftのPrototypeより良さげなんです。とりあえず試してみてくださいね。 Mirr.io 使ってみた まずはアプリをインストールします。Macアプリがあるのでダウンロードしましょう。 アプリを立ち上げるとこんな感じ。プラグインをインストールしろって言われます。 こんなサンプルアプリを用意しました。STARTを押したらGOALのスクリーンに遷移する感じです。 ボタンにしたいレイヤーを選択して、プラグインからMirr.ioを選択し、Add Actionします アクションとトランジション、そして遷移先が選択できます
SINAP | まだ使っていない方におすすめしたい Sketch 3 超便利プラグイン6選
こんにちは、カナダの22時まで明るい夏の空が恋しい、アシスタントディレクターのLinです。 デザイナーの皆さん、Sketch を使っていますか？ ここ数年、UIデザインツールである Sketch の人気が急増し、デザイナー市場では、Photoshop と Illustrator に加えて、Sketch を利用した実務経験も求められています。 しかし、Sketch はまだ日本語対応しておらず、Photoshop や Illustrator に比べて情報はまだまだ少ないです。そこで、今回は Sketch 3 をより快適に使うため、デザイナー向けのプラグインをご紹介したいと思います。 はじめに 始めにプラグインのインストール方法を説明します。今回紹介する、いくつかのプラグインは Sketch Toolbox という、Sketch プラグインを管理する専用アプリケーションでインストールできます。ま
デザインデータのバージョン管理ができるAbstractを試してみた✌ | UXデザイン会社Standardのブログ
複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。 作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください????」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。 そんなデザイナーの悩みを解決してくれるのが、今回紹介するAbstractです。 Abstractとは AbstractはアメリカのElastic Projects, Inc.が提供しているサービスです。どんなサービスか一言で説明すると「デザイナー向けのGitHub」といったところでしょうか。 Gitの仕組みを利用して、デザインデータ（.sketchのみ対応。Adobe系も対応予定）に対してブランチを切ったり変更内容をコミットしたり、差分をマージする、といったことが可能です。 まだ正式リリースはされておらず、現在はPr
[Invision][Sketch 3]Sketchファイルを使ってInVisionでモックを作る時に知っておきたいこと（小ネタ）
InVisionを実際のプロジェクトで使って見ていくつか小ネタがあったのでまとめてみました。 ページ／アートボード Sketchで定義しているページ／アートボードですが、InVision側にページという概念がないので、InVision上ではアートボードが基準になることを意識しなければいけません。 ページ・アートボード名の先頭に-を付けると読み込み対象外にできる すべてのアートボードはユニークな名前にする（同名のアートボードは上書きされる） ページ名・アートボード名は長すぎると収まりきらないため簡潔にする必要がある。 SketchtoolやGulpで書き出しやすいようにページ、アートボード・レイヤー名は小文字が良い アートボードの背景色オプションInclude in Exportはオフにし、InVision側で背景色を指定する（切り出しに背景色を指定したくない場合） マニュアルソート・自動ソ
![[Invision][Sketch 3]Sketchファイルを使ってInVisionでモックを作る時に知っておきたいこと（小ネタ）](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
Android端末でSketchをリアルタイムプレビューするアプリ「Crystal」の紹介
昨日公開したSketchがレスポンシブデザインに対応した神アップデート！Smart Symbol Resizingをリリースはたくさんの反響を頂きました。ありがとうございます。 そして今日もまたSketchの話を…Sketchの話ばかりでスイマセン。決してBohemian codingの回し者ではありません。 Sketch MirrorのAndroid版、Crystalの紹介。 Sketchで作ったイメージをiPhoneでプレビューできる「Sketch mirror」というアプリがありますが、iOS版しかありません。Androidで見たい！というニーズはあると思うのですがBohemian codingは作っていませんでした。 Crystalというアプリはサードパーティ製。でも連携はめちゃくちゃ簡単です。 まずはアプリをインストールしてください。 ストアのページはこちら インストールしたらア
まだ使っていない方にはオススメしたい。Sketchって結局どんな感じなのよ？と思ったので試してみたよ。
こんにちは！霙(@xxmiz0rexx)です！ 2015年ももう終わろうとしている時に、遅ればせながらやっとデザインツールにSketchを導入してみました。 まだインストールして1週間ほどなんですが、入れて良かったという感想しかないです…。爆速で仕事が終わっていくやんけ、、、。そんなわけで今年最後の記事は、今年最後に手に入れたデザインツール『Sketch』をご紹介させてもらおうと思います。もしアプリをデザインする人でまだ使っていない人がいたら参考にしてみてください。Webデザインにも使えますが、やはりアプリデザインにこそ真価を発揮すると思います。 目次 Sketchを使って感動したこと 取り急ぎ入れたSketchプラグイン 気になっているプラグイン（未使用） これだけは覚えておきたいSketchのショートカットキー さいごに Sketchを使って感動したこと まだ使っていない人からしたら、
ヒラギノの縦位置を揃えるちょうべんりなSketchプラグインの紹介 - soutaroブログ
Sketch 3 Advent Calendar 2014の18日目の記事です。 Sketch 3 Advent Calendar 2014 - Adventar Sketchでボタン的なものを作ろうとすると、テキストレイヤーの位置決めに苦労するのはよく知られた話だと思います。ボタンの外側を作って、内側にテキストレイヤーを追加して、Align Horizontallyして左右を揃えるところまでは良いのですが、次に縦を揃えようとしてAlign Verticallyすると、テキストレイヤーが意味不明な位置に移動して、悲しい思いをすることになります。 なにが起きているかというと、テキストレイヤーの形がおかしくなっていて、文字の下に謎の空白ができています。 これは多分ヒラギノの余白の計算が壊れているのだと思います。下の余白が予想外の大きさになった結果として、テキストレイヤーの矩形が意図しない感じに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【sketchユーザー必見】仕事を大幅に効率化！オススメの最新Sketchプラグイン7選【WEBデザイナー/UIデザイナー】2021年版
Sketchsheets - Ready to print sketch sheet templates for UX designers
https://creative-tweet.net/blog/2016/02/invision-lab-craft-impression.html
Sketch 3でデザインしたレイアウトをCSS形式で編集出来るプラグイン「CSSketch」が公開。
