Figma3.0リリースでFigmaがDOPEなデザインツールになった｜SketchでもAdobe XDでもない選択肢｜Nao Komura｜note
みなさんはFigmaというデザインツールをご存知でしょうか。 正直な所、Adobe XDやSketchなどと比べると知名度も低いし、それらのツールと比べても機能は充実しているのですが使い所が微妙。 (ちなみに、Figmaの公式サイトにもXD、Sketch、Invision Studio、Framerと比較したページはあるのですが全部同じ内容で肩透かしをくらいます。) という具合に個人的に推しているデザインツールではあるものの、惜しい部分が多くまだ布教できる段階では無いな、という印象も持っていました。 しかし...... バージョン3.0のリリースでその印象が大きく変わり、最強のデザインツールFigmaを布教するぞ、という気持ちになりました(謎の使命感) ということで、Figmaの機能の紹介をメインに主要なUIデザインツールであるSketchとAdobe XDとの比較なんかも合間合間していこ
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
Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ | Stocker.jp / diary
Webデザイン Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ Thursday, September 27th, 2018 Webデザイン制作で使用するアプリは多様化しており、これからWeb制作をはじめたい方にはどれを選べば良いか分かりにくいかもしれません。 それぞれのアプリケーションには一長一短あり、用途によってどのアプリケーションが適切かは変わります。 この記事では、Photoshop、Illustrator、XD、Sketchに絞り、それらのアプリケーションの特徴についてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 01の内容を一部抜粋し、この記事用にリライトしたものです。 Photoshop向きのデ
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ
Sketchのプラグインを作る①｜Yukiya Okuda｜note
プラグインを構成する要素。あんま覚えなくてよい。 - プラグイン : プログラムやらなんやかんやファイルの集まり - プラグインバンドル : プラグインに関するなんやらかんやらが入ったフォルダ - コマンド : プラグインを構成する処理の単位、通常複数のコマンドが組み合わさってひとつのプラグインを構成する - アクション : コマンドを実行するきっかけとなるユーザの行動（メニューを選択する、ファイルを変更する、とか） - ハンドラ : アクションを検出してコマンドを実行するための橋渡しをするプログラム - スクリプト : プログラムが書かれたファイル Sketchプラグインのスクリプト（プログラム）はJavaScriptで書きます。ES6というお洒落なバージョンのJSが使えるが、面倒くさければ使わなくてよい。 Node.jsが必要なので、各自インストールする。npmも入れる。入れたらskp
Sketchで大活躍のショートカット集｜ikutani41
僕は『Sketch』をUIデザインツールとして業務利用しています。 Sketchにはたくさんのショートカットが用意されていますが、「とりあえず実務上はこのあたりさえ使っておけばUIデザイン業務はそこそこ作業スピード出せるよ」というものをまとめました。 図形の挿入 左上から選択・・ とかやってると遅いです。キーボードで一文字打つだけですし、これは覚えましょう。 もし忘れてしまった時も、Insertメニューにヒントが表示されています ・四角形：R（Rectangle） ・円形：O（Oval） ・線：L（Line）※角丸四角形（U）は、普通に四角形を置いたあと corner-radius 指定すればいいので覚えなくてもいいかと。 ガイドの表示・非表示 ・ガイドの表示・非表示：Ctrl + Rこれさえ覚えておけば一瞬で表示を切り替えられます。1日に何回もこの操作をやることになるでしょう。 グループ
エンジニアがSketchにチャレンジ | CyberAgent Developers Blog
初めまして。サイバーエージェントのメディア部門でディレクションをしていますshono（@BowyerApp）です。ついこの前まではAndroidアプリのエンジニアをしていました。 先日、弊社デザイナーの井上さんにエンジニア向けのSketch勉強会を開いて頂きましたのでその内容をレポートします。 目次 背景 Sketch（スケッチ）のインターフェース説明 デザイナーはインサートを開かない Sketch（スケッチ）で実際にUIを作ってみる Sketch（スケッチ）のTips 画像の書き出し シンボルを作る シンボルのネーミングを工夫すると更に便利に マージンのシンボル化 まとめ 勉強会の資料 背景 エンジニアとの共通言語を持つことで、「最終的なプロダクトの品質を上げること」 これをきっかけに各々が自分に必要な領域へと技術の幅を広げていくこと Technical Creatorとは？ ー 求めら
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では、そのような作業を行うときに欠点があります。複数の種類の画像形式のファイルやサイズの指定を一つ一つおこなうにはかなり面倒です。 そのような時に「
SketchからObjective-CやSwiftのコードが生成できちゃう？！新デザインツールAnima Sketch to Codeが間もなくローンチ。
数々のプロトタイピングツールを試しているうちに、エンジニアの方なら誰しもが思ったこと…それは 「ここまで出来るんならコード生成してよ……」 ってことなんじゃないでしょうか？ プロトタイピングツール？NO！新しいデザインツールだ。 たぶんこのAnimaが開発中の「Sketch to Code」という新しいツールは今までのプロトタイピングツールを利用した工程に縛られているとピンと来ないツールなのではないでしょうか？ 今まではデザイナーがどんなに頑張ってアニメーションを作っても、それをエンジニアが再び頑張って実装する…という二重構造だったわけですが、これからはAnima上でレイアウトやアニメーションがバッチリ決まれば、エンジニアはよしなに生成されたコードを利用すればいいということに。 とりあえずデモを見てください。 Auto Layoutからアニメーションまで。 リアルタイムプレビューしながらA
Sketchがレスポンシブデザインに対応した神アップデート！Smart Symbol Resizingをリリース
Sketchがレスポンシブデザインに対応した神アップデート！Smart Symbol Resizingをリリース 昨日アップデートされたSketchのバージョン39からSmart Symbol Resizingという機能が追加されました。 これがとんでもなく便利な機能だったので紹介します。 Smart Symbol Resizingとは？ 今までシンボルをリサイズしようとするとこんな感じでシンボルの中身まで変形してしまうので、デバイスのサイズが複数になったときにシンボルの再利用ができないという問題がありました。 それを解決してくれるのがこの「Smart Symbol Resizing」です。 ・Stretch ・Pin to corner ・Resize ・Float in place と４つの設定があり、可変してもいい部分と可変にともなって相対的に位置を移動する部分とを分けてシンボルを作
エンジニアのための「Sketch入門！」 1時間コース - Qiita
※「Sketch」はMac専用アプリです。Windows版はありません。 「演習ファイル＋動画＋演習付き」で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 ハンズオン用などにご利用ください。 Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在） 有料です。 ちなみにApp Storeでは買えなくなりました。ショバ代かかるか
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
Sketch3でこれからデザインする人に使い方のヒントになりそうな操作をまとめてみる | バニデザノート
Sketch3は、ウェブサイトや、アイコンや、スマホデザインや、レスポンシブデザインなどのデジタルデザインに特化したデザインアプリです。 直感的で、定義をすればするほど速くデザインができるんですが、PsやFwと比べると、シンプルになりすぎてて「あの機能はどこなの？っていうかあるの？」って思うものがいくつかあったので、まとめてみたいとおもいます。
pixiv Sketch - お絵かきコミュニケーションアプリ
日々のお絵かきを手軽に楽しめるお絵かきコミュニケーションアプリ。落書きや描きかけの絵も気軽にシェア、いつでもどこでもお絵かきを楽しめます。
こんなやり方があったとは！IllustratorやSketchでWebデザインをはじめる前に必ず読んでおきたい -ベクターデータの教科書
最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。 アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。 今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか！ と目からウロコかもしれません。 IllustratorのWebデザインならではの使い方、Sketchの詳しい使い方を知りたい、SVGの効果的な使い方をマスターしたい、そんなWeb制作者に絶対オススメの一冊を紹介します。 IllustratorやSketchで扱うベクターデータには、マルチデバイス対応のWebデザイン・実装にとって大きなメリットがたくさんあります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apple、iOS 10に対応したiOSアプリ用UI素材「Apple UI Design Resources」をアップデートし、SketchおよびPhotoshop形式で公開。
「Sketch」の記事一覧
Sketch の塗り色を UIColor / NSColor のイニシャライザーとしてコピーする