wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

Figma使ってデザインを管理してみる

新しいアイコンができたので、 合わせてアプリのデザインをリニューアルしようと作成中

ちなみに新しいアイコンは、こちら

ということで、合わせてデザインの管理もFigmaに移行しました

Figmaとは

www.figma.com

アプリとブラウザで使用できるデザインツール 元々この手のツールはSketchで管理していることが多かったけど、こちらは無料な上にブラウザでも使用できて、mac以外でも使えてとかなりいい感じのツールになってます。

早速、作っていきます

初期画面は、こんな感じ

f:id:wheatandcat:20190626230328p:plain

Frameは各デバイスサイズに合わせて作成できます。

f:id:wheatandcat:20190626230420p:plain

今回はiPhoneXで作成

まずは、アイコンとヘッダー作成とボトムのタブを作成

f:id:wheatandcat:20190626230621p:plain

そこから中身をこんな感じで作成

f:id:wheatandcat:20190626230647p:plain

ヘッダーとフッターは、他でも使用するのでコンポーネント化するf:id:wheatandcat:20190626230804p:plain

これで、他の画面でも共通で使用可能です。 ついでにアイコン類も全部読み込ませてコンポーネント化していきます

f:id:wheatandcat:20190626230957p:plain

カラーの管理は、こんな感じで作成すれば、

f:id:wheatandcat:20190626231143p:plain

こんな感じで指定できるようになるので楽に管理できます

f:id:wheatandcat:20190626232118p:plain

リニューアルしたいところを諸々作成

f:id:wheatandcat:20190626232305p:plain

さらにprototypeを設定すると画面遷移も作れます

f:id:wheatandcat:20190626232612p:plain

完成品

URLで簡単に共有できるので、こちらに貼っておきます

↓はクリックしていくと画面遷移します

使いやすくて良いツールだったので、今後も使っていこうと思います