FlutterでFigmaのデザインに合わせて かっちりした実装する方法について

【大規模】第4回クリエイター広場交流&勉強会10/21(土)@新橋
株式会社Pentagon
石渡港
https://pentagon.tokyo/
https://github.com/MinatoIshiwata/presentation_20231021/blob/master/README.md

Transcript

1. FlutterでFigmaのデザインに合わせて かっちりした実装する方法について 株式会社Pentagon 石渡 港
2. • 自己紹介 • Flutterとは • Fimgaとは • FlutterでFimgaのデザインに合わせて実装す る方法について • まとめ
3. 自己紹介 01 株式会社Pentagon　石渡港 2011年 iOSアプリ開発開始 2012年 株式会社PYSE 2023年 株式会社Pentagon スキルセット Objective-C, Swift, Java, Kotlin, Flutter, Firebase, supabase
5. Flutterとは Flutterとは - マルチプラットフォームの開発フレームワーク - Android / iOS / Web / Windows / macOS / Linux向けへ開発 できる - 開発言語はDart メリット - 複数プラットフォームに対する学習コストが少ない - Googleが作成しており開発環境が整っている デメリット - 歴史が浅いので、人材が少ない 03
6. Fimgaとは Fimgaとは - チームで利用できるデザインツール - スマートフォンアプリ開発で良く使われる メリット - リモートで利用できる - 共同で利用できる デメリット - 学習コスト - セキュリティ 04
7. FlutterでFimgaのデザインに合わせて実装する方法について 次の３つのスライドの内容を抑えると次のスクショのようにかっちりとした実装が できるようになります 05 Figma Figma Android
8. FlutterでFimgaのデザインに合わせて実装する方法について ①flutter_screenutilを利用してTextThemeを決めて合わせる 06 Figma Code
9. FlutterでFimgaのデザインに合わせて実装する方法について ②スペースを合わせる 07 Figma Code
10. FlutterでFimgaのデザインに合わせて実装する方法について ③なるべくSVGを利用してアイコンをベクターにして合わせる 08 Figma Code
11. ①flutter_screenutilを利用してTextThemeを決めて 合わせる ②スペースを合わせる ③なるべくSVGを利用してアイコンをベクターにして合わ せる