新しいアイコンができたので、 合わせてアプリのデザインをリニューアルしようと作成中
ちなみに新しいアイコンは、こちら
ということで、合わせてデザインの管理もFigmaに移行しました
Figmaとは
アプリとブラウザで使用できるデザインツール 元々この手のツールはSketchで管理していることが多かったけど、こちらは無料な上にブラウザでも使用できて、mac以外でも使えてとかなりいい感じのツールになってます。
早速、作っていきます
初期画面は、こんな感じ
Frameは各デバイスサイズに合わせて作成できます。
今回はiPhoneXで作成
まずは、アイコンとヘッダー作成とボトムのタブを作成
そこから中身をこんな感じで作成
ヘッダーとフッターは、他でも使用するのでコンポーネント化する
これで、他の画面でも共通で使用可能です。 ついでにアイコン類も全部読み込ませてコンポーネント化していきます
カラーの管理は、こんな感じで作成すれば、
こんな感じで指定できるようになるので楽に管理できます
リニューアルしたいところを諸々作成
さらにprototypeを設定すると画面遷移も作れます
完成品
URLで簡単に共有できるので、こちらに貼っておきます
↓はクリックしていくと画面遷移します
使いやすくて良いツールだったので、今後も使っていこうと思います
