Figma タグ

Figmaを使って簡単なログインページを作ります。よくネットで見る参考情報では、入力フォームのキーボード入力などインタラクション性にかけるものが多かったので、オーバーレイを利用して動きをつけてアプリイメージを湧きやすくするように工夫します。

フューチャーでは、FigmaやAdobe XDなどのデザインツールの利用が以前よりも少しづつ増えています。今回の題材はFigmaです。先月の「Adobe XDからFlutterに変換するプラグインがあるため、変換ツールの選択肢で迷うことはあまり無いのかなと思います。

新しく参画したプロジェクトが今後Figmaを使ってプロトタイプを作るということで、最近Figmaのキャッチアップをしています。「実際に何かを作ってみる」より良いキャッチアップ方法は存在しないだろう、ということで早速チャレンジしてみました。キャッチアップのために思いついたチャレンジは２つ：A. 架空のアプリを一からデザインB. 既に存在している何かのリデザインこの記事では「B. 既に存在している何かのリデザイン」の過程を紹介していきます。

今回はPJの現場でUXとUIのデザインを通して、Atomic Designの導入はどのような結果を生んだのか、Atomic Design導入に際しての課題や取り組み方のコツなんかをお伝えできればと思います。z

Figmaとは何か、何ができるのか、チームでシステムデザイン設計するときにFigmaを使うと何がいいのかを初心者向けにざっくり紹介していきます。Figmaはユーザーインターフェース（UI）のデザインをブラウザ上で簡単に作れるデザインツールです。デザインツールといえばデスクトップアプリのAdobe XDやSketchが有名どころですが、Figmaも負けず劣らずの操作性と利便性を兼ね備えています