Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
基本機能からプロトタイプ制作まで！用途別・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 vs. Figma」デザインツールとして優れているのはどちらか
本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。 UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。 個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのよう
Q&A おすすめSketchプラグイン
使用されているSketchのPluginを教えてほしいです！ しゅんさん どんなUIデザイナーかで決まります Sketch は UI デザインツールとして優秀なアプリです。日本ではまだまだ Photoshop が有力な現場が少なくないですが、欧米では Sketch が過半数以上を占めている状態です。およそ 2000 人のデザイナーを対象にしたデザインツールの調査によると、UIデザイン、ワイヤーフレームの定番は Sketch になっています（2018年1月現在）。 私の仕事でも欠かせないツールではあるものの、プラグインの組み合わせ次第でまったく違う使い方になる場合があります。定番と呼べるプラグインはありますが、それ以外は自分の役割や仕事現場によって大きく変わります。Airbnb のようにオリジナルのプラグインを開発して、自分たちのワークフローを最適化しているところもあります。 よって、自分が
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
iOSDCで『Sketchからアイコン切り出し ⇒ Asset Catalogを自動生成 ⇒ 差分があればPullRequest』という流れをCIで自動化する話をしました - Konifar's WIP
2ヶ月くらい前にiOSDC 2017のプロポーザルを出したんですが、2つ出したうちの1つが採択されたので登壇してきました。 speakerdeck.com サンプルリポジトリはこちらです。資料だけだとわかりにくい部分もあると思うので、少し補足しておこうと思います。 Import Sketch Icons to Asset Catalog on CI Sketchからアイコンを切り出して、Asset Catalogを生成して、差分があったらiOSのリポジトリにPull Requestを出すというのをCIで自動化している話です。 私の所属するQuipper Limited.で実際に運用している知見です。 @konifar konifarという名前で、TwitterやGitHubをやっています。 プライベートで、専業主婦の嫁さんとエンジニアリングやエンジニアの仕事に関する雑談をするyome.fm
Sketch バージョン47で待望のLibraries機能が追加！されるので試してみた - よりぶろ
以前から噂（中の人がアナウンスしてましたが）のあったSketchのLibraries機能。シンボルを別ファイルで管理できるようになり、複数の.sketchファイルで同一のSymbolを参照できるようになるのでは？と推測されていました。 sketchhunt.com バージョン45か46で搭載されるようだぞとコメントがあったのでそわそわしながら待っていたのですが音沙汰がなく、年内には来ないのでは…？と半ば諦めていたところ、バージョン47のβ版でついにLibraries機能が搭載されました。みんなが気になっているであろう新機能、さっそく試してみました。 （※β版で既存の.sketchファイルを開いた場合、現状のバージョンと互換性がなくなる場合があります。利用には十分気をつけてください） Libraries機能の仕様 まずはLibrariesの仕様を確認してみましょう。SketchのDocume
iOSシミュレーター上にモックアップやSketchファイルを映し出し、比較することが出来るdiffツール「Flawless」がリリース。
iOSシミュレーター上にモックアップやSketchファイルを映し出し、比較することが出来るdiffツール「Flawless」がリリースされています。詳細は以下から。 FlawlessはウクライナのFlawless Appが開発＆公開したMac用ビジュアルdiffツールで、iOSシミュレーター上にアプリやWebサイトのモックアップ画像やSketchファイルを映し出し比較することが出来ます。 Achieve the best possible visual quality Real-time comparison of expected and implemented design. Built into iOS simulator. We made Flawless for those, who are obsessed with quality of mobile apps. Flawle
React-SketchApp のpros/cons
😀 Pros🍣 React Componentによるデザインの構造化React Componentはprops（伝播）とstate（状態）を持つ部品の組み合わせで画面を構成します。 つまり、React Sketch.app を使うことで、これまでデザインカンプ上だけでは見ることのできなかったコンポーネントの役割、データの流れ、属性の明示化、状態管理をわかりやすくすることができます。 🍣 モデリングとコードの同居GUI設計で重要なのはイケてるビジュアルをアーティスティックに作ることではなく、利用者が持つサービスやシステムに関するメンタルモデルを導いたり新たに形成する流れをわかりやすくすることです（ビジュアルは情報処理のためのそのひとつの要素として考える）。 そのためには雰囲気ではなくてモノゴトを構造的に分解してシステムに置き換える必要があります。 =モデリング コンポーネントによって役
Sketchが解決しようとしているデザインの課題
2017年4月22日、東京で�「UIデザインのための「Sketch」1dayブートキャンプ」が開催されました。セミナーとハンズオンがある全編 Sketch を扱ったイベント。ポッドキャストにも出演してくださったことがある UI デザイナーの山本麻美さん（@linen_beau）と、多数の執筆や登壇をしているデザイナー こもりまさあきさん（@cipher）とご一緒させていただきました。当日の様子は Togetter のほうでまとまっているので、興味がある方はぜひご覧ください。 私は「なぜSketchがUIデザインで力を発揮できるのか」と題して、Sketch のようなツールが出てきている背景と、今後のデザインツールとの付き合い方について話しました。 Sketch に限った話ではありませんが、新しいから使う、流行っているから使うでは、ツールが提供したい価値を十分に引き出せなくなります。Figma
Automate Sketch
Make your workflow more efficient. Star 0 Download You can search "Automate Sketch" from Sketch Runner, Sketchpacks. View all features, 查看完整功能 Change Logs Version: 96.3.20230530 Fixed bugs. Version: 93.0.20220921 Add Export Selected Layers. Add Bitmap to Pattern Fill, Pattern Fill to Bitmap. Fixed symbol, style preview bug. Version: 87.1.20220513 Add Fill Rule to Non-Zero. Add Save Cloud Document
プログラマーがSketch3を使ってみた
最近はあるアプリのUIを色々検討中でして、Sketchとにらめっこすることが多い。 Sketch は画像編集アプリで、買い切りの$99の製品。 Adobe製品を使うほどでもないけど、そこそこ画像を作りたい場面もある...のでこれを使っています。 他のツールを全然使っていないので比較はできないですが、 Sketch便利機能を紹介 @iOSアプリ開発プログラマーの目線 1. 複数サイズの画像を一気に出力できる @2x, @3x とサイズの違う画像を用意するのが簡単。 出力メニューはこんな感じになっていて、2倍だったらファイルのSuffixに@2xをつけるなどの設定ができます。 一度設定すれば、再出力する際も Export ボタンを押すだけ。 画像の修正を繰り返す私にとっては、とても嬉しい機能。 1倍、2倍以外にも 幅が120pxで...という指定も可能です。 2. 角丸を作るのが簡単 少し角丸
"Zeplin"でデザイナーとエンジニアの連携をより簡単に!! iOS編
スマートフォンアプリの制作過程におけるデザイナーとエンジニアのよりよい連携方法については、過去に出演したオンライン学習の講座や、セミナーでの講演などで何度も話をして来ました。 話の要点は、デザインした通りに実装されないという問題を避ける為に、レイアウト実装のための仕様書を...
Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ | Goodpatch Blog
つい最近までSketchは日本であまり知られておらず、日本語でSketchについて書いている記事はほとんどありませんでした。ところが5月7日にFireworksの開発終了が発表され、代替ツールとしてSketchの名前が急浮上。それに合わせたのかSketchが5月8日に半額セールを行い、Sketchについて書かれた記事やツイートも増えてきて、注目度の高まりが感じられます。とはいえ英語日本語問わず、Adobe製品に比べたら圧倒的に情報量が少ないSketch。Adobe製品と同じような機能やショートカットも多いですが、使いこなせるようになるまでは少し時間が掛かりそうです。Goodpatchでもマニュアルや記事を読みながら、隙間時間にSketchを触ってその機能を確かめています。というわけで今回は、Sketchの基本的な機能や、発見した小技、ショートカットなどをまとめてみました。 先日アップした「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FontRapid - Design and create fonts directly in Sketch for free
Runner Pro: The Sketch plugin to design faster
States of the artboard - Sketch Plugin
Issues · insidefrontend/issue1-ama
Sketch.appで最近できること (with image, tweets) · yhassy · Storify
株式会社ノートスペース
