ツクロアのデザインシステムをFigmaで公開しました

figma-designsystem-fig Figma - tuqulore Design System

これまでいくつものプロジェクトに参加するたびに新しいコンポーネントを設定するのが手間だったり、また海外製のフレームワークだと日本語の文字サイズが小さすぎたりして、私たちがお客様と培ってきた知見を活かしたいと思っていました。

ちょうど私たちは私たちのデザインポリシーを一つひとつ言語化するにあたり、最終的アウトプットとなるUIグラフィックの部分についての考え方を UI design knowhow で小さな文書にまとめ続けているところでした。

この文書は随時更新や修正を行う予定です、なので「これが正しい」というより「小さくつくって反応を見てもっと良くする」をパートナー様と共有して育てたいと思います。

そして、実際にFigmaコミュニティー上にUIグラフィックデザインのコンポーネントを公開しました。

こちらから使うことができます。

ツクロアのデザインシステム

機能面も可能な限り考慮したうえで、Variants機能も多くのコンポーネントに設定しておきました。
例えばチェックボックスのtrueとfalseの状態による見え方の変化に関しては、インスペクタ上のプロパティを触るだけで外観が変わります。

example-checkbox

煩雑な操作に思考を奪われないように

いつでも新しいプロジェクトに入る度にここからDuplicateして使うことを、私たちはルール化することにしました。

より良い体験をデザインするために、外観も機能的であってほしい

一定のルールが必要だと考え、余白や幅、高さのサイズは私たちが頻繁に利用させていただいているCSSフレームワーク、 Tailwind CSS のデフォルトを基準に考えています。

今私たちは、React上で動作する、今回のグラフィックデザインが反映されたフレームワークをつくり始めています。
より一貫したルールに基づいた、より良いユーザー体験を提供できるように、これからも知見を溜めて、共有したいと考えています。