まだフォント探しで消耗してるの？足りないフォントの検索ができるSketchプラグイン「FontBuddy」の使い方 | テクニカルクリエイター.com
まだフォント探しで消耗してるの？足りないフォントの検索ができるSketchプラグイン「FontBuddy」の使い方 Animaさんがまた素敵なプラグインを出してしまったようですね…。 他人からSketchファイルをもらったとき、「Missing Fonts」と警告が出ていたことはありませんか？ そうそう、こういうやつです。 そんなときに、自動的にフォントを探してインストールしてくれるプラグイン「FontBuddy」が公開されました！ FontBuddyの使い方 まずはサイトからダウンロードします。メアドの登録が必要です。 ダウンロードしたらFontBuddy.sketchpluginを開いてプラグインをインストールします。 インストールしていないフォントが使われているSｋetchファイルを開いてみると緑色の表示が出ています クリックすると、該当のフォントが検索されてプレビューが表示されます
多様なSketchスライスツールの使い方
Sketchのスライスツールは、いくつか使い方があります。 書き出したいパーツの状態によって、スライスの設定の仕方を使い分けると作業がより効率化できます。 1.ひとつひとつスライスを設定する Insert > Sliceを選択します。もしくはキーボードのSキーを押すとカ...
初心者のためのSketch入門〜基礎編〜 | レコチョクのエンジニアブログ
吉竹遼(2017)「UIデザイナーのためのSketch入門&実践ガイド」ビー・エヌ・エヌ新社より引用 Sketchのメリット(抜粋) パフォーマンス => 作業中重くならない スタイル機能 => フォントや色を、異なるテキストや図形で、 同じ設定のまま適用・管理できる機能 Sketchのデメリット 日本語対応 => 日本語対応していないため、 有志で意訳されたものを参考にしなければならない 日本語の記事も少ない 今回使用する用語 Shape(シェイプ) => 図形のこと オブジェクト => キャンバス上のテキストやShapeのこと 今回使用するバージョン 44.1 Sketchをはじめる 今回作るもの 成果物として下記のようなボタンを作成する サイズ:150×50 用途:Webページにて配置するボタン Sketchを起動する Sketchを起動します ここでは、最近作成しているファイルやテ
Sketchの操作を覚えよう（1）画面構成から基本機能まで – WPJ
前回はSketchのインストールから起動、ライセンスの認証まで進めることができました。第2回ではSketchの基本的な機能と操作を解説します。 なお、SketchのUIは英語ですので、Photoshopなどでなじみのある日本語の名称も併記しています。ショートカットキーも併せて記載していますので、ぜひ覚えていきましょう。 各ウィンドウの名称と概要を押さえよう 各ウィンドウの名称と簡単な役割は以下になります。 Menu Bar（メニューバー） メニューバーにはSketchで扱えるほぼすべての機能が格納されています。慣れないうちは、どのような機能が隠れているのか、端から1つずつ試してみるのもよいでしょう。 Tool Bar（ツールバー） ツールバーにはデフォルトでよく使う機能が配置されています。ツールバー上で右クリックをすると配置をカスタマイズできますので、使っていく中で自分好みに調整するのもよ
Sketchのプラグイン管理は「Sketchpacks」がおすすめ！ | Web Design Trends
Sketchのプラグイン管理ツールといえばいくつかツールが公開されていますが、動作の安定性や機能の豊富さから「Sketchpacks」が最もおすすめのSketchプラグイン管理ツールです。 今回はSketchpacksのどんな所が優れているのか、また他のツールの問題点などをご紹介したいと思います。 プラグイン管理ツールとは Sketchのプラグイン管理ツールとは、Sketchでプラグインのインストールやアップデートを管理するためのツールです。検索ボックスからプラグインを検索して、「インストール」のボタンをクリックするだけで簡単にインストールできたり、アップデートも自動で行えたりなど、プラグインの追加や管理が効率的にできる優れもの。Sketchを使う人はプラグイン管理ツールはぜひ入れておきたい所ですね。 有名なプラグイン管理ツールとして、下記のツールが存在します。 Sketch Toolbo
チームの課題から考える、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デ
2018年版：おすすめの人気UIデザインツール徹底比較 | Web Design Trends
日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。 Adobe XDの正式リリース、Figma3.0のリリース、InVision Studioのベータ版公開など、2017年の終わりから2018年にかけて多くのUIデザインツールが登場しました。 今回は、2018年8月現在で公開されているUIデザインツールの中から、特に人気のツールについて機能や特徴を比較していきたいと思います。 最新の情報はこちら 2020年版：おすすめの人気UIデザインツールを徹底比較！【Figma / XD / Sketch】 現在は、デザインツール戦国時代とも言われるように、様々なデザインツールが競争を繰り広げています。 UIデザインを作るための「UIデザインツール」もどんどん進化していて、個性的なツールが多数登場していま... Web Design Trends UI
スマホアプリの実装が簡単に！実用的なコンポーネントを簡単に利用できるReact Nativeのフレームワーク -Galio | コリス
最近のスマホアプリで使用されているさまざまなコンポーネントをそのまま、カスタマイズして、簡単に利用できるReact Nativeのフレームワークを紹介します。 Photoshop, Sketchのファイルもダウンロードでき、デベロッパーだけでなく、デザイナーにも役立つと思います。 Galioの特徴 スマホアプリを素早く構築 基本の要素、コンポーネントを組み合わせ、スマホアプリを素早く構築。 実用的なデザイン さまざまなプロジェクトに適応する実用的なテーマ。 カスタマイズ コンポーネントベースで実装されているので、カスタマイズも容易。 デザイン用のリソース Photoshop, Sketch用のファイルも用意されています。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。
簡単すぎて驚いた！ユーザーフローとプロトタイプが短時間で作成できてしまうツール -Overflow
Webサイトやスマホアプリのデザインで重要なのは、単一の画面ではなく、ユーザーがどのように遷移するか全体の流れを通して画面をデザインすること。 しかし、ユーザーフローやプロトタイプを作成するのは、なかなか面倒です。 Sketch（Photoshop, Adobe XDにも対応予定）ファイルからアートボードを自動同期し、ユーザーフローとプロトタイプを簡単に短時間で作成できるツールを紹介します。 現在はベータ版でmacOSのみですが、Windows版のリリースも予定されています。 Overflow Overflowの特徴 Overflowのダウンロード Overflowの使い方 Overflowの特徴 Overflowは、ユーザーフローとプロトタイプを簡単に作成することができるデスクトップ用のツールです。 オンラインツールではないので、安心して利用できると思います。 ユーザーフローの作成 Ov
デザインのバージョン管理をGitHubでしてみたら修正点が3秒で分かるようになった話 - Money Forward Developers Blog
こんにちは。デザイナーの大橋です。 今日は、私が担当している “（しら）ずにお金が（たま）る”自動貯金アプリ『しらたま』 で導入してました、デザインのバージョン管理の話を紹介します。 デザインのバージョン管理といえば、AbstractやKactusがありますが、今回はあえてGit Sketch Pluginを試してみました。 デザインデータをGitHubで管理しようと思ったキッカケ 私以外のチームメンバーがみんなエンジニアだから、間違いなくGitHubに寄せたほうが効率いいんじゃないか。 新しいツールを導入すると、プロジェクトに関する情報が分散してしまいがちで、エンジニアも招待したり登録してもらったりしなきゃいけないのかなという印象。※あくまで印象です。 Kactusはプライベートレポジトリが有料。 こんな感じでなんかファイルが増えてく。。。(忙しいと放置しがちでよくない。。 GitHub
Sketchでデザインしながらガイドラインを作ろう｜Chizuru Kamisono
はじめまして。UIデザイナーのカミソルです。 わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。 今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います！ ※この記事はSketch Advent Calendar 2017 19日目の記事です。 なぜデザインしながらガイドライン化したいのかガイドラインを作る目的は2つあります。 1. エンジニアとの連携のため "カラーの種類"、"テキストスタイルの種類"、"画像として書き出すもの"、"コンポーネント"の4つがはっきり伝わるSketchデータにしたい。 2. デザイン運用のため デザインを運用をするとき、誰でも追加や変更がしやすいようにしたい。「デザインしながら」とつけた理由は、デザインしていたら自然にガイドラインが出来ていた。という
ゆめいろデザイン｜ブランドマネージャー・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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://tondemodesign.com/sketch-tips-slice/
GitHub - utom/sketch-measure: Make it a fun to create spec for developers and teammates
GitHub - joelbqz/sketch-emmet: A Sketch plugin that gets Emmet abbreviations to be expanded as HTML
Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ | Stocker.jp / diary
最近のHTMLメールで見かけるさまざまなレイアウトやコンポーネントが揃ったデザイン素材 -Email Design System
最近よく見かけるレスポンシブ対応のUIコンポーネントやレイアウトがよく分かるHTML, PSD, Sketchの素材 -Now UI Kit
Sketchに慣れるとかなり便利！もっと効率的に使いこなしたい人におすすめの実践的な解説書
