Sketchにインストールしておくと便利なプラグインのまとめ
Sketchはそのままでも利用できますが、プラグインをいれると更に便利になります。 Webページやスマホアプリの制作に便利なSketchのプラグインを紹介します。 Paddy 文字数を変更したり、子要素のサイズを変更すると、親要素のレイアウトが崩れてしまうことがあります。そんな時は、このプラグインが便利です。 要素にpaddingを指定したら、それを保ったままレイアウトを変更できます。機能は他にもあり、要素間のスペースを保持する、複数の要素のツラを左・中央・右・上・中央・下で揃えるなど、要素を配置するための便利な機能が備わっています。 ガイドラインの作成が簡単になるSketchのプラグイン -Measure Measure デザインのガイドラインを作成する時に面倒なのが、サイズやスタイルを調べてそれを記述することです。Measureは指定した要素のサイズやカラーなど、要素のスペックが記述で
エンジニアのための「Sketch入門！」 1時間コース - Qiita
※「Sketch」はMac専用アプリです。Windows版はありません。 「演習ファイル＋動画＋演習付き」で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 ハンズオン用などにご利用ください。 Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在） 有料です。 ちなみにApp Storeでは買えなくなりました。ショバ代かかるか
エンジニアがSketchにチャレンジ | CyberAgent Developers Blog
初めまして。サイバーエージェントのメディア部門でディレクションをしていますshono（@BowyerApp）です。ついこの前まではAndroidアプリのエンジニアをしていました。 先日、弊社デザイナーの井上さんにエンジニア向けのSketch勉強会を開いて頂きましたのでその内容をレポートします。 目次 背景 Sketch（スケッチ）のインターフェース説明 デザイナーはインサートを開かない Sketch（スケッチ）で実際にUIを作ってみる Sketch（スケッチ）のTips 画像の書き出し シンボルを作る シンボルのネーミングを工夫すると更に便利に マージンのシンボル化 まとめ 勉強会の資料 背景 エンジニアとの共通言語を持つことで、「最終的なプロダクトの品質を上げること」 これをきっかけに各々が自分に必要な領域へと技術の幅を広げていくこと Technical Creatorとは？ ー 求めら
Sketchを使う上で知っておくと地味に便利なtips | tipsBear
この記事はSketch Advent Calendar 2016 21日目のエントリーに入る予定だったんですが、21日目の記事を見ての通り、長くなっちゃったので分割した片割れの記事となります。 Sketchを使っていると、こんなとこが不便だなーとか、こんな機能デフォルトでないのかな？ などの疑問が浮かんできます。本記事ではそんな痒いところに手が届くかもしれないtipsをご紹介します。プラグインを入れるともっと便利になったりしますが、それはまた次の機会にでも。 Sketchの知っておくと便利なtips グループ化したあと、グループの中のレイヤーを簡単に選択出来るようにしたい レイヤーを選択する際に、Photoshopだと移動ツールを選択した際にクリックした先がレイヤーかグループか選べるセレクトボックスがありますが、Sketchにはありません。そしてSketchの選択ツールのデフォルトはフォル
SketchとAdobe XDを使っていたデザイナーの私がFigmaに心底惚れたワケ
SitePointのデザイナーであり、デザイン＆UX分野の編集者でもあるAlexが振り返る、2016年のデザインツール事情。たくさんのツールが登場した中でもFigmaは特にお気に入りのようです。 2016年ももう終わりですので（日本版編注：この記事のオリジナルは昨年12月に執筆された）、この1年でワークフローがどう変わったかを振り返るのはおもしろいと思います。この1年で多くのツールや手法が大きく変わったのは驚くべきことです。 個人的には、2016年のデザインおよびUXで注目のテーマは、Chromeアプリが本格的なWebデザインツールの候補になったことだと思います。実際に、2016年はこれに関する記事を3本執筆しました。 振り返ると、4月にはJarek Foksaの優れたツールでありSVGエディタのBoxySVGについて執筆しました（『シンプル・爆速・超便利な無料SVGエディター「Boxy
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
アプリUI制作のチュートリアルで学ぶSketchの使い方 (1/2)
グッドパッチのデザイナーがSketch 3を使ったUIデザインの方法を解説する本連載。第1回ではSketchの魅力についてお伝えしました。今回は、スマートフォンアプリの「Sign upページ」を例に、基本的なUIをデザインする上で必要なSketchの操作を説明します。Sketchの使い方だけでなく、UIデザインに役立つTipsも紹介します。 ※文中の（A）などはショートカットキーです。積極的に使って覚えていきましょう！ Sign upページは、以下の手順で作成します。 アートボードを用意する ナビゲーションバーを置く ユーザーアイコンの画像を丸く切り抜き配置する 入力欄を作成する ボタンを作成する 解説の中では細かい数値や色については触れませんが、同じ数値で作成したい方は図を参考にしてください。また、今回作成する「Sign upページ」のSketchデータはこちらからダウンロードできます。
Avocodeを使ってスライスとコーディングの効率をグッとあげよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近健康診断で初バリウムを体験してきました。意外と大丈夫だったのでもう怖くないですね。検査結果を除いては。こんにちは、先生です。 さて、みなさんはAvocodeをご存知でしょうか。今日はスライスとコーディングの効率を上げてくれる、このAvocodeを紹介します。 Avocodeとは http://avocode.com/ Avocodeはデザイナーとフロントエンドエンジニアの橋渡しとなるWebサービス＆アプリケーションです。 PhotoshopやSketchで作ったデザインデータを解析し、コーディングに必要な情報を表示したり、簡単にスライスを切って画像を出力したりすることができます。 またデザインデータのバージョン管理ができ、デザインにコメントがつけられるので、デザインレビューツールとしても活用することができます。 Avocodeができること デザインデータの追加/更新 Photoshop
Sketch App Sources - New Free Design Resources - Icons, UI/UX Kits, Wireframes, iOS, Android Templates for Sketch
Thousands of UI/UX resources from great and resourceful designers around the world Sharing and building on each other's work is the ultimate form of learning and retaining knowledge. Since 2012, we're curating some of the best resources to help you design, prototype, and collaborate better and faster. UI Kits Apps Icons Illustrations Wireframes Ideas Web iOS Material Data Forms Mockups Real Annota
Devices — Facebook Design Resources
Designing for many platforms Facebook supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Each device comes with a bitmap of the device (with and without shadows) and the original Sketch file for that device. We'll release different cate
グラフィックツール「Sketch 3」試用版をレビュー | 毎日考
最近ワイヤーフレームばかり作っているWeb屋です。 デザインの前段階、なんの要素をどういうふうに置くかという設計書を作るときには、いつもAdobe Illustratorを使っています。 なのですが諸処の事情でAdobe CCを購入する時期を迷っておりまして、仮にイラレがないとしたらワイヤーフレームは何で作るかなー と。（Prototyper もなかなか使えるのですが、少々もたつくのが…） そうしたら数日前にばんくーばーのうぇぶ屋さんで見かけた（とりあえずひと通り知っておこう！2014年の気になる物を色々試してリニューアルしてみた制作の流れ！）「Sketch」というキーワード。イラレの代替にもなり得るアプリケーションらしい。購入するならMac App Storeだけれど、公式サイトから14日間の試用版がダウンロードできるので使ってみたのよ。 Sketch 3 価格: ￥7,800, 開発:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
pixiv SketchのSSRの話
グッドパッチのUIデザイナーに聞く Sketch 3の使い方