Diez Memo

Diezを軽く試したのでメモ。
結論からいうと、以下の理由で導入は2019年12月時点では見送り。
- まだ開発途中感...。(Figma, Sketchでシンボルとスタイルを同じ状態でエクスポート形式が現状異なる)
- 普段の使い方とあまりFitしない。(Androidでテストしてもらった人の感想)
- XML書出できない。(書出の仕方を選べない)
機能が充実&改善されていくとまた違ってくるかもしれません。

Diez — The Design Language Framework

Diezについて

Diezでできることはデザインファイルから実装で必要なデザイントークン生成です。(画像, スタイル, テキストスタイルなど)
Web, iOS, Androidと異なるプラットフォームでもサービス的には共通で使用するデザインルールを一元管理し、一括変更できるので便利だなと思いました。(対応プラットフォームが多いと広範囲のスタイルの変更は大変...)

デザイン形式
- Figma
- Sketch
- InVision DSM (未テスト)
- Adobe XD (未テスト)
エクスポートできるコード形式
- iOS / Swift, Obj-C
- Android / Kotlin, Java
- Web / JavaScript, CSS/Sass

試してみて気づいたこと

試したのはFigmaとSketchのカラースタイルとシンボルの書出。
- デザインデータから生成されるファイル名はアッパーキャメルケース
- デザインデータ内の命名はキャメルケースに変換
- Figma カラースタイル生成される
- Figma シンボルがコンポーネントとして生成される(エクスポート設定無視)
- Sketch カラースタイル生成されない(Ver59, 61でテスト)
- Sketch エクスポート設定しないと生成されない(スライスとして生成させる)
- Sketch シンボルがコンポーネントして生成されない
- Sketch/Figma 両方ともエクスポートでSVGを指定しても無視される(PNG書出のみ)
- ツール側の思想・構造にもよるが、書き出し方が異なるのが気になる

Demoを動かすまでのフロー

( この動画みるとなんとなくわかるはず
https://www.youtube.com/watch?v=41xMXV52Uwo

0. yarn インストール済前提
1. ターミナルで以下コマンド実行
↓この辺のドキュメント
https://diez.org/getting-started/#set-up

yarn create diez

2.  Enter the name for your Diez project. A directory will be created if it does not already exist.
と聞かれるので使用するプロジェクトを指定、または新規作成する。
例 : /workspace/your-ds-name/

your-ds-name

3. 既存または生成されたdesign-languageに移動

cd your-ds-name/design-language

4. デモを起動 ( デフォルト状態のデモページがブラウザで起動される )
http://localhost:8081/

yarn demo

5. デザインデータをエクスポートしてみるための準備をする。(カラースタイルが試しやすい)
Figmaの場合はyour-ds-name/design-language/.diezrc をエディタで開き、URLを入れる

{
 "designs": {
   "services": ["https://www.figma.com/file/対象プロジェクトURL"]
 }
}

Sketchの場合はyour-ds-name/design-language/designs/name.sketch にスケッチファイルを置く

6. ターミナルで別タブを開き、your-ds-name/design-language/ の場所で以下のコマンド実行。(Figmaの場合は認証の確認をブラウザで問われるので承認する。)

yarn diez extract

7. エクスポートが終わると your-ds-name/design-language/src/designs/ の場所にデザインのファイルが生成されているのを確認する。
例 : 
your-ds-name/design-language/src/designs/YourFigmaProjName.figma.ts
your-ds-name/design-language/src/designs/YourFigmaProjName.sketch.ts

8. エディタで your-ds-name/design-language/src/DesignLanguage.ts を開く
9. importが書かれてる場所の下にエクスポートされたファイルをインポートする。

import { yourFigmaProjNameTokens } from './designs/YourFigmaProjName.figma';

10. カラーをエクスポートしたものに変え、ファイルを保存すると起動しているデモページが即時反映される。
↓詳しくはこの辺を参考に !
https://diez.org/getting-started/figma.html

contentBackground: colors.white,
を
contentBackground: yourFigmaProjNameTokens.colors.darkBasic,
にして保存(↑例)

百聞は一見に如かずなので、試してみてください。

Style Dictionary

似たようなものでこれも試してみようという話になりました。
https://github.com/amzn/style-dictionary
https://amzn.github.io/style-dictionary/
- デザイントークンを各プラットフォーム関わらず一貫性を持って管理する
- json定義で各プラットフォームの書出をする
- デザインからの書出はできない

Style Dictionary - サタケ箱

デザイントークンを一元管理するにあたって

問題点
- 既に各プラットフォームで別々の実装だと、命名規則揃えるところから時間かかりそう。
- デザインの命名規則も実装と合わせる必要がある。(元々やっていないチームでは大変そう)
- デザイナーとエンジニアで協力して取り組めないと頓挫しそう
一元管理ができている利点
- プラットフォーム関わらずで一括で変更できる(デザイン修正が早くなる...はず)
- デザインデータが実装の命名と揃っているので確認しやすい

(oﾟ□ﾟ)o≪≪≪ﾜｱｧｧｧｧｧｧｯ!!
運用しやすい状態にするまでの道のりが長い。

その他

検証の話し合いで話題に出たものたち

Design It!

レイヤードアーキテクチャについて - Qiita

Story-Assured Design - 未来の改善スピードのためのデザインワークフロー

Atomic Design ~堅牢で使いやすいUIを効率良く設計する