search#resize" data-search-filters-value="categories:Support OR categories:Documentation" data-search-show-recommendations-value="true" data-search-recommendations-heading-value="Suggested" data-search-show-inline-recommendations-value="true" data-search-index-name-value="knowledge_base" data-search-show-headings-value="true" data-search-limit-results-value="5" data-search-dropdown-position-value=

🔰 はじめに 以前のSketchのアップデートでファイル構造形式が変更されたことで、よりデータが軽量化し、Gitによるバージョン管理が容易になりました。これにより「コード」のバージョン管理フローより遅れていたデザインプロセスが劇的に進化することが期待できます。 一方で、現時点（2017/12/02）でも、すでに複数の手段やツールが登場しており、今後も増え続けるでしょう。正直どの手段がベストプラクティスかは悩ましいです。 この記事では「デザインファイルのバージョン管理」をテーマに、代表的な２つのツール「Abstract」「Kactus」を検証比較した上で、デザイナーが開発チームの一員として、プロジェクトにとって有意義な『Design Systems』を構築し、機能横断的なコラボレーションを実現するための考察をまとめてみました。 ※『InVision V7』は表題とは少し異なるので別の機会に

各社から続々と新プロダクトがリリースされるプロトタイピングツール戦国時代。Facebookが公開しているプロトタイピングツール「Origami Studio」の実力は？ 以前書いた記事でOrigamiプロトタイピングツールを紹介しましたが、そのときはまだQuartz Composerの付属ツールに過ぎませんでした。Origamiを使うと優れたプロトタイプを作成できましたが、Quartz Composerの要件に戸惑う人が多かったのも事実です。Origamiとはいったいどのようなツールで、どんな人が利用するのでしょうか？ 「よく使っているソフトとOrigamiだけを使いたい。たとえばSketchと連携してくれたら！」 こんなことをFacebookで聞いたり、少なくとも同じことを考えたりしている人は多いでしょう。 2017年のはじめにFacebookのOrigamiは全面的に見直され、スタンド

Origami is a free prototyping tool with a large library of customizable, built-in animations and interactions. You might have heard of Origami because it's made by Facebook and used by the great teams behind some popular products and interactive apps -- Facebook Paper, Instagram, and Facebook Messenger just to name a few. Some people have been reluctant to use or try Origami because of the setup r

