Jorn van Dijk（@jornvandijk）のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。 タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。 Linking複数画面の遷移をつくるには、FramerではFlowComponentを利用したコ
プロトタイプツールからデザインツールへ 私は前線で制作していませんが、Sketch 講座 をはじめデザインツールについて話すことがあります。Sketch を長く使っているのものの、Adobe XD、Figma 、 inVision Studio など他のツールも検証しながら、合いそうな現場にツールを提案するようにしています。 なぜ今デザインツールなのでしょうか。数年前からある プロトタイプツールと何が違うのでしょうか。閉じていたデザインプロセスを開くという意味では当時も今も変わりないと思います。ただ、Sketch、Figma などを代表するデザインツールはスコープが少し広いのが大きな違いです。 Proto.io に代表される 2013 年前後のプロトタイプツールは、インタラクティブな紙芝居に近いものでした。大まかな画面遷移と操作感を実機で体験できるものの、それ以上でもそれ以下でもないような
Explore our new product Omlet — component analytics for developers
複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。 作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください????」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。 そんなデザイナーの悩みを解決してくれるのが、今回紹介するAbstractです。 Abstractとは AbstractはアメリカのElastic Projects, Inc.が提供しているサービスです。どんなサービスか一言で説明すると「デザイナー向けのGitHub」といったところでしょうか。 Gitの仕組みを利用して、デザインデータ（.sketchのみ対応。Adobe系も対応予定）に対してブランチを切ったり変更内容をコミットしたり、差分をマージする、といったことが可能です。 まだ正式リリースはされておらず、現在はPr
Auto Layout問題 iOSアプリを作成する際、なにかしらの方法でデザインをデザイナーから共有してもらうことがあります。 画像ファイルでもらったり、Sketchファイルでもらったり。 一部ではデザイナーがStoryboardを直接修正することも。 Amazing workflow of UI design: "Zeplin"でデザイナーとエンジニアの連携をより簡単に!! iOS編 #iosdc 2016 A-7 デザイナーにStoryboardをお任せする技術 - niwatakoのはてなブログ フリルのiOSアプリ開発におけるエンジニアとデザイナーの作業分担について - inFablic デザイナーとのやりとりで一番ネックとなるのが画面サイズが変わったときのデザインです。 iPhone 7の大きさをベースとしたデザインを1枚いただいたとしても、どこを可変にしてどこを固定にするか曖昧
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ
Downloads Get the desktop, mobile, and font installer apps
UIデザイナーの、のがちゃんです！ デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。 １日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。 デザイナーになる秘訣！Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG UIデザイナーで、本当にスキルを身に着けたい人は、新規事業とかのキラキラした仕事を求めるのではなく、TwitterとFacebookアプリをSketch3で完コピして、何故このUIなのか背景を理解して、Prottで動かして触って、iOSのガイドラインを読み込むと早いと思うよ。 — Tomo Tsubota (@tsubotax) 2016年6月12日 とはいえ、これからUIを学ぼうという方には、どう
It’s been just over two years since we released Sketch 3.0, and much has happened in that time. We’ve shipped a total of 30 updates and are incredibly proud of the work we have done. Not only that, our fantastic community of Sketch users has increased tenfold, sharing a wealth of resources, tutorials, and Plugins. For that, we thank you! 🙏 As we’ve recently shipped Sketch 3.8, many people have be
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。 アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。 今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか！ と目からウロコかもしれません。 IllustratorのWebデザインならではの使い方、Sketchの詳しい使い方を知りたい、SVGの効果的な使い方をマスターしたい、そんなWeb制作者に絶対オススメの一冊を紹介します。 IllustratorやSketchで扱うベクターデータには、マルチデバイス対応のWebデザイン・実装にとって大きなメリットがたくさんあります。
Gitに限らず、バージョン管理システムで、コンパイルされたバイナリや、自動生成されたスクリプトを含めないというのは、プログラマの間では通念になっていると思います。それでは、デザインワークは? というとあまり扱いが統一されていません。 | コンパイル後のファイル | ソースファイル :--: | :--: | :--: ソースコード | 含めない | 含める デザインワーク | ? | ? デザインワークもコンパイルが当たり前に 従来、手作業でアプリケーションからエクスポートして、リポジトリに入れていましたが、現在その必要はほぼなくなりました。まだこの1,2年の話ですが、デザインワークでも「ソース」になる.sketchや.psdファイルから成果物を自動生成(コンパイル)するのが一般的になりつつあります。 面倒なスライスの切り出しといった作業は、もう過去の話です。一度ツールを設定してしまえば、
こんちわ、無職のt32kさんだよ。今日は職を失ってお金もないのでAdobe Creative Suiteに代わるソフトを探そうって話だ。そうゆうことで、いま世間を騒がしているSketch.appを触ってみたよ。 Sketchってどんなソフトかはこもりさんの紹介動画を見てみるとよい。ついでに、こもりさんが書いている『Sketch 3 Book for Beginner』電子書籍も買っておくとスタートダッシュが決めれると思う。 Sketch 3 Book for Beginner w/ Video 電子書籍ならではというか、Sketch.app自体の更新も速いので、電子書籍も随時アップデートされているし、説明動画もついているので分かりやすい。 そうゆうわけで、5/13にこけむさズで行われたSketch3勉強会にも行ってきた。勉強会は最初こもりさんからSketch.appの概要を説明してもらって
')" class="framer-1p65o2x" role="img" aria-label="Framer Logo">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![GitHub - skahack/open-sketch: [deprecated] Change the design work. Version control for design file.](https://cdn-ak-scissors.b.st-hatena.com/image/square/751594782cd8bff46b852742f17ed13c13190292/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fopengraph.githubassets.com%2F51e61a785e76ae492ec5f2bee362e0a0b3748e5c43043362a7bcbe2ce3150f7d%2Fskahack%2Fopen-sketch)
