# FlutterKaigi 2024に参加しました！ > FlutterKaigi 2024に参加し、Figma Dev Modeの活用法やアニメーションのパフォーマンス向上、Flutterエンジンの進化について学びました。今後のプロジェクトに役立つ知見をレポートします。 - 公開日: 2024-12-10 - 著者: 南部旭彦 - タグ: Flutter, FlutterKaigi, イベントレポート - URL: https://tech.anycloud.co.jp/articles/flutterkaigi-2024 --- こんにちは、Anycloudの南部です。 11月21日に開催された [**Flutter Kaigi 2024**](https://2024.flutterkaigi.jp/) に参加してきました。 Flutterの最新動向を知り、実際の開発に活かせる知見を得るために参加した3つのセッションについてレポートします。 ## **1\. Figma Dev Modeで変わる！Flutterの開発体験** [**セッション詳細はこちら**](https://www.youtube.com/live/QQqW67kDqxs?si=4DttsN3ArpvjUsJ9&t=15475)**（YouTube）** 開発効率化に関心があり、デザインとエンジニアリングの連携を深めたいと考えていました。 **セッション内容のポイント:** - **Figma Dev Mode** の紹介だけでなく、デザイナーとのシームレスな協業体制であったり、生成AIを活用した効率的な開発など、総合的に開発体験をあげる知見を共有されていました。 - figmaのvariables（変数）の利用や、フレームの適切な命名、variantを使ったとりうる状態の定義など、開発者が開発するときに考えることを、デザイン時にfigma上で表現する事例が紹介されました。 - このような「デザインエンジニアリング」を実践すると、開発者はwidgetをどう実装するかほとんど考える必要がなくなります。また、figmaのデザインデータが構造的になっていれば、AIでのコード生成もクオリティの高いものになるでしょう。 - 「Ready for Dev」というフレームごとのstatus管理や、Compare Changesというデザイン差分を調べられる機能についても紹介されました。Figma Dev Modeは高額ではあるものの、使いこなせばかなり強力なツールになりうることがよくわかりました。 - さらに、開発段階に移行したあとのデザイナーと開発者のコラボレーション（主にUIレビュー）については、WidgetBookを活用した取り組みが紹介されました。 ## **2\. アニメーションを最深まで理解してパフォーマンスを向上させる** [**セッション詳細はこちら**](https://www.youtube.com/live/QQqW67kDqxs?si=MJI_37OJ-cT7fmr2&t=22081)**（YouTube）** 現在のプロジェクトでリッチなアニメーションを実装する可能性があるため、その基盤知識を深める目的で参加しました。 **セッション内容のポイント:** - Flutter Engineのアップデートにより、**Skia** から **Impeller** への移行が進んでおり、これがアニメーションのパフォーマンス向上につながるとのことでした。 - 「ブラックボックス」となりがちなアニメーション実装の内部構造を知る貴重な機会でした。 - アニメーション実装時の設計思想や、選択肢の幅を広げる具体的な知見を得ることができました。 ## **3.ImpellerとSkiaについて** [**セッション詳細はこちら**](https://2024.flutterkaigi.jp/session/000db4b0-4065-48ed-8925-afea039e2c72)**（YouTube）** こちらは、「2. **アニメーションを最深まで理解してパフォーマンスを向上させる**」を現地で聞いたのち、YouTubeのアーカイブ動画で拝聴しました。 **セッション内容のポイント:** - Flutterのフレームワーク層から、Flutter Engine、そしてGPUでの描画に至るまでの各レイヤーの役割が概説されました。 - Impellerで何が変わったのかを知ることができました。 - 特に、シェーダーの事前コンパイルによる操作時の性能向上について、2のセッションとも関連し、理解の助けになりました。 3のセッションではさらに、Flutter Kaigi2022の「RenderObjectより下の世界のFlutter」というセッションについても紹介されており、こちらのセッションも見ることで、さらにFlutterの内部構造の理解ができます → [**セッション詳細はこちら**](https://www.youtube.com/live/gBfHYHvojvk?si=UA23HnBR8Kbtp2mF&t=10720)**（YouTube）** ## **まとめ** 今回のFlutter Kaigiは、デザインとエンジニアリングの連携や、パフォーマンス最適化の最新技術を学べる非常に有意義なイベントでした。 今後のプロジェクトに活かせるアイデアが多く見つかったので、早速社内で共有し、実践に繋げていきたいと思います！