デザインファイルに仕様（サイズ・スペース・コメントなど）を加えるためのデザイン素材 -UXUI Doc Kit
Webページやスマホアプリのプロジェクトで、チームと開発者向けのドキュメントを作成する際に使用するサイズ・スペース・コメントなど、236種類の要素をまとめた無料のデザイン素材を紹介します。 デザインガイドラインを見栄えよくしたい人にオススメです！ UXUI Doc Kit for Sketch/Figma UXUI Doc Kitの特徴 UXUI Doc Kitのダウンロード UXUI Doc Kitの中身 UXUI Doc Kitの特徴 UXUI Doc Kitは、デザインファイルに仕様を加えるための素材です。SketchとFigma用が揃っています。 UXUI Doc Kitには、以下の素材が含まれています。 アロー: 26種類 スペース・サイズ: 水平および垂直 ノート: ステッカー、ラベル、ダイアログ、コメント カーソル ライドモード・ダークモード 各要素はカスタマイズが可能です。
The design expert’s choice for digital product design
Sketch 100 — Everything new in 3 minutes. Learn more
チームの課題から考える、Adobe XDとSketchの導入メリット | PSYENCE:MEDIA
この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2017 の投稿記事です。 こんにちは！現在キッズリーのデザインを担当しているデザイナーの町田（@macheri_me）です。 今年で中途入社３年目となりました。本日は弊社の制作事例をもとに、AdobeXD・Sketchの活用法についてご紹介します。 【この記事を読んでもらいたい人】 これからAdobe XD、Sketchどちらを導入しようか悩んでいる人 デザイン制作フローの中で課題を抱えており、解決したい人 Adobe XDとSketch。自分のチームにはどちらが最適か サービスのデザインを制作する際、何のツールを使っていますか？少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。しかしながら、これらはUIデ
CI&UIリニューアルしながらデザインシステムを作った話｜Yoko Nishida
「コデアル」という求人サービスのデザインシステムを作ってみました。CIリニューアルに伴う全スタイル＆コンポーネントの刷新、エンジニア＆デザイナー間の協業、そして約3ヶ月運用してみた感想をつづってみます。 実際に使っているドキュメント、Sketchファイルはこちら↓ ・Codeal Design Guideline ・Codeal UI Kit.sketch ・Sketch Tips for Codeal Design Guideline Codeal Design Guidelineの中身はこんな感じ。 1. デザインシステムとは組織やサービスの形態によって解釈は分かれると思いますが、私はデザインシステム＝ブランド、設計、開発をつなげるガイドラインだと認識しています（引用：結局デザインシステムは何なのか） スタイルガイドやテンプレートだけではなく、それらをチームでどう活用するかを言語化して
基本機能からプロトタイプ制作まで！用途別・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のテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
Atomic Design × Sketch Libraryを用いてデザインファイルを作る - Qiita
Sketch LibraryはVersion 47(2017年10月10日release)で追加されたSketchの新機能です。 Sketchファイル間で作成したSymbolを共有、同期することが出来ます。 ※Symbol: Sketchで繰り返し利用可能なページとは別で切り出された要素のこと Sketch Libraryが便利な点は、以下のように今までは、共通の要素に対して修正が入ったときに全てのデザインファイルに対して手動で修正が必要でした。(デザインファイルを画面毎に分割している場合など) 今まで Sketch Libraryを活用した場合 Sketch Libraryを活用するとLibraryの更新があった場合には差分を抽出して、画面の更新を行うのみ(ボタンクリックのみ)で完結することが出来ます。 詳しい使い方は公式を見て頂けると！ 両者のメリットを改めて考えると Atomic D
Sketchにインストールしておくと便利なプラグインのまとめ
Sketchはそのままでも利用できますが、プラグインをいれると更に便利になります。 Webページやスマホアプリの制作に便利なSketchのプラグインを紹介します。 Paddy 文字数を変更したり、子要素のサイズを変更すると、親要素のレイアウトが崩れてしまうことがあります。そんな時は、このプラグインが便利です。 要素にpaddingを指定したら、それを保ったままレイアウトを変更できます。機能は他にもあり、要素間のスペースを保持する、複数の要素のツラを左・中央・右・上・中央・下で揃えるなど、要素を配置するための便利な機能が備わっています。 ガイドラインの作成が簡単になるSketchのプラグイン -Measure Measure デザインのガイドラインを作成する時に面倒なのが、サイズやスタイルを調べてそれを記述することです。Measureは指定した要素のサイズやカラーなど、要素のスペックが記述で
Sketch移行とUIコンポーネント化で、良いことしかなかった話
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
UIを制作するベストなアプリ、とばかりに普及したSketch。最近はHTMLコーディングに役立つSketch Pluginも増えてきました。 本日は、デザイナー視線ではなく、コーダーやプログラマー的な立場からみた、コーディングを10倍早くするSketch Pluginを紹介します。 はじめに紹介するのは、「Make Exportable」というプラグインです。画像の「Export」を爆速にするプラグインです。 Retina Displayのような高解像度ディスプレイも今や当たり前になり、画像を利用するときにも@1xや@2xなど、1つのレイヤーから複数種類の画像形式のファイルやサイズの書き出しをするのが当たり前になりました。 しかし、Sketchでは、そのような作業を行うときに欠点があります。複数の種類の画像形式のファイルやサイズの指定を一つ一つおこなうにはかなり面倒です。 そのような時に「
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
Sketchでデザインをして気付いたPhotoshopより優れているポイント | creive【クリーブ】
こんにちは。 Sketch3にPhotoshopから乗り換えて1年が経つデザイナーです。 すでに使っている人が多数かと思いますが、慣れ親しんだPhotoshopを止められない！という方もいるのではないでしょうか。 今回は、「Sketchって気になってるけど実際どうなの？」「Photoshopとどっちがいいの？」という方へ向けて、Sketchが優れている理由をいくつかあげてみました。 是非参考にしてください！ Sketchとは SketchはMac用のベクターグラフィックソフトです。 ベクターソフトでありながらピクセル基準で作成することが前提のつくりになっており、Web制作やUIデザインに特化しています。 日本でのweb制作といえば、Photoshopが有名かと思います。 筆者も以前はPhotoshopをメインに使っていましたが、今ではSketchに魅了されメインソフトにしました。 アプリケ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design
Bootstrap 4で実装されているデザインシステム要素すべてをデザイン素材にした無料素材 -Bootstrap Design System
これがあると、すぐできる！コーディングに関するドキュメントを作成する用の無料HTMLテンプレート -Scribbler
Sketch.appで最近できること (with image, tweets) · yhassy · Storify
Apple Design Resources
Prottとsketchとzeplinのススメ
Sketch3でWebデザインするために最低限知っておきたいこと
https://creative-tweet.net/
DrawIt - Bohemian Coding
