ストアからいろんなサービスのUIキットがGETできる FramerXを使って色々見ていた中で驚いたのが、このストアの中身です。 いろんなサービスやWebサイトのUIキットがアプリケーション上でそのままインストールでき、インストール完了次第コンポーネントの中に自動的に入るので、すぐに使うことができます。例えるならVSCodeのカスタムインストールのような感じです。Sketchでもプラグインを入れる機能はありますが、あらかじめプラグインの名前・機能を知っていなくてはならなかったり、機能の詳細なんかは一度Webサイト上で検索して日本語訳されたものを読んだ上で、自分の好きなプラグインを入れるようなムーブがありました。しかしFramerXはアプリケーション言語が全て英語でありながらも、プラグインの中身を視覚化し必要なものをその場で判断できる簡潔さがあります。初学者や英語がダメな人でもわかりやすい設計

β公開なしでいきなり発表…？！ これまでSketchは新機能についてはβ版でリリースを行い、一部のユーザーに使ってもらってから正式リリースするというのが定番でした。 しかし今回はあまりに突然の発表…。何の前触れもなくバージョン49の新機能として組み込まれていました。 今回のバージョンアップに合わせて、Sketchのランディングページもリニューアル。プロトタイピング機能を動画で説明する内容になっています。 気になるその機能は…？ SketchをバージョンアップしたらFile→New from Template→Prototyping Tutorialを開いてみましょう。 ページ遷移が行われる箇所にはオレンジ色の矢印の曲線が描画されています。 Link・Previewが追加されています。Sketch Cloudについても変化が。 プロトタイピング機能の使い方 まずはリンクエリアにしたいレイヤー

ついにSketch上でPrototypeの作成が可能に…！待ってました、Craftバージョンアップデート！！ 今日は最新のSketch44のことを書こうと思ったんですがね…出てしまいましたね… CraftのPrototype機能が！！！ 昨年の3月にInVisionに買収されたSilver Flows。 今は「Craft」という名前でアップデートを続けています。 最初のコンセプトムービーではプロトタイプを作成する様子が流れていたため、いつ出るかいつ出るか…と、首を長くして待っていたわけですが… ついに今日のアップデートで、Prototype機能が正式リリースされました！！！ 参考記事 「InVisionにSilver Flowsがジョイン。彼らが描く未来とは？」 早速使ってみた インストールしたらCraftプラグイン内にカミナリマークが表示されました。クリックするとプロトタイプ機能が有効に

Webデザイナーにプロトタイピングツールはもう不要…？ こんなプラグインが出ていました。 Click-Thru Prototype 「Sketch plugin that creates a HTML click-through prototype of a website design」とのこと。 これがすごい便利！ ・Sketchで作成したスクリーンの特定の箇所にリンクが貼れる ・もちろんリンク先のアートボードを指定可能 ・クリックしたときにJavaScriptで表示するアラートも再現可能 ・スマホのメニューみたいなのも再現可能 ・PC・タブレット・スマホのレスポンシブWebデザインも再現できる なんじゃこりゃ！！ Click-Thru Prototypeの使い方 まずはプラグインをインストール。githubから落としてもいいですが、今回はSketch Toolboxを使用します。コレ

数々のプロトタイピングツールを試しているうちに、エンジニアの方なら誰しもが思ったこと…それは 「ここまで出来るんならコード生成してよ……」 ってことなんじゃないでしょうか？ プロトタイピングツール？NO！新しいデザインツールだ。 たぶんこのAnimaが開発中の「Sketch to Code」という新しいツールは今までのプロトタイピングツールを利用した工程に縛られているとピンと来ないツールなのではないでしょうか？ 今まではデザイナーがどんなに頑張ってアニメーションを作っても、それをエンジニアが再び頑張って実装する…という二重構造だったわけですが、これからはAnima上でレイアウトやアニメーションがバッチリ決まれば、エンジニアはよしなに生成されたコードを利用すればいいということに。 とりあえずデモを見てください。 Auto Layoutからアニメーションまで。 リアルタイムプレビューしながらA

Google先生が何やらデザイナー向けの新しいツールを作っているようです。 今回発表されたのは「Gallery」というプロダクトです。 デザイナー向け共有ツール？ どうやらこれ、デザインの共有ツールみたいですね。 作ったデザインツールを整理してチームメンバーからフィードバックを得るためのツールという感じぽいです。 イラストにSketchやらイラレやらフォトショやら…どうやら静止画データではなく編集可能なデザインデータをアップできるぽいですね。 InVisionなどのツールとの違いは…？ iOSとAndroidアプリでプレゼンモードみたいな感じでもみれるみたいなんですよね。 ってことはプロトタイプも作れるのか…？うーん謎だ… 画像だけじゃなくて動画にも対応してるぽい…？ ワイヤーフレームからプロトタイプまでのワークフローを簡単にしまっせというような記述がありますね。 よくわからんが事前登録が

SketchとCraftとGoogleスプレッドシートを組み合わせてコーディングなしでAPI叩いてデザインに内容を表示する方法 うわ…タイトルが長い…。そして寝坊してしまったので手抜き記事です。ご勘弁を。 以前、Sketch上でAPIを叩いてデザインを表示するプラグイン「Craft」の使い方を紹介しました。 Sketch上でAPIを叩いてデザインに内容を表示する方法【1/2】 Sketch上でAPIを叩いてデザインに内容を表示する方法【2/2】 ではAPIがない場合はどうすればいいのでしょう？そんなときに役に立つのがスプレッドシートです。 ①まずはスプレッドシートでデータを作ります。 ②SheetsuというスプレッドシートをREST API化してくれるサービスがあります。ここに作ったスプレッドシートのURLを貼り付けるだけ。 さくっとAPIを作って何か試してみたいとき、オススメのサービスで