お疲れ様です！
Figma のプラグインの試作品を作ったので、お触りしてフィードバックをいただく会をやりました🙌
▼ 詳しくはこちら
https://community.creators-synergy-cafe.com/events/5ee3dfe4ecc1?from=event_published_notify
簡単に機能を説明すると、レスポンシブなデザインを組んだ後に要件の Viewport size に合わせて画面展開をして、各幅での見え方などを調整する業務がありますが、それを楽にできるようにしよう！というものです。
1. デザインフレームの制作
まずは、レスポンシブデザインのフレームを作っていきます！
注意する点は以下です。
ポイント: 画面の中のコンポーネントやテキストが、変更されても崩れないように組んでおく
・クリック要素や、コンテンツが載っている領域（コンテンツ幅）: 最大値を決めて無限に広がらないように最小値を与えておく
・テキスト要素: 幅いっぱいに広がるように fill にしておく
今回はこの辺の作業簡略化のため、デジタル庁さんのよくできたデザインシステム から Figma コンポーネントを利用させていただきました！（ありがとうございます！）
2. プラグイン『Responsive Designer』を立ち上げる
プラグイン検索で、Responsive Designer を検索してください。
もしくはこちらのURL:
Responsive Designer
https://www.figma.com/community/plugin/1384895309779680897/responsive-designer-open
次のような画面が立ち上がります。
（CSS は書いてないので UIへぼいとかは心の中に留めてください... むしろ h1 が凛々しいやろ！！）
3. Frame を選択して、展開
それでは、デザインした Frame を選択して、「展開」ボタンを押下してみましょう！
Yeahhhhhh !!!!!!!!!
とっても気持ちよく展開されます。
カンマ区切りで任意の数字をいくらでも入れられるので、たくさんの Viewport が一瞬で展開できます。これで、少しはレスポンシブデザインが少しは苦痛じゃなくなります😭
私は、究極に面倒くさがり屋なので「こんな作業、令和の時代に人間がやることじゃない...ぶつぶつ...」と言いながらやっていましたが、GPT 君の協力 & プラグイン開発によって主体的業務改善への道を開いたのでした。
デザイナーの皆様も、もちろんエンジニアの皆様もぜひ Figma のプラグイン作ってみてくださいね！そして、作ってみた暁には、中途半端でもシナカフェでお触り会しましょう！
本日は皆さんからたくさんのフィードバックや UI アイデアをいただきました！（ネタも含めてご紹介）
フィードバック
・展開するときに、左右どちらに Frame を展開するか選べると嬉しい
・UI を綺麗にする（自分）
・デバイスごとのアセットが欲しい
・よく使う Viewport width を登録したい
（追加: 私の本業仲間からのフィードバック）
・コンポーネント状態のものも展開したい
のぞみさん、よかった！私も楽しかった！
ta-kun さん渾身のハンドメイドモバイルアイコン...!!!!
みんな夢中になって作っていたので、気づいたらハイクオリティのアイコンが出来上がっていて、爆笑しました...すごすぎ。ちゃんと iPhone と Android の区別がつくあたりがすごいです。
ふるじゅんリメイク案。選択式にしてみたけど、やっぱ入力フィールドも欲しいな、手直ししたり慣れてる数字はキーボードで入れたい。
エンジニアさんにはコードをみてもらいましたw
figma に貼り付けてコードを説明しました🧑💻
初めての試みでしたがとてもコラボレーティブな楽しい時間になりました🥳
急なイベントだったのにも関わらずきてくれた方々ありがとうございました〜💐