【sketch】TwitterのUIトレースをして気がついた事｜Masaki
初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。 UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。 このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽ですしね。 早速Twitterのプロフィール画面とタイムラインの２画面を、Sketchを用いてトレースしてみました。Sketchを用いたトレースについてはネットで既に多く説明されていたのでつまずく事はありませんでした。 Twitterをトレースして気がついた事 左：元画像 右：トレース 1.フォントについてTwitterにはinstagramなどと同様に、和文には"Hiragino sans"、英文
チームの課題から考える、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デ
Painting with Code
Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents. If you’re a designer or an engineer familiar with React, you should feel right at home with the new library, and you can play with it right now. H
デザインのバージョン管理をする世界
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ
10 Sketch Tricks That Would Make Owen Wilson Say “Wooow!” (tons of GIFs!)
If you didn’t get the reference in the title, I beg you to watch this video. You’re welcome :) One of my favorite things to do in an app is poke around all the settings and menus. Sometimes I’ll even hit random keys on my keyboard to see if it triggers some hidden feature that magically pays off my student loans. No luck on that one yet. It’s not that I’m trying to break the app by poking around.
Design Collaboration, Version Control & Handoff - Sympli
"Sympli has significantly improved our coordination around designs, enabling designers, product managers and engineers to work together much more seamlessly. It allows our engineers to build confidently to specifications, and allows our design team to easily share out their vision. It’s a vital part of our product development workflow!" Tom Wilson Principal Engineer
TextStyl: Tendencias y Estilo en Medicina Estética
En TextStyl, nos dedicamos a explorar el fascinante mundo de la medicina estética, donde la innovación y la belleza se unen para crear tendencias revolucionarias. Con un enfoque en la elegancia y la salud sostenible, nuestra misión es ser tu guía esencial en el viaje hacia una belleza que no solo captura la esencia del estilo, sino que también abraza la vanguardia del bienestar. Desde las últimas
Sketch Symbol Best Practices
At Tradeshift, we’re beginning to maintain a central Sketch document with all our symbols. In order to be added to this… At Tradeshift, we’re beginning to maintain a central Sketch document with all our symbols. In order to be added to this document, a Symbol needs to pass a few quality and consistency checks. Everyone designing for us will make use of this document, so we don’t want to be distrib
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 と４つの設定があり、可変してもいい部分と可変にともなって相対的に位置を移動する部分とを分けてシンボルを作
Live Prototyping with InVision Craft Prototype in Sketch
A few days back I saw the friendly Charles Pearson announcing on twitter, that if you want to try out Craft Prototype, ping him for an activation code! I was so excited and immediately requested for a code. Once I got the code, I started playing with Craft Prototype in Sketch on of my previous projects and it is awesome! The experience is so smooth~ You guys should ping him for a code to try Proto
Sketch Plugins That Will Improve Your Workflow
Are you interested in doing user interface design? This is quite easy if you utilize the right tools. What used to be confusing and complex is now quite effective and very simple; this is all due to an app called Sketch. What is Sketch? Sketch focuses on user interface design exclusively and, unlike similar product Photoshop, you will not have to worry about editing photos and the plethora of othe
Checkpoints Plugin for Sketch
Pro Tip: You don’t have to select artboards particularly. Just choose any layers inside the artboard, plugin will find the relevant artboards for you. 2. Run “Save a Checkpoint” Plugin creates a group named “Checkpoints” if there is no one already, and puts newly created checkpoint into it with a timestamp. Max Checkpoint CountThree checkpoints at most are kept for each artboard as default. When a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chain - Dynamic color relations in Skech
GitHub - ment-mx/Prism: Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.
States of the artboard - Sketch Plugin
GitHub - sketch-hq/svgo-compressor: A Plugin that compresses SVG assets using SVGO, right when you export them.
Runner Pro: The Sketch plugin to design faster
GitHub - design4use/gb-sketch-segmentcircle: Sketch plugin creates circular graphics for diagrams, instrumentation and analytics.
GitHub - Creatide/AnimateMate: Create your animations directly in Sketch using AnimateMate.
3 Easy Steps for Working with Realistic Data in Sketch Using JSON