１人 Flutter Advent Calendar 2019：#2 FigmaとZeplinでUI構築

Flutterでアプリを作成するにあたって、デザインツールでデザインしたものをきれいに取り込みたいという要望とか同期はアプリを作っていれば当然あると思います。
それを実現する方法としてFigma→Zeplin→Flutterの方法を一つの案として照会しようと思います。

連携のためにFigmaとZeplinはそれぞれDesktop版を入れてくれさい。
また、FigmaとZeplinでそれぞれProjectを一つ作っておいてください。

Figmaの細かい説明はしませんがFrameを作成してGoogle Pixel 2 XLを選択してみてください。これでだいたいいい感じに表示されると思います

Group化して、Component化などします。

(画像は適当に拾ったものです。。。)

Component化したGroupを選択した状態で、メニューからExportを選択すると

このようなメニューが出てくるので、Zeplinを選びます。
すると、１回、Browserを経由したあとで、以下のような画面になります。

Figma側では、以下を選んでおきます。

そうすると、Componentに以下のように取り込めます。

ココまでで、Designを取り込む準備が出来ました。

次にZeplinにFlutterのExtensionがあるので入れてみてください。
https://extensions.zeplin.io/johnatagoranet/flutter_extension
これです。

Zeplinを再起動すると以下のようにWidgetのコードが見られます。

これをコピペーすると

画像をassetsディレクトリーに入れて実行すると

となります。うまくいかないときは、Figmaの部品の並び順を見てみてください。z-indexで考えた時に下にあるものほど、下の順番にしないときちんと描画されないです。
Figmaの並び順でFlutterのコードも生成されるので、その順番で重なるためです。

なかなかの再現度ですが、微妙にずれています。
ずれている原因はborderのwidthの計算がextensionとFlutterの実装が合っていないようです。
borderのwidthを0にするとぴったり一致します。Blurなどのeffectは再現できていないようです。

同じようなことは、Sketch → Zeplinでも可能です。

このようにデザイナーが作成したものをきれいに取り込むことが出来るわけですが、小さい解像度のデバイスなどでは以下のようになってしまいます。

これについては、別途記述したいと思います。

ここで用いたcodeは
https://github.com/matsuhiro/figma_zeplin_test
こちらにあります。
Figmaはfigファイルというのを作成できだので、後でgitにでもpushしておきます。
Zeplinのプロジェクトは僕が無料版使っているから共有できないっぽいですね。