BLOG
Figma to Code（Flutter）を使ってみました
2024.01.17
2024.01.22
Figma to Code (HTML, Tailwind, Flutter, SwiftUI）はFigma のデザインをコード（HTML, Tailwind CSS, Flutter, SwiftUI）に変換するFigmaのプラグインです。Bernardo Ferrari氏が開発しており、ソースコードはGithubに公開されています。
今回の記事では、Figma to Code（Flutter）の有用性について検討していきます。
具体的には、実際にFigma上で作成されたモバイルアプリのデザインに対して、Figma to Codeを適用します。そして、出力されたコードをFlutterプロジェクトに追加し、アプリを実行します。その結果について考察することで、Figma to Code（Flutter）の有用性について検討していきたいと思います。
この記事ではFlutter 3.16.5とDart 3.2.3をベースに解説を行っています。
使用方法
Figma to Code (HTML, Tailwind, Flutter, SwiftUI）は、2023年9月12日に更新されたVersion 28を使用します（2024年1月9日時点で最新）。
まず初めに、今回使用するデザインは、FigmaのMobile app design templatesから以下のInvest App App designというテンプレートです。
今回は、上記の赤枠で囲われている「Create account」画面に対して、Figma to Codeのプラグインを適用することでソースコードの生成を試みます。
まず、「Create account」画面を選択します。
その後、以下の手順に従って、Figma to Codeプラグインを実行します。
①Figmaのツールバーからメニューを選択します。「Plugins」から「Manage plugins...」をタップするとプラグインを検索することができます。
②「figma to code」と入力すると、該当するプラグインが検索に引っ掛かると思うので、Runを行います。
③2回目以降はRecentsからプラグインを使用することができます。
プラグインを実行すると、以下のように、「Full App」「Widget」「Snippet」から使いたいアプリの場面に応じてコードを選択することができます。
使用してみた結果
Figma to Codeを使用してFigmaのデザインからFlutterのコードに変換した結果を見ていきたいと思います。
左がFigmaのデザイン、右がFigma to Codeで生成したソースコードを実行した結果です。
見た目に関しては、大方のデザインは再現してくれていますが、左上にあるはずの「＜」アイコンがないことやテキストやボタンなどが全体的に右に寄っていることなど見た目上の問題はいくつかあります。
ソースコードは以下になりますが、その問題点をいくつか挙げていきます。
import 'package:flutter/material.dart';
class FigmaToCodeApp extends StatelessWidget {
const FigmaToCodeApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: const Color.fromARGB(255, 18, 32, 47),
),
home: Scaffold(
body: ListView(children: [
CreateAccount(),
]),
),
);
}
}
class CreateAccount extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 414,
height: 932,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(color: Colors.white),
child: Stack(
children: [
Positioned(
left: 30,
top: 103,
child: SizedBox(
width: 354,
child: Text(
'Create an account',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 34,
fontFamily: 'DM Sans',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
),
Positioned(
left: 60,
top: 281,
child: SizedBox(
width: 354,
child: Text(
'Full name',
style: TextStyle(
color: Color(0xFF828282),
fontSize: 17,
fontFamily: 'SF Pro Text',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
Positioned(
left: 60,
top: 359,
child: SizedBox(
width: 290,
child: Text(
'Email address',
style: TextStyle(
color: Color(0xFF828282),
fontSize: 17,
fontFamily: 'SF Pro Text',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
Positioned(
left: 60,
top: 437,
child: SizedBox(
width: 290,
child: Text(
'Password',
style: TextStyle(
color: Color(0xFF828282),
fontSize: 17,
fontFamily: 'SF Pro Text',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
Positioned(
left: 35,
top: 261,
child: Container(
width: 343,
height: 60,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(width: 0.50, color: Color(0xFF828282)),
borderRadius: BorderRadius.circular(20),
),
),
),
),
Positioned(
left: 35,
top: 339,
child: Container(
width: 343,
height: 60,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(width: 0.50, color: Color(0xFF828282)),
borderRadius: BorderRadius.circular(20),
),
),
),
),
Positioned(
left: 32,
top: 594,
child: SizedBox(
width: 354,
child: Text(
'Already have an account?',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF31A062),
fontSize: 17,
fontFamily: 'SF Pro Text',
fontWeight: FontWeight.w600,
height: 0,
),
),
),
),
Positioned(
left: 32,
top: 152,
child: SizedBox(
width: 354,
child: Text(
'Invest and double your income now',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF4F4F4F),
fontSize: 17,
fontFamily: 'SF Pro Text',
fontWeight: FontWeight.w600,
height: 0.08,
),
),
),
),
Positioned(
left: 30,
top: 490,
child: Container(
width: 354,
height: 60,
child: Stack(
children: [
Positioned(
left: 9,
top: 0,
child: Container(
width: 343,
height: 60,
decoration: ShapeDecoration(
color: Color(0xFF31A062),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
),
),
Positioned(
left: 0,
top: 20,
child: SizedBox(
width: 354,
child: Text(
'Create account',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontFamily: 'SF Pro Text',
fontWeight: FontWeight.w600,
height: 0,
),
),
),
),
],
),
),
),
],
),
),
],
);
}
}ハードコーディング
テキスト、色、サイズなどがハードコーディングされています。ソースコードに直接書き込む形でデータを挿入しているので、これらを変数または定数に置き換える方がメンテナンスコストを下げることができます。
Positionedウィジェットの多用
これは特定のレイアウトに依存するため、画面サイズが異なるデバイスでの表示に問題が生じる可能性があります。今回のように、画面の要素が全体的に右に寄ってしまっているのは、これが原因です。FlexやPaddingなどのより柔軟なレイアウトウィジェットを使用するほうがより好ましいです。
重複コード
類似のスタイルやウィジェット構造が複数回出現しています（例：入力フィールドのコンテナ）。これらはカスタムウィジェットに抽出して、コードの重複を減らすことが好ましいです。
まとめ
本記事を通じて、Figma to Code（Flutter）の有用性について詳細に検討しました。
確かに、このツールは完璧ではなく、いくつかの問題点があります。
しかし、Figma to Codeはプロトタイピングの段階で非常に役立ちます。開発前に実際のユーザーにプロトタイプを触ってもらうことで、実用的なフィードバックを得ることができ、最終的な製品の品質を向上させるための貴重な手段となり得ます。
また、基礎となるデザインを構築した後、手動での微調整を行うことで、よりカスタマイズされた、効果的なソリューションを作り出すことが可能です。
Figma to Codeは、その潜在的な欠点にもかかわらず、デザインと開発のプロセスを強化し、より迅速で効率的なワークフローを実現するための有力なツールです。
