見出し画像

Tokyo Config Watch Party参加レポ

Takako Watabe

先日Tokyo Config Watch Partyに参加して来たのでそのレポートを書きます。

品川着いてWATCH CAFEに入場したら、めちゃかわなキャップとTシャツをGETしました✊

雰囲気はこんな感じでわいわいしてました。こんなに大人数で集まれたのって3年ぶりとか….🥺

Figmaの活用策

自分はfigmaの活用策をシェアするLT（lightning talk）の3番目で、ブレインストーミング段階でのfigjamの活用方法についてお話しさせていただきました。聞いてくれた＆感想を伝えてくれた方々ありがとうございます🙏🙏
自分の登壇資料はこちら

自分の準備でばたついちゃったけど、他の方のLTも面白かった。formrunのデザイナーの方がSwitchのコントローラーでスライド遠隔めくりしてるの見て、登壇の玄人みを感じました笑

Configウォッチパーティー🎉

LTの後にウォッチパーティが始まりました。
どの方も発表も凄く面白かったのですが、個人的に刺さった＆面白かった登壇者の方の感想を書いていきます👇

谷 拓樹さん　Ubie株式会社　デザインエンジニア
登壇資料はこちら

「プラグインによるFigmaのハックとワークフローの拡張」
Figmaにはコミュニティが作成した素晴らしいプラグインがたくさんあり、それを使ってデザイン作業やデザインシステムを効率化することができます。しかし、自分たちの好みや組織が必要とする機能がもっと欲しい場合はどうしたらいいでしょうか？このセッションでは、高度な開発スキルを持つ開発者ではなく、コーディング初心者やデザイナーにもできる、Figmaをハックする方法について解説します。

figmaのプラグインを自作されたりUbie社のプロダクト開発をJSでごりごりされてるデザイナーの方のトークでした。コンポーネントをコードファイルに書き出してシェアする機能、全然使ってなかったのでやってみたくなった。最後の「コードを書くことでUIスキルは上がっていく」という言葉がとても印象的でした。

気になったプラグイン👇
scripter  /  Color Styleguide

福嶋 瞭さん  GMOペパボ株式会社　シニアデザイナー
登壇資料はこちら

「1つのデザインシステムで複数のブランドを展開する方法」
GMOペパボ株式会社は、様々なサービスをそれぞれ別のブランドで提供する日本の企業です。その中で「つまらないデザインではなく、意味のあるデザインに力を入れたい」という想いから、独自のデザインシステムを構築しています。複数のブランドを一つのデザインシステムでサポートするために、デザイントークンという概念をフル活用し、共通の要素をブランド特有のスタイルでアップデートしています。Figmaはこのコンセプトを実現するための重要なツールであり、本セッションではその経験をご紹介します。

自分も似た規模間の企業が保有しているサービスのデザインシステムを作っているところだったので、凄く実用性があるお話でした。
YAMLやデザイントークンの概念まで深く考えてデザインシステムを構築した経験が無かったので、あ〜もっとその辺勉強しようってなった。
具体的にどのように実施したか気になったので直接お話伺ったところ、まず最初に開発とデザイン側で合宿を開催しそのデザインの意味の擦り合わせ作業にnotionを活用されたそうです。丁寧にコミュニケーションを取り合うことが肝なんだな〜。

気になったプラグイン👇
Design Tokens

関 憲也さん  株式会社カケハシ　フロントエンドデベロッパー、デザイナー
登壇資料はこちら

「開発者に愛されるFigmaのデザインの作り方」
開発者に愛される（つまり実装しやすい）Figmaデザインファイルの作り方についてお話します。Figmaの機能（Style, Auto Layout, Constraint）の使い方、製品開発を加速させるためのデザイントークンの定義やコンポーネント インターフェイスの揃え方、そして避けるべきもの（アンチパターン）についても説明します。

昔デザインしたものを全然違う形に実装されて心が死んだ経験があるので、かなり共感しました😂
例として出していたアンチパターンは何度か遭遇した事があって、その時地道に修正してった記憶がある….
一方で、開発側視点でも実装不可能なデザインぶん投げられて困ったりとかすごい多そうだなと思いました。実際もらったデザインをよしなに実装してくれる開発者ばっかりじゃないから、figmaを実装向けのデザインの設計書として活用するのはデザイナー側のスコープだよなと思いました。

気になったプラグイン👇
ProToFlow 


他にも興味深い話がいっぱいあったので、twitterでスライド発掘しつつ⛏

新機能について

AutoLayoutの機能追加で縦横全てにボーダーを一辺だけ指定できる機能がめっちゃ便利そう。（Individual strokesという機能らしい）autolayoutに四角いオブジェクトわざわざ追加して〜みたいな作業がなくなるぽい。
他の機能のアプデはこの方がうまくまとめてくれていました🙏


所感

ブランチ機能が搭載されたりでアプデの方向性がより開発者向けになったのかなという印象を受けたのと、また登壇者の方が開発とデザインどちらのスキルも高い方々だったので、今後どんどんその役割が越境していきそうだなと思いました。
WEBデザイナー時代はフロントまわりのコードを書く機会があったけど、UIデザイナーに鞍替えしてからはその機会がなくなっちゃったから個人開発でビルドアップする必要がある、しそのモチベも参加したら高まりつつある。

あとfigmaの中の人達がホスピタリティ高い＆たくさん話しかけてもらって楽しかったです！イベント自体も全ての段取りが良くて参加してて凄く快適でした、お疲れ様でした🍵
定期的にこういった外向けのイベントでユーザーと直で交流しているから、かゆいところに手が届くようなプロダクトを生み出せるのだなあと🤔
定性分析大事。

とりあえず、今日からボタンとかのvariants管理にComponent Properties使ってみたい。

では〜〜👋👋


この記事が気に入ったらサポートをしてみませんか？