きょんしー

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

きょんしー

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

  • 100DaysOfUI

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

【Day4】100DaysOfDesign

3日目の記事はこちらからアクセスできます。 入力フォームのコンポーネント作成FormのInputコンポーネントを作ってみました。テキストを入力した状態や空の状態、入力中、エラーの状態などを持っています（多分これで一通りの表現はできてる） 作成したInputを元にタイトルや必須、エラーテキストをつけたFormコンポーネントも作成しました。 Buttonの時の応用でInputを作ることはできたし、Inputを元にFormを作ることで、フロントエンドでのAtomic Desig

きょんしー

    • 【Day3】100DaysOfDesign

      2日目の記事はこちらからアクセスできます。 3日目。昨日まではButtonの作成、カラーパレットの作成とButtonへのカラーの適用を行いました。Buttonが持つ状態としてはdefault, hover, focus, disabledなどの状態を持つと思うのですが、その中でもhoverをFigmaのPrototype上でどう表現するのか気になったので試してみました。 Prototype作成調べる前にPrototype使ってみたのですが、[interactions]から

      きょんしー

      • 【Day2】100DaysOfDesign

        1日目の記事はこちらからアクセス可能です。 今日は2日目。カラーパレットの作成とPublishをして別のファイルから参照できるようにしました。コンポーネントのPublishはProプランにする必要があるっぽいことが分かりました。 カラーパレットの作成カラーパレットの配色は material.io から拝借しました。 カラーだけでなく余白や座標等の考え方から、どういうときにどのコンポーネントを使うと良いかと言ったことまで幅広く書かれているのでどこかで読んだ感想をまとめようと

        きょんしー

        • 【Day1】100DaysOfDesign

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

          きょんしー

        【Day4】100DaysOfDesign

        きょんしー

        マガジン

        • 100DaysOfUI
          4本

        記事

          寄付を始めてみました

          最近、OSS活動をする方への寄付を始めました。以下のサイトで寄付先や金額、なぜ寄付しようと思ったかなどを整理するようにしました。 過去、ふるさと納税をしたことはありましたが自治体への寄付という側面はありつつも返礼品が目当てになっていました。クラウドファンディングも同じような目的でした。 東日本大震災や24時間テレビ、赤い羽根共同募金で少額ながら寄付したこともありましたが、どうも寄付した後に複雑な気持ちが残ったのを覚えてます。この気持ちが何なのかを考えてみたところ、寄付した際

          きょんしー

          寄付を始めてみました

          きょんしー