デザインとエンジニアリングのシームレスな連携〜スタイリングの効率化〜

こんにちは。アイスリーデザイン、エンジニアリング部のタンノです。

プロジェクトの開発効率を向上させるには、デザインとエンジニアリングがシームレスに連携することが必要不可欠になります。新しいツールが次々と登場している中、これらを駆使することが連携をよりスムーズに進める鍵となっているようです。

今回の記事では、私たちが具体的にどのようなツールや手法を使った取り組みを行っているかご紹介します。

シームレスな連携

私たちが考える「シームレスな連携」とは、デザインとエンジニアリングのプロセスがスムーズに統合され、壁がない状態のことです。

みなさんはデザインとエンジニアリングの「壁」と聞いて何を思い浮かべるでしょうか？私たちは以下の3つの壁について重要視しています。

これらの壁をなくすことが、シームレスな連携につながり、プロジェクトの開発効率向上に繋がると考えています。

本記事では、上記で挙げた3つの壁のうち「スタイルのコーディング効率の悪さ」に焦点を当てていきたいと思います。

スタイリングの効率を妨げているものとして、デザイナーが修正を加えるたびにエンジニアも修正が必要となることが挙げられます。大まかな開発が終了した後でも、細かなデザイン変更がある場合、エンジニアは手動でコードを書き換える手間が残ります。

また、デザインとエンジニアリングの間にはスタイルやデザイン要素の一貫性が保たれるべきですが、これらが不足している場合も効率の悪さに繋がります。デザイナーが更新したデザイン要素が開発者に正確に伝わらないと、再調整や修正が頻繁に発生し、時間と手間がかかります。

以下では、私たちがこれらの課題に対処するために行った取り組みを紹介します。

開発プロセスにおいてデザインの一貫性を保つために、デザイントークンの活用が注目されています。以下では、デザイントークンをスタイルファイルに変換することで、スタイリングを自動化する流れをご紹介します。

“バリアブル”とは、プログラムやデザインにおいて変数として扱われる値や設定を指します。これは、特定の値やスタイルを一箇所で定義し、複数の場所で再利用する仕組みです。

Figmaでは現状以下の4種類のバリアブルを定義することが可能です。

バリアブルを使用することで、カラーコードや線の太さ、余白など、デザインの重要なプロパティに変数を適用できます。また、デザイナーはバリアブルを管理することで、デザインシステム全体の一貫性を簡単に保つことができます。

使用したツールは以下の通りです。

以下の手順でスタイリングを自動化できます。

今回バリアブルを使用したように、デザイントークンを活用したスタイリングは、デザインとコードの整合性を高め、視覚的な一貫性の確保を可能にします。また、デザイン要素ごとに手動でスタイルを変更する必要がなくなり、変更が一元的に行えるようになります。

スタイリングの自動化を導入することで、デザイナーが変更を加えるたびに手動でコードを変更する手間が省けるのはエンジニアにとって嬉しいポイントです。

今後、実践を通じてどれだけ有効に活用できるか検証を進めていきます。

今後も新たなツールの導入へ積極的に取り組み、より効果的な開発プロセスを模索していきます。次週は、「デザインとエンジニアリングのシームレスな連携〜UIコンポーネント/UIレビュー〜」を投稿予定です。ぜひあわせてご覧ください！

（関連記事投稿されました！こちらからどうぞ！）

デザインと開発の連携にお困りですか？お気軽にご相談ください。