見出し画像

iOS 15 Safari風のデザインデータをFigma Communityに公開してみた!公開手順を解説するよ 🧑🏻‍💻

こんにちは、よーた(@yotaszk)です。

iOS 15」が正式にリリースされ1ヶ月ほど。みなさんはアップデートしましたか?

目玉機能の1つ「SharePlay」は未だにリリースされず、いちユーザーとしては「ほぼ変わらないじゃん」と思いつつも、デザイナー・開発者としては「iOS 7(2014年)」以来の「Safari」のUI刷新にワクワク・ドキドキしていました。

そんな「Safari(iOS 15 正式バージョンのUI)」のデザインファイルをFigmaのデザインファイル・プラグイン共有機能「Figma Community」に公開してみたので、公開手順をサクッとご紹介します!

利用したい方はこちらからどうぞ 💁‍♂️

ファイル構成はどうする?

結論から言うと、特にファイル構成の指定はなさそうでした。

今回は、他のデザイナーさんが公開し、過去に利用させていただいたデザインリソースを参考に以下の構成にしました。

・Design ... パーツを格納
・Cover ... 検索結果に表示されるカバー画像を格納

スクリーンショット 2021-10-11 19.56.11

カバーサイズは「1920×960px(セーフエリア:1600×960px)」となっています。Communityに公開した時に検索結果に表示されるので、それっぽいものを作りました。

スクリーンショット 2021-10-11 19.56.32

(検索結果にはこんな感じになります)

スクリーンショット 2021-10-11 21.08.46

続いて、公開手順について。

公開手順

公開手順を日本語でググっていると、KYOTA KONNOさんの「Figma Community公開までのフローとPage設計について」を最初は参考にさせて頂いたのですが、この方法は既に変わっており、より簡単にできました 🎉

手順はお馴染みの「Share(右上のブルーボタン)」からモーダルを開き、上部のタブメニュー右側の「Publish to Community」に移動。

スクリーンショット 2021-10-11 19.56.47

ウェルカムイメージみたいなものが表示され、もう公開されちゃうの?!と思いつつ、恐れながら「Publish」を押すと…

スクリーンショット 2021-10-11 19.56.50

設定画面に移動します。

スクリーンショット 2021-10-11 19.56.53

・Name ... 検索結果に表示されるデザインファイル名
・Description
・Tag
・Publish as
・Creator(s) ... 複数人で作った場合、複数人を指定できる模様
・License

上記の項目をいい感じに設定します。Communityはグローバルなので英語で設定する方が良さそうです。

また、Tagの細かい用途はよくわかっていませんが、ひとまずそれらしいタグ「#iOS15」「#Safari」などを設定しました。もしかしたら検索結果などに有利になるのかな…?(知ってる方がいましたら、教えてください🙏)

これで公開は完了です。数秒ほどで公開され、すぐに検索結果に表示されました。

まとめ:やってみると、驚くほど簡単だった

ハードルが高いイメージが勝手にありましたが、やってみると驚くほど簡単で、改めてFigmaいいなぁ〜と思いました。

UIデザインで役立ちそうなコンポーネントをオープンにすることで、世界中のデザイナーが「本当に重要なデザインに集中する環境づくり」に簡単に貢献できちゃいます!

あなたも、公開可能なコンポーネントがあれば、ファイルを切り出して公開してもいいかもしれません。

もっと、日本のデザイナーさんがFigma Communityでワイワイできると楽しいなと思いました!

ということで、僕が公開した「iOS 15 Safari Template」使う場合は以下からご利用ください 💁‍♂️

裏話は友人3人(ツモマーさん、ナカムラ氏、てっちゃん)と運営するデザイントークPodcast「Design Chill」でお話ししています。こちらもよろしくお願いいたします 📻

Twitterもやっているのでぜひフォロー&拡散もお願いいたします 🙏

ではまた〜!

もし、サポートいただけたら勉強用の書籍の購入にいたします!ぜひ、よろしくお願いいたします😎