Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい（≒Webフロントエンドエンジニアにやさしい）デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
Version control for Sketch | Abstract
No more digging through Dropbox and Google Drive. Always know where to find “the latest,” so you can stay in your design flow.
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
SketchでレスポンシブなWebサイトが作れる！「LaunchPad」の実力をチェック
人気のUIデザインツール「Sketch」で作ったデザインを静的なHTML/CSSに展開できる便利なプラグイン。レスポンシブWebデザインにも対応できる「Launchpad」はかなりおすすめです！ Animaは便利なSketchのプラグインを2つ作っています。Auto Layoutは、Sketchでレスポンシブなレイアウトを作るのに使い、Launchpadは出来上がったレスポンシブなデザインを、ほぼ完成版と言えるぐらいのまともな品質のコードに変換し、HTML/CSS Webサイトとして出力します。まずは、ビデオを見てください。 「えっ？ また別のサイトビルダーですか？ 」 そう言わずに聞いてください。Launchpadは単なるHTML/CSSエクスポーター以上のものです。デザインはSketchを使うので、WYSIWYGエディターとも違います。4つ星のコード出力を5つ星のWebサイトにしたいな
Helping Designers Adhere to a Design System with Sketch
At Walmart Labs in Bentonville, our internal design team creates applications for associates (Walmart’s name for employees) in our stores, distribution centers and corporate offices. We design everything from wearable devices to desktop systems, and our users’ environments range from brightly lit offices to warehouses. In order to help our associates move swiftly across multiple digital tools, we
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ
10 tricks & techniques to make the most out of Sketch
Learning Sketch is a lot like learning how to drive. It’s relatively easy to take the first steps, but mastering the skill is a completely different animal. As always in design, devil’s in the details. Becoming a Sketch pro is pretty much about clever workarounds and nasty little tricks. Today I’d like to share a few of them — ones that I personally like most. Some of them are pretty basic, some a
チームの課題から考える、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デ
WebページをSketchファイルにするプラグイン「Protoship Teleport」が便利すぎる - デザイナーのイラストノート
Sketchおじさんこと@maki_saki さんが教えてくれたSketchプラグイン「Protoship Teleport」がめちゃくちゃ便利なのでざっくり紹介します。 Protoship Teleport 「Protoship Teleport」は、Chrome機能拡張+Sketchプラグインで、表示されているWebページをSketchファイルにしてくれる便利アプリです。百聞は一見にしかずです、このブログの一記事をSketchファイルに変換してみました。 用意するもの Protoship Teleportから、次の3つを用意します。 Chromeの機能拡張 Sketchプラグイン（公式ページからダウンロード） 会員登録 準備が終われば、Chromeでファイル化したいURLを開いて、Protoship Teleportのアイコンを押します。表示されたURLをコピーして、Sketchのメニ
Sketch.appで画像や写真にマスクやグラデーションマスクをかける | Recost Design
画像や写真の切り抜きによく使うマスク(Mask) PhotoshopやIllustratorを使ったことがある人にとってお馴染みのツールですが、使い方がPhotoshopやIllustratorに慣れているとちょっとややこしい。 普通にマスクをかけたつもりが他のオブジェクトが消えてしまったり、マスクをかけた画像がいつの間にか違うところに移動してしまったり。。 マスクはSketch上でデザインを作るのに重要な機能です。 ここではマスクのかけ方から、その注意点などについて詳しく解説していきます。 マスクの基本 まずは基本のマスクのかけ方です。 1，画像を配置 まずはマスクをかける画像を配置します。 2，シェイプを配置 次にマスクの形となる図形(シェイプ)を配置します。 3，画像とシェイプを選択 シェイプを選択した状態で[Layer → Use as Mask]を選択します ※ショートカットはc
Sketch - Documentation
Documentation Just starting out? Returning veteran? Here you’ll find all reference documentation you’ll ever need to use Sketch’s features, navigate the interface, and more. search#resize" data-search-filters-value="categories:Documentation OR categories:Support" data-search-show-recommendations-value="true" data-search-recommendations-heading-value="Popular searches" data-search-show-inline-recom
Top 50 Free Web UI Kits & Templates
Web UI kits are pre-designed collections of user interface components that can help you save time and streamline your design process. These kits typically include common design elements such as buttons, menus, forms, and icons. Rather than starting from scratch, you can use a UI kit as a foundation for a design and customize it to fit your specific project requirements. This can be especially usef
使いやすくて、分かりやすい！無料UIデザイン素材40個まとめ 2017年10月度
日頃からさまざまなウェブサイトを制作しているデザイナーにとって、新しいクリエイティブなデザインアイデアを考えるのもワークフローのひとつ。 今回は、カスタマイズもしやすい無料のUIコンポーネントをまとめてご紹介します。Photoshopだけでなく、IllustratorやSketch、Adobe XDなど幅広いデザインアプリに対応でき、ウェブサイト制作の参考にしたい素材を集めています。また、どの素材も文字テキストや配色、サイズの変更などを自由に行うことができ、iOS 11など最新デザインにもばっちり対応しています。 作業ペースが上がる！ブックマークしておきたい無料UIデザイン素材40個まとめ Photoshopで編集ラクラク！Webサイト用の美しい無料PSDテンプレート45個まとめ 使いやすくて、分かりやすい無料UIコンポーネント素材まとめ HomeMade iOS App UI モバイル向
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOS 12に使用されている全てのUI要素・スクリーンが収録されたAdobe XD, Sketch, Figma用の無料デザイン素材
Webサイトやスマホアプリの画面遷移や構造を設計するための無料フローチャート素材 -Greyhound Flowcharts
【Sketch無料リソースの2021年決定版！】Sketch用UIキット、ワイヤーフレームキット55選【Sketchユーザーダウンロード必須！】
デザイン制作時短術！デザインを制作する際に有用なツール14選【UI/ワイヤーフレーム/デザイン/コーディング】
Simple WYSIWYG Editor Sketch freebie - Download free resource for Sketch - Sketch App Sources
https://creative-tweet.net/blog/2013/12/sketch-app-advent-calendar-2013-inspector-style.html
Sketchで角丸を個別指定する方法（Version42以降） - Qiita