こんにちは。デザイナーの大橋です。 今日は、私が担当している “（しら）ずにお金が（たま）る”自動貯金アプリ『しらたま』 で導入してました、デザインのバージョン管理の話を紹介します。 デザインのバージョン管理といえば、AbstractやKactusがありますが、今回はあえてGit Sketch Pluginを試してみました。 デザインデータをGitHubで管理しようと思ったキッカケ 私以外のチームメンバーがみんなエンジニアだから、間違いなくGitHubに寄せたほうが効率いいんじゃないか。 新しいツールを導入すると、プロジェクトに関する情報が分散してしまいがちで、エンジニアも招待したり登録してもらったりしなきゃいけないのかなという印象。※あくまで印象です。 Kactusはプライベートレポジトリが有料。 こんな感じでなんかファイルが増えてく。。。(忙しいと放置しがちでよくない。。 GitHub

Sketch 49 has arrived and, hot on the heels of our Libraries update, we’re adding yet another huge and highly anticipated feature to Sketch. We understand design, so we know that you can’t always tell if something works based on static screens alone. Sometimes you need to see the entire flow in action and the best way to do this is to turn your designs into interactive prototypes. With our latest

Sketch Plugin CookBook (ver.51まで) Sketch 52でAPIが変更になっているため、動かない記述があります。 忘れやすい自分のための、Sketch.app向けプラグイン開発メモ。 ツギハギで書いてきたため、内容をあまり精査できていません。ところどころ書き換えできずに間違ってます。さらにClass自体が非推奨になった（リファレンスからなくなった）ようで、この書き方は使えなくなる可能性が高いです。「使えなくなる」ではなく、JavaScript API経由で使えってことになりそうです。 Sketchのプラグインは、CocoaScirptで開発する。とてもざっくり言うと、Objective-CをJavaScriptライクに扱う言語（キモイ）。記述はJavaScriptスタイルとObjective-Cスタイルがあり、混在もOK。 ドキュメントとか参考情報 Hello

We all make buttons. They are everywhere in our site and application designs. In Sketch, there is really no easy way to handle buttons. Once you have made one, you are good until you have to make the next one, then you have to resize that rectangle so that it fits your new label, constantly checking the distances to make sure it is all spaced correctly. Creating a dynamic button in Sketch with Pad

Sketchプラグインにするまでもないけど、たまによく使うスクリプトをRun Scriptから呼び出すsketchSketchPlugin タイトルの通りですが、プラグインにするまでもないけど、たまによく使うスクリプトってないでしょうか？ よく使うならプラグインにすればいいじゃない？ という話もあるのですが、牧歌的なプラグイン形式の時代から随分と様相が変わり、フォルダ構成だったりmanifest.jsonを準備したりと、ちょっとしたプラグインを作るのも結構面倒だったりします。 そこで、Run Scriptから特定のスクリプトをいつでも実行できるように準備してやりましょう。 まずは、たまによく使うスクリプトをファイルに保存します。拡張子は.jsでも.sketchscriptでも大丈夫です。 SketchのPlugins -> Run Script（ショートカット：Ctrl + Shift +

11月30日のTHE GUILDさまの勉強会にてお話させて頂いた時の資料です。 詳細は https://yory.design/note/theguild-atomicdesign-sketch/

A designer typically has a long stream of projects, each demanding innovative and imaginative solutions. How to keep up and keep sane? You need a balanced approach. Traditionally, there’s a distinction between UX and UI. UX is all about collecting data about the brand, product, client, designing the user interface, and is generally a process totally aligned with rational, left-brain activity. Here

本日、BNN新社さまより「UIデザイナーのためのSketch入門＆実践ガイド（吉竹遼 著）」が刊行されました。 Amazonでのご購入はこちら （Kindle版もご用意しています） せっかくですので、執筆を務めさせて頂いた私の視点から、本書についての見どころを紹介させて頂きます。 どんな本か アプリやWebサービスなどのデジタルデザインにおいて、昨今普及が進んでいるSketchについての使い方を網羅的に解説した本です。Sketchに関する情報は、インターネット上に英語で書かれているものがほとんどのため、基礎を学ぶための環境や、リファレンスとして参照できる資料が少ないのが現状でした。ちなみに日本では電子書籍の「Sketchの基本。」が有名ですね。私自身、お世話になっております。 アップデートが頻繁に行われるソフトウェアの本を紙で出すのは勇気がいりましたが（実際、発売1週間前にバージョン44が

Sketch 43 からファイルフォーマットが変わり、構造などのドキュメントデータはJSONファイルで管理されるようになりました。 👉 New file format in Sketch 43 以前同僚のエンジニアと「デザインのバージョン管理をする世界」 な話をしていたので、ついにGitで差分管理をする時代がくるのかなと期待をしています。 今までもとりあえずsketchファイルをGitで…と試みたのですが.sketchのファイルをそのままGitで共有してもただのバイナリファイルのため変更差分が取得できないため全く意味がないし、まるっとファイルをアップしなければならないため非常に重いです。 今回JSON化されたことで変更差分のテキストデータなどのみアップすればいいし、文字変更や角丸の数値など細かい内容をdiffで見ることができるようになります。 Sketch 43以降のファイルでは、ファイ

A powerful animation and prototyping application for Mac & iOS Download TrialRequires macOS 10.12+ Buy Now $99 “It’s kind of like Sketch meets After Effects” – A designer Visually drag and drop layers to build complex interfaces on a WYSIWYG canvas. Add animations and tune them with the integrated timeline. “It’s kind of like PaintCode but for Core Animation” – A developer Use the built-in JavaScr

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click. Just like Flex Box in CSS, UIStackView in iOS, and FlexboxLayout in Android - Auto-Layout’s with its new Stacks feature is, once again, changing the game. For the very first time, Sketch app users are able to apply Flexbox technology directly in Sketch, withou