Design To Code for Designer

何ができるか

アプリコード自動化のためのツール群。 各種デザインツール上で命名規則に則るだけで、iOS/Android アプリの見た目に関わる部分のソースコードが生成されるツールです (ただし、現状 sketch と iOS の組み合わせのみ対応、順次拡大予定)。

例えばこういうsketch ファイルをこのようにコードに変換できます。

<sketch ファイルのキャプチャと iOS シミュレータの画像か gif here>

こういうときに便利

• エンジニアとのコミュニケーションロスを極力減らしたい
• 開発速度を上げたい
• デモ版として使いたい

抽出できる要素一覧

iOS/Android 共通

View, Button, Image, TextView, TextLabel, TextInput, List, Cell, ScrollView, Switch, Slider, ProgressBar, PageControll, WebView, Map

iOS 特有

NavigationBarIOS, TabBarIOS, ToolBarIOS, SegmentedControlIOS

詳細機能

• Override にも概ね対応
• List の場合は、sketch で利用されている文言や画像をダミーデータとして利用可能
• アイコンをスライス、対応コード生成
  • iOS では asset catalog に namespace 付きで追加
  • Android では、R.drawable として追加
• カラーパレットの抽出と、対応コード生成
  • iOS では asset catalog の color set として追加
  • android では R.color として追加

##　おおまかな仕組み

制約事項

本ツールは、sketch 社の Elements UI Kit をお手本として、それをカスタマイズする形で、各種制約事項を定めていきました。具体的には以下のような制約が存在します：

• シンボルは、Symbolsという名前のページで定義し、その中で定義すること
• Symbolsページ以外はすべてアートボード
• アートボード名は、/ で区切ること
• 各要素の名前は単語ごとに半角スペースで区切ること
• 除外したい要素がある場合は、stc.config.jsonのsketch.extraction.exceptions に追加する (現状は以下の通り)
  • iPhone X Frame
  • Color
  • Overrides
  • Tint
  • Mask
  • Pin
  • Guide
  • Background
  • Tab Bar
  • Navigation Bar
  • Keyboard
• 動的なレイアウトは、Resizing 機能を使うことでアプリにも同様のレイアウトや制約を適用することができる

サンプルテンプレート

URL here

各要素ごとのルール

基本的な考え方

各デザイン要素は、

1. Symbol として要素を作り
2. Artboard 上で利用する

という使い方を想定しているので、例えば、複数行のテキスト入力欄をつくりたい場合、

Symbols ページ内にて

シンボル名はなんでもいいが、シンボル配下の要素は、名前を指定することで、対応するアプリ上のプロパティに適用することができる。 ここでは、Descriptionがフォント情報を含んだテキストとして、Backgroundが、背景色としてアプリ上で扱われることになる。

<メモ: シンボル配下の要素について、名前を特に指定しなくても、自動的に型を判定する機能を開発中。配下の要素が大量にある場合や、一度作ってしまった sketch に後から本ツールを適用したい場合、各シンボルの要素をすべて変更するのは大変だし、人間がやる以上ケアレスミスがでてくるので、ここも自動で検知できるようにしたいなと。>

各 artboard 内にて

アートボード上では、このようにアプリ上で適用したいプロパティに合わせて名前を指定しなければいけない。 この場合は、TextViewを含めることで、複数行のテキスト入力欄としてアプリ上では認識されることになる。

---

自動変換に対応しているキーワードは以下の通り：

ボタン - Button

• artboard 上では、名前の最後にButtonキーワードをつけること (例えば Apple Pay Button)
• 実体はシンボルとして定義すること
• シンボル配下の要素は、以下の名前にすると各種アプリ上の要素に適用できる：

必須/任意	名前	sketch の型	アプリに適用されるプロパティ
任意	Label	Text	文字列、フォント(名前,色,サイズ)
任意	Background	rectangle	背景色
任意	Icon	symbol	アイコン(Symbol ページにてスライスされた要素を Override で指定)

---

複数行テキスト入力 - TextView

• artboard 上では、名前の最後にTextViewキーワードをつけること (例えば Description TextView)
• 実体はシンボルとして定義すること
• シンボル配下の要素は、以下の名前にすると各種アプリ上の要素に適用できる：

必須/任意	名前	sketch の型	アプリに適用されるプロパティ
任意	Description	Text	文字列、フォント(名前,色,サイズ)
任意	Background	rectangle	背景色

[制約事項]

• デフォだとテキスト編集はできないようにしているので、編集したい場合は、適宜 iOS/Android 側でフラグを変える必要がある

---

1 行テキスト入力 - TextInput

• artboard 上では、名前の最後にTextInputキーワードをつけること (例えば Name TextInput)
• 実体はシンボルとして定義すること
• シンボル配下の要素は、以下の名前にすると各種アプリ上の要素に適用できる：

必須/任意	名前	sketch の型	アプリに適用されるプロパティ
任意	Placeholder	Text	文字列、フォント(名前,色,サイズ)
任意	Background	rectangle	背景色

---

画像 - Image

• 実体はシンボルとして定義すること
• Fills のタイプで、Pattern Fill を選択すること(以下画像参照)
• シンボル配下の要素は、以下の名前にすると各種アプリ上の要素に適用できる：

必須/任意	名前	sketch の型	アプリに適用されるプロパティ
任意	Image	Text	画像
任意	Background	rectangle	背景色

---

リストビュー / セル - List / Cell

• artboard 上では、名前の最後にListキーワードをつけること (例えば City List)
• 要素はgroupとして定義すること
• リスト配下のセルは、artboard 上では、名前の最後にCellをつけること (例えば City Cell)
• 同じ種類のセルはすべて同名にすること (別名にすると、別種類と認識される)
• リスト配下のセルの実体は、symbol で定義すること
• symbol の各要素に命名規則はありません

要素の自動判別

自動的に上記のような sketch の要素をアプリの各種プロパティに適用する機能もあるが、今開発中で仕様は未定。 今検討しているのは、artboard 上での命名規則はそのままに、配下の symbol 要素は自動判別というのをしようかなと。 この場合、上記のシンボル名による制約はなくなる。

FAQ

Q. 例えば複数のキーワードを利用した場合はどうなるの？

最後にマッチしたキーワードが優先されます。例えば、List Buttonの場合は、Button として認識されます。

Q. 大文字と小文字は区別するの？

しません(の予定)。

メモ

• List は、現状 1artboard に 1 つしか適用できない
• List は、単語ごとに半角空白で区切ること
• sharedStyle を使っている場合、artboard 上で同 style を上書きしても無効とする (例えば、背景色。sharedStyle ですでに設定されているのに、さらに artboard 上で fills を設定したとしてもそれは無効とする)