スクリーンショット_2018-12-10_19

ぼくがかんがえたさいきょうのOverridableなSketchシンボルのつくりかた(序章)

Koki Ueda

はじめに

この記事はVALU Advent Calendar 2018 10日目のエントリーです。
弊社の優秀なエンジニアが書いた前日のエントリーはこちら↓
「Flareで作ったアニメーションをFlutterに組み込んでみた」

初めて触ったSketch

弊社では現在デザインツールとしてSketchをメインで使い、Abstractでバージョン管理しています。
実はこれまでUIデザインを組む際はAdobeのIllustratorかXDしか使っておらず、入社して初めてSketch(https://www.sketchapp.com/)を使いはじめました。
まだSketch歴1ヶ月なので、もっと賢い使い方があるよって方は教えてください。

Overrideマジ便利

Sketchには「Override」という機能があります。
簡単に説明すると、シンボルをインスタンスとして配置する際にシンボル内のテキストや画像等をインスタンス上で上書きできる機能です。
これが本当に便利で、初めて知った時の感動は今でも忘れられません。

とりあえずOverrideしてみる

テキストと画像を組み合わせたシンボルを作ります。

そしてそのシンボルをインスタンスとして配置し、インスタンスを選択すると右側にこんなテキストフィールドや画像選択ボタンが現れます。

ここに上書きしたいテキストや画像を入力すると…

こんな感じで簡単にシンボル内の情報を上書きできます。
Overrideマジ便利。

さらに便利なシンボルのOverride

シンボルの中に配置されたシンボルも同じサイズのシンボルがあれば、右側にプルダウンが現れ、選択したシンボルにOverrideできます!すごい!

Overrideの高みへ

とそんな感じでシンボルまでOverrideできちゃうなら、よりOverridableなシンボルを探求したくなるのが人の性(さが)だと思います。

次回12月22日公開予定の本編は、そんなOverrideの高みを目指した一人の人間の探求記的な内容になります。

ちなみに本編はこんな内容で書きます。

- Overridableなシンボルを簡単に作るための下準備
- OverridableでFlexibleなシンボルを作りたい
- なんでもOverrideできればいいってもんじゃない
以上の3本立てです!

最後に

弊社ではデザイナーを絶賛募集中です!興味を持っていただいた方は下記からご連絡お持ちしております!

明日は弊社iOSエンジニアの「Sketchと1対1を目指すAtomic designなStoryboardの作り方(仮題)」です!お楽しみに!
VALU Advent Calendar 2018(https://qiita.com/advent-calendar/2018/valu

本当は本エントリでAtomic DesignなSketchデータの作り方まで説明してバトンタッチする予定でしたが、間に合いませんでした!ごめんなさい!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!