92
73

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-28

はじめに

はい、はるうさぎです。
Figmaでデザインしたものをコードに起こすのって面倒じゃないですか?
パッとコードに変換できるものないかなあ〜と探していたら、あるじゃないですか!
それがFigma to Flutter です!
今回はFigma to Flutterというモノを使ってみた備忘録です。

Figmaって?

説明するまでもないと思いますが、WEB上でいろんなことができるものですよね。
こちらのサイトに詳しく書かれていますね。
私は今までadobeXDしか触ったことがなかったので、新鮮でした。
(正直adobeXDより使いやすかった)

開発者向けのAPIやプラグインがたくさんある

開発者向けのサイトがあるのですが、色々なプラグインなどが用意されています。
ここでは詳細なプラグインなどは書きませんが、気になる人は見てみると面白いと思います。

APIについてはこちらに詳しく書かれています。
ただ、全て英語のドキュメントになっているので、Google先生に頼ってくださいw

Figma to Flutterって?

Figma to Flutterは、FigmaでデザインしたものをDartで吐き出してくれるツールです。
作者のGitHubで公開されているので、気になる方は是非👌
使い方などはREADMEに書かれています。
OnlineToolがあるので、こちらを使っていきます。
その前に必要なものを準備します。

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

FigmaのAPIアクセストークンの取得

編集画面から Help and AccountAccount Settingを選択します。
スクリーンショット 2020-02-28 16.45.41.png

するとアカウント設定の画面に遷移します。Personal Access Tokensの項目の下にある
+ Create a new personal access token を入力します。
スクリーンショット 2020-02-28 16.47.59.png

自分が作業しているURLを貼ればOKです。
スクリーンショット 2020-02-28 16.54.19.png

スクリーンショット 2020-02-28 16.52.50.png

入力してEnterをすると、アクセストークンを取得できます。大事にどこかへ書き留めておいてください。
スクリーンショット 2020-02-28 16.55.28.png

ファイルキーの確認

こちらに書いていますが、
https://www.figma.com/file/:key/:titleという形式になっています。
変換したい、figmaのフィルにアクセスした時の:keyに該当する部分を控えておいてください。

使用方法

今回私は自分の名刺を試しに使用してみます。
スクリーンショット 2020-02-28 17.08.37.png

ここにアクセスします。以下の画面になります。
スクリーンショット 2020-02-28 17.10.37.png

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

スクリーンショット 2020-02-28 17.17.17.png
デザインによりますが、枠線の中にパーツの名前とチェックボックスが出てきます。
出てきたらコードに起こしてほしいパーツにチェックを入れてGenerate Dart codeをクリックしましょう。
(私の場合は名刺なので、パーツなどはなかったのかな?)

スクリーンショット 2020-02-28 17.20.50.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日潰してしまいました。
やっと思うようにできたので、参考程度に書かせていただきました。
少しでもコードを書く負担を減らせればいいなと思っています。

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

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

92
73
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
92
73