「Figmaとなかよくなろう！2」イベントレポート
こんにちは！Beans College 運営・講師の おの @ono_picnico です。
Beans College（通称：豆カレ）では、毎月メンバー限定の「月イチ勉強会」というイベントを開催しています。
今回は、11/25 (土) にコミュニティ内で開催した「Figmaとなかよくなろう！2」のイベントレポートをお届けします！
前回開催の「Figmaとなかよくなろう！」レポートはこちら。
9月開催のイベントの続編
今回は、9月に開催したFigmaイベントの続編にあたります。前回は「Adobe系（Ai/Ps/Xd）からいまいちFigmaに手が出ない…」そんな方を対象に、つまずきやすいgroupe / frame / section の違いや、コンポーネント、バリアントの話をしました。
今回は、社内やクライアントに共有するためのプロトタイプの作り方と、おすすめプラグインを紹介しました！
プロトタイプ
デザインを作った段階で、実際にどういう動きをするかを確認するためにページ同士をリンクでつないだりして作るのがプロトタイプ（モックアップ）です。
プロトタイプはデザインをつくったあとの作業で、主にお客さんにイメージを共有するときに使う機能。Figmaでは単純にページをつないで遷移するだけではなく、要素を画面に固定したり、簡単なアニメーションを作って共有することもできます。
勉強会ではまずこんなことができるよ、と完成形をお見せして、それを実際に0から組み立てていきました。
ページの移動だけではなく、スライダーなどの動きも作ることができます。
その他、X(旧Twitter)のような画面の動きや、前回学んだ「バリアント」を組み合わせてつくるアコーディオンの動きなども実演しました。
おすすめのプラグイン
おすすめのプラグインは、調べればたくさん出てくるので、今回の勉強会ではデザインの幅を狭めないために必須と言えるものをいくつか紹介しました。例えば、Figmaにはオブジェクトやテキストにシアーをかける方法がデフォルトでは備わっていません。そこで無料のプラグインを使って簡単にシアーをかけられれば、「Figmaでできないからナナメのデザインは作れない」を打破できますよね。
Skew 360°
図形やテキストにシアーをかけるプラグイン。以前主流だったSkew Datが途中から課金制になったので、こちらに乗り換えてみました。オブジェクトを選んで数値でシアーを設定できるので直感的に操作でき便利です。
プラグインページはこちら
ARC - Bend your type!
テキストをアーチ状に配置できるプラグイン。数値を調整するだけの簡単設定！テキストはバラバラになるので打ち直しはできないと思ったほうが良さそう。5回まで無料、そのあとは課金制。
プラグインページはこちら
などなど、ほかにもいくつか必須と言えるものをご紹介しました。
アーカイブ配信
今回のイベント内容は、メンバー限定の学習サイトにてアーカイブ配信を行っています。メンバーさん向けにはFigmaファイルもしばらく公開しています。
（他にも過去のイベントが数多くありますので、それらのアーカイブ配信はご入会するとご視聴いただけます。）
2023年12月の予定
「JavaScriptの「知らない」が少し減る会」というイベントを開催します！
JavaScriptの入門になる1時間です。
豆カレ内のイベントには、メンバーであればどなたでも参加可能です。
気になる方は、ぜひぜひ豆カレへの参加をご検討ください✨
Beans Collegeの説明会に参加する
Beans College（豆カレ）にご興味をお持ちいただいた方は、毎月２回、土曜日と水曜日に説明会を実施しておりますので、ぜひご参加ください！
▼説明会のお申し込みはこちら
https://forms.gle/RPX4Jon1RMpDqghy5
ちょっとした入会特典も貰えます！
Beans College 公式Webサイト
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？