プロジェクトのご説明
Figures
(フイギャス)
自分のデザインスタイルを色々なJavascript、Typescriptのプロジェクトに簡単に適用！ さらに、ライブラリ化による再使用生の向上！
プロジェクトの詳細
このプロジェクトは、曲率、厚さ、色、テキストのフォントなどのデザイン要素を事前に 定義して、同じデザインの再使用と適用ができるようにします。 事前に"タイプ安全に"と定義されたデザイントークンを作成した後、Tokens-Toを利用して、CSSとしても使えるように変換します。
プロジェクトの目的
JavaScript、TypeScriptを使用したフロントエンドプロジェクトで、統一性のあるデザインを適用するために開始されました。 事前に定義されたデザイン オブジェクトとトークンをライブラリとして使用できます。活用した技術
Typescript
Node.js
TokensTo
NPM
Github
ハイレベルアーキテクチャ
プロジェクトのポイントと学んだこと
このプロジェクトは、複数の個人開発プロジェクトにおいて、JavaScriptやTypeScriptを活用したフロントエンド開発に一貫したデザインを適用するための小さな「デザインシステム」を構築することを目的としたプロジェクトです。 事前に定義されたデザインの値が存在しない場合、デザインを適用するたびに処理がプログラム的になりやすく、型安全性も保証できないという課題があります。 このような問題を解決するためには、コードで定義されたデザインシステムを導入することが効果的です。 本プロジェクトでは、デザインシステムを設計し、ライブラリとして整備することで、デザインの一貫性と再利用性を高めることを目指しました。