Friends of Figma Osaka＃03「オフライン開催」第3回目の勉強会

Eri Matsushita 松下 絵梨 @matsu_eri

💎2023/12/29 [FRI]19:00〜 オンライン/無料💎 大阪に新しいFigma Community Advocate・長谷川喜洋（@hiro_ghap1）さんをお迎えした記念に、オンラインでFigma勉強会します🥳 内容は追ってお知らせします・・！ ぜひご参加くださいませ✨ friends.figma.com/e/m9qjvs/ #Figma #fof_osaka

長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro @hiro_ghap1

Friends of Figma Osaka #03[オンライン] 2023/12/29 [FRI]19:00〜 無料 Figmaがこれからの人、触り始めた人、気になっている人、大阪以外の方ももちろんご参加ください！！！ Figma for VS Code Figma to Lottie Figma to STUDIO ▲こちらもでてきます！ #Figma #fof_osaka twitter.com/matsu_eri/stat…

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

明日はFriends of Figma Osaka #03 12/29 19時00分～オンライン開催 参加費は無料です！ #figma #fof_osaka twitter.com/matsu_eri/stat…

Eri Matsushita 松下 絵梨 @matsu_eri

💎「Figma to STUDIO」でラクラクレスポンシブ💎 1⃣Figmaのオートレイアウト機能を使ってデザインを作成 2⃣プラグイン「Figma to STUDIO」を立ち上げて「クリップボードにコピー」 3⃣STUDIOに移動して⌘ + Vを押して「デザインをインポート」 ✅ちゃんとオートレイアウトで組んでいれば、かなりいい感じに自動でレスポンシブ化してくれます ✅気になるところは微調整すればOK ✅このまま公開できるなんて素敵すぎる✨ 詳しくは12/29の無料オンライン勉強会「Friends of Figma Osaka #03」で解説します💁‍♀️ ご参加者はこのデモファイルも触っていただけますので、ぜひ！ friends.figma.com/events/details… #FigmatoSTUDIO #studio #figma #fof_osaka

2023-12-27 15:12:22

長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro @hiro_ghap1

「Figma for VS Code」でサクッとコーディング👨‍💻 ⏰明日12月29日（金）19:00〜 オンライン開催:無料 Friends of Figma Osaka #03 FigmaのデザインからVS Codeを使って簡単にレスポンシブのコンポーネントをコーディングします！ ↓ご参加はこちらから！ friends.figma.com/e/m9qjvs/ #figma #fof_osaka pic.twitter.com/KQefcW0iOP

長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro @hiro_ghap1

本日のFriends of Figma Osaka イベント、更に増枠しました！ キャンセル待ちにご登録いただいた方にもメールが届いているかと思いますので、メール本文から参加ボタンをお願いします！（自動で変わらなくてすみません汗） friends.figma.com/events/details… #fof_osaka #figma twitter.com/matsu_eri/stat…

Eri Matsushita 松下 絵梨 @matsu_eri

本日のFOF大阪、増枠しました🥳 おかげさまで100名を超えたので、100→200名に増枠しました。 ZoomからYouTubeライブ配信に切り替えてお届けします🎥 ※ご視聴するには、事前の登録が必要です。 ご登録いただくと、後日アーカイブ動画もご覧いただけます✨ 12/29 19時00分～ Friends of Figma Osaka #03 friends.figma.com/events/details… #fof_osaka

2023-12-29 12:47:59

魚住諒💻🎺りょうドットなごや @ryoraspp

初参加！ Friends of Figma Osaka #03 #fof_osaka

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

いよいよ本日開催！ Friends of Figma Osaka #03 💎 19時より開始となります✨ friends.figma.com/events/details… #fof_osaka pic.twitter.com/xHTni8keeh

拡大

長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro @hiro_ghap1

本日はゆっくりすすんでいきま〜す #fof_osaka pic.twitter.com/ayOPBXfuZP

拡大

ろくぜうどん @rokuzeudon

やっていき！ #fof_osaka pic.twitter.com/TmvFc912m7

拡大

拡大

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

Session01「Figmaでデザインをしよう！」/ 松下 絵梨さんがスタートしました💎✨ #fof_osaka pic.twitter.com/kKdZE7Ef5G

拡大

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

Session02「Figma to STUDIOを使ってみよう！」/ 松下 絵梨さんがスタートしました💎✨ #fof_osaka pic.twitter.com/9nuuwNIg4E

拡大

ろくぜうどん @rokuzeudon

手元でもバッチリできました！👏 Figma to STUDIO #fof_osaka pic.twitter.com/AWvpv3O8QE

