Figmaのコンポーネントとモバイルアプリの話

こんにちは、グノシー事業部デザイナーのsakamotoです。

グノシーではデザインやプロトタイプの作成にFigmaを活用してますが、ここ最近でもオートレイアウト、バリアント機能などがリリースされ、使い勝手が格段にあがり、あらためて乗り換えてよかったと感じています。

もうすぐブランチ機能がつくそうで、ついにデザインにもそういった概念の管理ができるようになることに驚いています。

Join our Designer Advocates along with the designers and engineers who built branching for Office Hours tomorrow to get all of the details about Figma's newest feature.

🔥 Branching Office Hours
🗓Tuesday, May 4
⏰ 9AM Pacific / 12PM Eastern

Register: https://t.co/mdUASdeEBD pic.twitter.com/Yz1cccUG3n
— Figma (@figmadesign) May 3, 2021

リリースが楽しみな機能ですね。~~アップデートが速すぎて覚えられません。~~

そんな中、便利な機能も増えてきたこともあり、あらためてコンポーネントを見直すときでは？と思いたち、今回、コンポーネント整理にあたって参考にしたFigmaと、Figmaのモバイルアプリ（ベータ版）が便利だったのであわせて紹介したいと思います。

UberのFigma
ShopifyのFigma
Figmaのモバイルアプリ
まとめ

UberのFigma

1つの画面にほとんどのコンポーネントがまとまっています。

中身が多すぎてキャプチャに入りきれなかったのですが、カラーパレットの部分や各ボタンなど、遠目からでも美しく整理されているのが分かりますね。

見た目のベースはこちらを参考にしたいと思いました。

Uber（ https://www.figma.com/@uber ）

ShopifyのFigma

サイドメニューを見ての通り、Shopifyはとにかくページ数が多いです。

各パーツごと40以上のページに分かれており、バリアント機能を使って丁寧に作られています。

ここまで整理されているFigmaはそうないので、社内のデザイナーにおすすめしてあげるのもいいかもしれませんね。

Shopify（ https://www.figma.com/@shopify ）

Figmaのモバイルアプリ

コンポーネントの話ではないですが、先日、Figmaのおおきな発表があり、その中でモバイルアプリがリリースさせることが分かりました。

いままで「Figma Mirror」のアプリを使っていたユーザーも多いと思いますが、今回のモバイルアプリはそのFigma Mirrorの機能も内包しつつ、プロトタイプだけでなく作業ファイル自体をブラウズできたり、大変便利になっています。

📱 Just announced at #Config2021: a new mobile app.

View and share files and prototypes — from anywhere, with anyone. Coming soon to iOS and Android.

Learn more: https://t.co/KGKrj937Jv pic.twitter.com/wBBqlTETCk
— Figma (@figmadesign) April 21, 2021