Adobe XDをつかってFlutterアプリ実装にやさしいデザインを作成する

Flutterでは、iOS/Androidのクロスプラットフォームアプリを簡単に実装することができます。 ただし、デザインによっては実装コストが高まってしまうので、Adobe XDを使って実装するエンジニアにむけて心がけていること、それはFlutterで簡単に実装できるUIをデザインすることです。

Adobe XDの使い方をそもそも勉強する

そもそもUI/UXデザインの基礎については今回は書きませんが、もしAdobe XDのような、UI/UXデザインソフトを利用したことがない場合はAdobe XD公式のチュートリアル のクイックスタートの項目だけでも目をとおしておくと良いかと思います。

特にリピートグリットはリストビューのような反復するUIを簡単に作成することができるため、必ず覚えると良いと思います。

XDことはじめStep1：まずはここから！「ワイヤーフレームを作ってみよう」 |

Material DesignのUIキットを入手する

Flutterでは基本的にはMaterial DesignベースのUIが簡単に実装できるように設計されています。 左上のハンバーガーメニューの UIキットを入手 > マテリアルデザイン からダウンロードすることができます。

基本的にはUIキットのコンポーネントから利用するようにして、独自のコンポーネントをつくって実装コストを高めないようにします。

Material Designに定義があっても、Flutterではコンポーネントが準備されていない場合もあります。その場合はデザインの方を修正するようにしています。

デザインに対応するPackageがあるかどうかは常にエンジニアに確認しながらデザインする

サードパーティのパッケージを利用するようなUI/UXデザインにする際も、実装コストが高まりすぎないように常にエンジニアに確認しながら実装するようにします。

Adobe XD to Flutterは利用しないのか

Adobe XD to Flutterというプラグインを使うと、Flutter向けのコードが自動生成できますが、あまり自動生成系を信用していないのと、基本的には実装が楽になるようにデザインしているので利用していません。

うまく活用している事例知りたいです。