拡大

拡大

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

💎「Figma to STUDIO」でラクラクレスポンシブ💎 作業をする上でのたいせつなポイントを解説しつつ、実際にデモファイルをさわっていただけるので、ぜひ！手を動かしつつ見てみてくださいね👩‍🏫 #fof_osaka twitter.com/matsu_eri/stat…

デザインと動画と @asmeet_

#figma to STUDIO凄い❗️楽にSTUDIOにコピペできる レスポンシブもすぐにできる🫢 #fof_osaka

Tomoko | WEBデザイナー @DesignTomoko

現在Friends of Figma Osakaのオンラインイベントに参加中！ 小技盛りだくさんで勉強になります😊👏 figmaもSTUDIOもやっぱり楽しい～💓！ ショートカットキーもオートレイアウトのコツも盗みまくります🔥 #fof_osaka　#codolife

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

Session03「Figma for VS Codeを使ってみよう！」/ 長谷川 喜洋さんがスタートしました💎✨ #fof_osaka pic.twitter.com/oSIaiagN3D

拡大

ろくぜうどん @rokuzeudon

Figma for VS Code、初めて触ってるんですけど、すご！ #fof_osaka pic.twitter.com/SNaaagEtkg

拡大

ろくぜうどん @rokuzeudon

画像のエクスポートまでできるのか、VS Code 上でだいたいできてしまう世界だ #fof_osaka

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

ご紹介したプラグインはこちら✨ 「Figma for VS Code」 marketplace.visualstudio.com/items?itemName… #fof_osaka pic.twitter.com/shVfJp1ejP

拡大

山本 @fizzbuzzpanda

#fof_osaka んー。やっぱり今のところflexだけで、gridは自分で判断して組み換え必要なのかあ

デザインと動画と @asmeet_

@hiro_ghap1 VSCodeで画像をエクスポートする際に、 「No workspace folders founds.」が表示されてDLできませんが、これはどこを設定すればよろしいでしょうか❓ 設定のFimga：Autocomplete Bloksにはチェックが入ってます。 #fof_osaka #figma

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

Session04「LottieFiles for Figmaを使ってみよう！」/ 松下 絵梨さんがスタートしました！ #fof_osaka pic.twitter.com/eqynbuL5VB

拡大

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

こちらの手順をわかりやすい解説付きでご紹介します✨ 簡単にアニメーションができるので、動画を参考にぜひ！みなさまも作ってみてくださいね🐈🐾 #fof_osaka twitter.com/matsu_eri/stat…

Eri Matsushita 松下 絵梨 @matsu_eri

💎「LottieFiles for Figma」を使ってSTUDIO上に簡単にアニメーションを実装する方法！💎 1⃣Figmaでの作業 ・Figmaのスマートアニメート機能で、アニメーションを作成します ・フレームの塗り（背景色）は透明にしておきます ・プラグイン「LottieFiles for Figma」を起動 ・「Export to Lottie」タブに切り替え ・作ったアニメーションのフロー名を選択 ・「Save to workspace」をクリック 2⃣LottieFilesでの作業 ・LottieFilesのWebページで「Go to Dashboard」をクリック lottiefiles.com/jp/ ・Figmaから読み込まれたアニメーションを選択 ・「Save」→「Handoff & Embed」をクリック ・「Enable Asset Link」をONにする ・生成されたAsset Linkをコピーしておきます 3⃣STUDIOでの作業 ・STUDIOで、「追加」タブから「Lottie」ボックスをドラック&ドロップ ・先ほどコピーしておいたAsset Linkをペーストすると、アニメーションが挿入できます ・自動再生以外にも、さまざまな「再生条件」設定することができます。 「ホバーで再生」「スクロール連動」「カーソル連動」などなど とても手軽にアニメーションが実装できるので、ぜひ試してみてくださいね🥳 #Figma #fof_osaka #LottieFiles #Lottie #STUDIO

2023-12-29 00:16:34

ろくぜうどん @rokuzeudon

手元でもできました👏 FigmaからエクスポートしてからLottieFilesにアップしたLottieアニメーションを、STUDIOに配置！ #fof_osaka pic.twitter.com/oSSXe9EYPe

拡大

Friends of Figma Osaka | Figma 公式コミュニティ @fof_osaka

「LottieFiles for Figma」を使って、猫ちゃんのしっぽがマウスホバーで動きました！！！！🐈✨ アニメーションを簡単に制作できそうです！！ (松下さんの教材には猫ちゃんがよく出現します😺) #fof_osaka pic.twitter.com/908PWWMbde

拡大

拡大