オブジェクト指向UIデザイン UIデザインをする際に画面やコンポーネントをオブジェクトとして捉えOOUI（オブジェクト指向UI）の様にモデリングを踏まえてデザインすることが一般化してきています。 しかし、そうやって定義されるオブジェクトが持つ属性の値はFigmaなどのデザインツールのプロパティ（Component Propertiesなど）では「文字列」「数列」「真偽値」といったプログラミングの型付けでいうところの「プリミティブ型（原始的な・根源となる型）」やURLやファイルパスにとどまっています。 プリミティブ型で構成されたオブジェクトの何が問題かというと、そのオブジェクトの正しさを測る場合にただの文字列や数列だけでは値が本当に正しいものか判断がしにくいところにあります。 オブジェクトに属する値もオブジェクトとして捉える 例えば、年齢。年齢を扱うオブジェクトがあった場合はOOUIの場合は

引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。 サイトの要件などに興味ある方は1日目の記事をご覧ください。 7日目 - 画面を増やして遷移できるようにする さてやっと7日目です。自分ではじめたこととはいえ、誰の何のためにこれを書いているのか段々自分でもよくわからなくなってきました…。一応目的としては、ReactでWebアプリケーション開発しているとReactフレンドリーなFramerが自分には使いやすく、またHandshake機能の登場やそもそもFigmaのUIが使いにくい…などでFramerを自分が関わるプロジェクトに導入したい時に口頭で説明してもピンとこない人たち向けに書いているところがあります。 というわけで本題です。 画面と遷移用のボタンを追加する とりあえず画面遷移の例を示したいので適当な画面を

デザインツール「Framer」からReactへComponentとしてimportできる新機能handshakeのレビュー FramerはXDでもFigmaの様なデザイン・プロトタイピングツールです。国内ではまだまだ採用事例は少なそうですが、Webフロントエンド…特にReactを採用している場合においてはかなりUIデザインとフロントエンド実装の連携が取りやすいツールであると言えます。 そんなFramerに「Handshake」という機能が追加されました（2021年10月現在ではAlpha版）。 これは、Framer上で作成したコンポーネントを既存のReactプロジェクトにimportできる機能です。 Framerってなに？ Framerは内部的にはReactを活用しています。Framer上でデザイナーがベクターなどを活用して作るComponentをSmart Component（= Des