![見出し画像](https://assets.st-note.com/production/uploads/images/68154260/rectangle_large_type_2_c6ab58088942119cf03e30bc97342db8.png?width=800)
【Day1】100DaysOfDesign
初日なので自己紹介。
フロントエンドエンジニアをしているきょんしーです。
新卒の会社でフロントエンドを始め、次の4月を迎えると歴は3年になります。いつもはReact, TypeScriptを書いておりデザイナーさんが作ってくださったFigmaのHi-fiプロトタイプを元にコンポーネントを作っていますが、最近はパフォーマンスのこと考えたりコンポーネント設計のこと考えたり開発に必要なツールやテストの環境を整えたりしてます。
フロントエンドエンジニアと言ってもできることは多いなぁと思ってて、色々な新しいライブラリなり考え方なりが生まれててずっと勉強してて飽きないのは個人的に楽しいです。
ただ、ここ1年くらいは特にUIデザインやそれによってユーザーが感じることに興味を持っていました。デザインされたものを実装するということで欲を満たしていたのですが、どうもデザイン原則などを知らないことで自信を持てなかったりすることが増えてきました。他にも色々とあるのですが初めから頑張りすぎてもいけないので2日目以降に。
ゴールは決めてないです。とりあえず100日続けるために小さく始めます。自分が目指してるのはデザインエンジニアという職業っぽいのですがまだきちんと整理できていないので整理ができてきたら書こうと思います。
FigmaのVariants機能を使ってみる
Buttonのコンポーネントを作ってみました。
![](https://assets.st-note.com/img/1640002319250-rNXfUuBxI5.png?width=800)
![](https://assets.st-note.com/img/1640002372592-vy3UABIVDN.png?width=800)
PrimaryとSecondaryそれぞれに対し、default, hover, disabledのステータスのボタンを作成しました。
![](https://assets.st-note.com/img/1640002563867-jrYir6ECuw.png?width=800)
![](https://assets.st-note.com/img/1640003279734-REOqzf8d5C.png)
今日行ったButtonのコンポーネントを参照してVariantsを使ってみる動画を貼っておきます。
明日すること
明日はカラーパレットを作ってみようと思います。できたらFigmaのLibrary機能を使ってカラーとボタンをpublishしてみます。
この記事が気に入ったらサポートをしてみませんか?