はじめに みなさま、いかがお過ごしでしょうか。Figma 流行ってきてますね〜。 他にも Framer X や STUDIO 、そして Figma の上位互換かもしれない Phase が盛り上がりを見せています。 導入記事も増えてきているので、具体的な 作成フロー を紹介したいと思います。 作成済みのファイルは探せばいっぱいあるので、Atomic Design ぽいプロセスで、よく使う UI パーツを作るところまでハンズオン形式で書いてみます。 ただし、原理主義的なプロセスや理論 ではなく、誰でも順を追って Figma を使える状態を目指します。 ストラテジストとエンジニア、そしてデザイナの作業が分断されている時点でイノベーティブではありません。 この三者が統合的にデザインできること、すなわち ワークフローそのものを最適化することが目標 です。 Figma と Atomic Design
![【初心者向け】Atomic Design っぽい、Figma の使い方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7bfe0382353e24363c64cad33246e44f95f3778/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJUUzJTgwJTkxQXRvbWljJTIwRGVzaWduJTIwJUUzJTgxJUEzJUUzJTgxJUJEJUUzJTgxJTg0JUUzJTgwJTgxRmlnbWElMjAlRTMlODElQUUlRTQlQkQlQkYlRTMlODElODQlRTYlOTYlQjkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWJhZGViYTBiNjEzZDEwN2I1OGM5OTA0ZDlmYjMwYmVj%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBoaWthcnV0YXlhbWEmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTZiYzQyZjUzZjY3MGM4ZGRjMWQ0YWRmY2Q5MGQ4MWUw%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3Db202689311efbcfe9e4e0e8d8fa425b0)