2018年、ついに待望のデザインツール「InVision Studio」がリリースされました。InVision StudioはWebサイトやスマホアプリなどの画面デザインを作る専用のツールで、ベクタードローイング・レスポンシブ対応・プロトタイピング作成機能・アニメーション編集・チーム間での共有・座標、サイズ、カラーなどのエンジニア向け確認画面などが備わっています。UIデザインツールとしては、他にもSketch・Adobe XD・Figmaなどが類似のものとして挙げられます。 この「InVision Studio」の使い方では、初心者の方向けに主な機能についてお伝えします。 目次 InVision Studioを手に入れるには 起動・ログイン デバイスの選択とアートボード作成 オブジェクトの作成と編集パネル レイアウトについて アニメーションの作り方 スクロールの設定について コンポーネント

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

Sketch上でProcessing風にビジュアルプログラミングできるSketchプラグインが出ていたので紹介します。 P5.sketchplugin

一瞬、自分の目を疑った。「InVisionが新プロダクト…？まさか…」今もキーボードを打つ手が少し震えています…。InVisionがつい先ほど、新しいデザインツールのティザーサイトを公開しました。InVision Studioとは一体…？TechCrunchの記事によると、現在プロトタイピングツールInVisionは世界中で300万人以上のユーザーを抱えているそうで（すごい）今まではプロトタイピングとコラボレーションの機能を持ったツールであり、またSketchのプラグインを開発するチームを買収するなどの動きはありましたが、画面をゼロからデザインするツー... 基本機能 まずはサイトで使われているスクリーンショットから基本的な機能を考察していきます。 レイヤーパネル 画面左にあるのはいわゆるレイヤーパネルですね。 Login、Sign up、Walkthroughはそれぞれアートボードを指し

みなさん、デザイン共有してますか。Sketch共有してますか。 共有はPDFで？InVisionで？このプラグインを使えばみんな大好きGoogleスライドで共有できるみたいですよ。 Sync to Slides むずかしいことは一切なし。プラグイン入れてSyncするだけ まずはプラグインをインストール。 おなじみのプラグイン管理ツールSketchpacksで「Sync to Slide」を検索すれば見つかります。 適当にサンプルの画面を作ってみました 次にブラウザでGoogleスライドを立ち上げて新しいスライドを作成します。 作成したらURLをコピーしましょう。 Sketchに戻ってプラグインからSync to Slideを選択するとこんな感じに。 さっきコピーしたURLをぺたっと貼り付けます。こうなる 画面を選んでSyncしてみる。 できました。こんな感じ。 ちゃんと要素ごとにパーツが分

昨日に続いて、SketchとCraftの新機能を使ってAPIを叩いてSketch上に画像やテキストを表示してみたいと思います。 前回の記事はこちら。Sketch上でAPIを叩いてデザインに内容を表示する方法【1/2】 関連記事：InVisionにSilver Flowsがジョイン。彼らが描く未来とは？ 利用するAPI 今回試したのはグルメサイト「ぐるなび」のレストラン検索APIです。店舗名や店舗の画像をはじめ、ぐるなびに掲載されている情報をAPIで呼び出して自分のWebサービスやアプリ上で使うことができます。アカウント発行が必要なので、詳しくは開発者向けページを見ながら試してみてください。 ぐるなび Web Service for Developers Craftのインストール InVisionが提供するSketchプラグイン「Craft」をインストールしてください。ランディングページから

Sketchがレスポンシブデザインに対応した神アップデート！Smart Symbol Resizingをリリース 昨日アップデートされたSketchのバージョン39からSmart Symbol Resizingという機能が追加されました。 これがとんでもなく便利な機能だったので紹介します。 Smart Symbol Resizingとは？ 今までシンボルをリサイズしようとするとこんな感じでシンボルの中身まで変形してしまうので、デバイスのサイズが複数になったときにシンボルの再利用ができないという問題がありました。 それを解決してくれるのがこの「Smart Symbol Resizing」です。 ・Stretch ・Pin to corner ・Resize ・Float in place と４つの設定があり、可変してもいい部分と可変にともなって相対的に位置を移動する部分とを分けてシンボルを作