こんにちは！
コミュニティの読者の皆様に、IT企業Omegaでの勤務を通じて得られた経験と知識を共有できることをうれしく思います。
デザインシステムのトピックは、すでにあらゆる側面から検討されているようです。多くの記事、投稿、レポート、その他の資料を見つけることができます。それにもかかわらず、この用語に出くわす誰もが多くの質問をします。私は主なものに詳細に答えようとします：
デザインシステムとは何ですか？
それは何のため？
それを作成する方法は？
デザインシステムとは何ですか？
順番に整理していきましょう。設計システムは、次の3つのエンティティの組み合わせです。
視覚的な言語は私たちが見るものです。
フレームワーク-ビジュアル言語ライブラリ、そのコード。
ガイドライン-すべてがどのように見えるべきか、そしてどのように適用するかのルール。
設計システムは、IT製品内の別個の製品であると見なすことができます。
視覚言語
デザインシステムのビジュアルコンポーネントには多くの要素が含まれており、その主なものは次のとおりです。
色
UI-
– . , , . - , , , .
, , -, , , ? ? , .
Framework
– , , . .
. , « ». , « ».
, ? , . , ? , ?
, .
Guidelines
, -, « », .
, , . , - . . .
, . , ? , :
?
?
?
UI- : , .
, - . , - . , , .
-?
IT-, : -? , – « »?
. , . .
– . - .
, Figma . , , .
- . . .
– . .
, , , , .
, : , , .
IT- .
, : , , .
UX
, , . , , .
- user flow (, , ). , user flow .
- . , , .
-
-, , , .
-, - – . . - . : , - .
, - . - , .
, - - , , Figma. , UI-kit. , Figma ,
-?
-. , . , . (Brad Frost) «Atomic Web Design».
, :
設計システムを作成した後、それを会社の業務にどのように実装するかを理解することが重要です。2番目の記事では、どの企業でも設計システムを実装するプロセスを段階的に構築する方法について説明します。
皆さんがこの記事から多くを学んだことを願っています。そして、記事の作業は知識を構築し、追加の研究の動機付けになるともう一度確信しました。
清聴ありがとうございました！