きょんしー

フロントエンドのエンジニア。

きょんしー

フロントエンドのエンジニア。

マガジン

  • 100DaysOfUI

    フロントエンドエンジニアがデザインを勉強する

記事一覧

【Day4】100DaysOfDesign

3日目の記事はこちらからアクセスできます。 入力フォームのコンポーネント作成FormのInputコンポーネントを作ってみました。テキストを入力した状態や空の状態、入力中、…

【Day3】100DaysOfDesign

2日目の記事はこちらからアクセスできます。 3日目。昨日まではButtonの作成、カラーパレットの作成とButtonへのカラーの適用を行いました。Buttonが持つ状態としてはdefa…

【Day2】100DaysOfDesign

1日目の記事はこちらからアクセス可能です。 今日は2日目。カラーパレットの作成とPublishをして別のファイルから参照できるようにしました。コンポーネントのPublishはPr…

2

【Day1】100DaysOfDesign

初日なので自己紹介。 フロントエンドエンジニアをしているきょんしーです。 新卒の会社でフロントエンドを始め、次の4月を迎えると歴は3年になります。いつもはReact, Ty…

寄付を始めてみました

最近、OSS活動をする方への寄付を始めました。以下のサイトで寄付先や金額、なぜ寄付しようと思ったかなどを整理するようにしました。 過去、ふるさと納税をしたことはあ…

【Day4】100DaysOfDesign

【Day4】100DaysOfDesign

3日目の記事はこちらからアクセスできます。

入力フォームのコンポーネント作成FormのInputコンポーネントを作ってみました。テキストを入力した状態や空の状態、入力中、エラーの状態などを持っています(多分これで一通りの表現はできてる)
作成したInputを元にタイトルや必須、エラーテキストをつけたFormコンポーネントも作成しました。

Buttonの時の応用でInputを作ることはできたし、

もっとみる
【Day3】100DaysOfDesign

【Day3】100DaysOfDesign

2日目の記事はこちらからアクセスできます。

3日目。昨日まではButtonの作成、カラーパレットの作成とButtonへのカラーの適用を行いました。Buttonが持つ状態としてはdefault, hover, focus, disabledなどの状態を持つと思うのですが、その中でもhoverをFigmaのPrototype上でどう表現するのか気になったので試してみました。

Prototype作成

もっとみる
【Day2】100DaysOfDesign

【Day2】100DaysOfDesign

1日目の記事はこちらからアクセス可能です。

今日は2日目。カラーパレットの作成とPublishをして別のファイルから参照できるようにしました。コンポーネントのPublishはProプランにする必要があるっぽいことが分かりました。

カラーパレットの作成カラーパレットの配色は material.io から拝借しました。
カラーだけでなく余白や座標等の考え方から、どういうときにどのコンポーネントを使

もっとみる
【Day1】100DaysOfDesign

【Day1】100DaysOfDesign

初日なので自己紹介。
フロントエンドエンジニアをしているきょんしーです。

新卒の会社でフロントエンドを始め、次の4月を迎えると歴は3年になります。いつもはReact, TypeScriptを書いておりデザイナーさんが作ってくださったFigmaのHi-fiプロトタイプを元にコンポーネントを作っていますが、最近はパフォーマンスのこと考えたりコンポーネント設計のこと考えたり開発に必要なツールやテストの

もっとみる
寄付を始めてみました

寄付を始めてみました

最近、OSS活動をする方への寄付を始めました。以下のサイトで寄付先や金額、なぜ寄付しようと思ったかなどを整理するようにしました。

過去、ふるさと納税をしたことはありましたが自治体への寄付という側面はありつつも返礼品が目当てになっていました。クラウドファンディングも同じような目的でした。
東日本大震災や24時間テレビ、赤い羽根共同募金で少額ながら寄付したこともありましたが、どうも寄付した後に複雑な

もっとみる