デザインを作りながら考えた開発との連携

Gaji-Labo ではデザインとフロントエンドの連携の仕方を考えています。
デザインとフロントエンドのチームでどのような考え方を共有できるとよいのか、まだ模索中ではありますが途中経過とひとつ見えてきたことを書いてみたいと思います。

Figma がヒント

Figma を触り始めたころ、テキストスタイルなどおいて過去のコーディング体験、とくにCSSでつくるようなスタイリングとリンクするなーと感じていました。
テキストのスタイルについては、他のツールでCSSでのコーディングに落とし込もうとするときテキストスタイルのプロパティとのズレを感じていたいたこともあるかもしれません。

この感覚は Auto layout の機能が追加された際にさらに強化されたように思います。「おお、デザインツールで Flexbox できる！」
Auto layout はデザインするUIの構造化もしやすく、「レイヤーの名前をちゃんとしておこう…」とも。
レイアウトするために使用されているレイヤーでもハンズオフされたときに意味がでるのではないか、と感じました。
また Figma ではデザインとハンズオフが一貫しているので、“デザインカンプ” としてデザインを作っていたときの成果物の最終調整としてレイヤー整理（レイヤーの命名を揃える、フォルダー分けするなどのPhotoshop でのカンプ作成を想定しています）のプロセスをおくのではなく、常にデザインは最新でハンズオフできるレイヤー状態があるのかなと思いました。

さらに、Figma の Component に Variants でバリエーションが登場。
バリエーションを作成するときにプロパティと値を設定するわけですが…
Component に Variants のプロパティと値はハンズオフの Inspect でも表示されます。これって、フロントエンドのコンポーネント作成のバリエーションにもそのままで活用できるとよいのでは…
Variant のプロパティはデザインであると良さそうなパターンでなんとなく考えてしまうのですが、それがコンポーネントの規定になっていいのかと思ったり、Inspect の Variants をエンジニアにどう見えているのかを考えるともう一歩踏み込んだ共通認識を持ったほうがよいように思います。

認識をあわせたい

Figma のデザインのつくり方は、開発効率だけでなくデザインを継続的にメンテンス性も関わってきそうだなと考えています。
コンポーネントの開発で進めていくならば、デザインでも Atomic Design のようなレイヤー感を持つべきなのかも考えたり。

デザイナーがエンジニアのコーディングするような意識を持ってデザインをする必要はないと思いますが、デザインがビジュアルだけではない構造や設計の意識を持つのは、開発の後工程や将来のメンテンス性には良い影響になるのではないかと思います。
レイヤーを構造化は、ビジュアル上の塊としてグループ化だけでなく、ドキュメントを書くときのアウトラインのようなイメージです。

Component の Variants を意識しだすと、機能のUIのパターン出しや意味付けを仕様の段階からデザインと開発で共通に持てるといいなあと思います。
時間や手間が掛かりそうですが、プロダクトへの理解が深まりそうです。そのときに生まれてくるのが、プロダクトの共通言語や概念なのではないか。

デザインとフロントエンドの連携について考え続けていますが、プロダクトの共通言語や概念をチームであわせることがやはり開発への貢献になるのではないかと落ち着くことが多いです。時間や手間がかかるものをどう効率をあげられながら進められるか、この点も意識しながら模索を続けて行くのだと思います。