Gunosy Tech Blog

Gunosy Tech Blogは株式会社Gunosyのエンジニアが知見を共有する技術ブログです。

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

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

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

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

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

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

UberのFigma

f:id:gkhs:20210510160955p:plain

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

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

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

Uberhttps://www.figma.com/@uber

ShopifyのFigma

f:id:gkhs:20210510161025p:plain

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

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

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

Shopifyhttps://www.figma.com/@shopify

Figmaのモバイルアプリ

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

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

とはいえ、5/11時点でまだベータ版なので、一般公開されていないアプリです。 公式マニュアルにTestflight経由やPlayストア経由のリンクがあるので、興味のある方はぜひさわってみてください。

(人数制限ありそうなので、DLできなかったらごめんなさい)

https://help.figma.com/hc/en-us/articles/1500007537281

まとめ

今回紹介したFigmaのファイルも、各企業が使っている最新版というわけではないと思いますので、新たに公開された場合にまた紹介できればと思います。

Figma上でファイルを公開している企業は、UberやShopifyだけでなく下記のようなサイトでまとめて確認できますので、こちらから探すのもおすすめです。

Design Systems For Figmahttps://designsystemsforfigma.com/

色々参考にして進めていますが、コンポーネントの整理はまだまだ終わりが見えないので、日々コツコツやっていきたいと思います!