Figmaで作ったデザインをDartで吐き出してくれるFigma to Flutterを使ってみた

# はじめに
はい、[はるうさぎ](https://twitter.com/_harusa_p)です。
Figmaでデザインしたものをコードに起こすのって面倒じゃないですか？
パッとコードに変換できるものないかなあ〜と探していたら、あるじゃないですか！
それがFigma to Flutter です！
今回はFigma to Flutterというモノを使ってみた備忘録です。



## Figmaって？
説明するまでもないと思いますが、WEB上でいろんなことができるものですよね。
[こちら](https://ferret-plus.com/13195)のサイトに詳しく書かれていますね。
私は今までadobeXDしか触ったことがなかったので、新鮮でした。
~~（正直adobeXDより使いやすかった）~~



### 開発者向けのAPIやプラグインがたくさんある
[開発者向け](https://www.figma.com/developers)のサイトがあるのですが、色々なプラグインなどが用意されています。
ここでは詳細なプラグインなどは書きませんが、気になる人は見てみると面白いと思います。

APIについては[こちら](https://www.figma.com/developers/api)に詳しく書かれています。
ただ、全て英語のドキュメントになっているので、Google先生に頼ってくださいw


#Figma to Flutterって？
[Figma to Flutter](https://www.figma.com/resources/api-and-extensions/figma-to-flutter/)は、FigmaでデザインしたものをDartで吐き出してくれるツールです。
[作者のGitHub](https://github.com/aloisdeniel/figma-to-flutter)で公開されているので、気になる方は是非👌
使い方などはREADMEに書かれています。
[OnlineTool](https://aloisdeniel.github.io/figma-to-flutter/)があるので、こちらを使っていきます。
その前に必要なものを準備します。

今回のFigma to Flutterですが、`APIのアクセストークン`と`ファイルキー`が必要になるので、アクセストークンの取得から順を追って説明をしていきたいと思います。Figmaのアカウントを持っている前提でお話します。


## FigmaのAPIアクセストークンの取得
編集画面から `Help and Account`→ `Account Setting`を選択します。
<img width="424" alt="スクリーンショット 2020-02-28 16.45.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/fd9d8d7b-e527-5d65-7deb-b26fd7ee790c.png">

するとアカウント設定の画面に遷移します。`Personal Access Tokens`の項目の下にある 
`+ Create a new personal access token` を入力します。
<img width="1232" alt="スクリーンショット 2020-02-28 16.47.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/8270b960-1290-e3ec-a41c-71f50f0176ad.png">

自分が作業しているURLを貼ればOKです。
<img width="422" alt="スクリーンショット 2020-02-28 16.54.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/e2940946-a57f-b114-a942-57a4ed3b169a.png">

<img width="508" alt="スクリーンショット 2020-02-28 16.52.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/2f54a395-1272-f234-0cfd-9edfdbf8f7c8.png">

入力してEnterをすると、アクセストークンを取得できます。大事にどこかへ書き留めておいてください。
<img width="595" alt="スクリーンショット 2020-02-28 16.55.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/3cfcdebb-d61e-0437-03ca-b7694affd50d.png">

## ファイルキーの確認
[こちら](https://www.figma.com/developers/api#get-files-endpoint)に書いていますが、
`https://www.figma.com/file/:key/:title`という形式になっています。
変換したい、figmaのフィルにアクセスした時の`:key`に該当する部分を控えておいてください。

# 使用方法
今回私は自分の名刺を試しに使用してみます。
<img width="432" alt="スクリーンショット 2020-02-28 17.08.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/1af2e548-8a1b-fcd6-203a-7cbb6e3f7864.png">

[ここ](https://aloisdeniel.github.io/figma-to-flutter/)にアクセスします。以下の画面になります。
<img width="1440" alt="スクリーンショット 2020-02-28 17.10.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/1dd5fa18-2faf-708e-a53e-b5e8ea5a3e46.png">

`authentication token`に上で取得したアクセストークン
`file_key`にURLの`:key`を入力し、`Load components`をクリックします。


<img width="721" alt="スクリーンショット 2020-02-28 17.17.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/ade7d5dd-c9ae-8c4e-4652-dfb93a4328e9.png">
デザインによりますが、枠線の中にパーツの名前とチェックボックスが出てきます。
出てきたらコードに起こしてほしいパーツにチェックを入れて`Generate Dart code`をクリックしましょう。
（私の場合は名刺なので、パーツなどはなかったのかな？）




<img width="719" alt="スクリーンショット 2020-02-28 17.20.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/8fcc7634-cf9d-510f-9ba3-6e0dd11ddd68.png">

右半分にデザインのコードであろうものがDartで吐き出されました。わああい便利！！！
コピーするときは`Copy to clipboard`をクリックするとできます。
せっかくなので、こちらにコードをあげておきます。

```sample.dart
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class _PathCatalog {
  _PathCatalog() {}

  static final _PathCatalog instance = _PathCatalog();
}

class _PaintCatalog {
  _PaintCatalog() {}

  static final _PaintCatalog instance = _PaintCatalog();
}

class _EffectCatalog {
  _EffectCatalog() {}

  static final _EffectCatalog instance = _EffectCatalog();
}

class _ColorCatalog {
  _ColorCatalog() {}

  static final _ColorCatalog instance = _ColorCatalog();
}

class _TextStyleCatalog {
  _TextStyleCatalog() {}

  static final _TextStyleCatalog instance = _TextStyleCatalog();
}

class Data {
  Data({this.isVisible});

  final bool isVisible;

  @override
  bool operator ==(o) => o is Data && isVisible == o.isVisible;
  @override
  int get hashcode {
    int result = 17;
    result = 37 * result + (this.isVisible?.hashCode ?? 0);
    return result;
  }
}

class TextData extends Data {
  TextData({isVisible, this.text}) : super(isVisible: isVisible);

  final String text;

  @override
  bool operator ==(o) =>
      o is TextData && isVisible == o.isVisible && text == o.text;
  @override
  int get hashcode {
    int result = 17;
    result = 37 * result + (this.isVisible?.hashCode ?? 0);
    result = 37 * result + (this.text?.hashCode ?? 0);
    return result;
  }
}

class VectorData extends Data {
  VectorData({isVisible}) : super(isVisible: isVisible);

  @override
  bool operator ==(o) => o is VectorData && isVisible == o.isVisible;
  @override
  int get hashcode {
    int result = 17;
    result = 37 * result + (this.isVisible?.hashCode ?? 0);
    return result;
  }
}
```
※吐き出したコードで動作は確認してません。

#まとめ
Figma to Flutterという画期的なツールを紹介しました。
あまり使っている方がいらっしゃらないのか、参考にする記事などがなく1日潰してしまいました。
やっと思うようにできたので、参考程度に書かせていただきました。
少しでもコードを書く負担を減らせればいいなと思っています。

今回は名刺というコードに起こす必要もないもので使用しましたが、アプリ開発にはすごい便利なツールだと思います。
ただ[作者のブログ](https://aloisdeniel.github.io/introducing-figma-to-flutter/)にも書いてるのですが、まだまだ実験的なものらしいです。
できないことも多々あるみたいなので、その際は自力で頑張ってください。

不明点や質問などがありましたらコメントいただけると幸いです。
最後まで読んでいただきありがとうございました。