「Figmaとなかよくなろう！」イベントレポート
こんにちは！Beans College 運営・講師の おの @ono_picnico です。
Beans College（通称：豆カレ）では、毎月メンバー限定の「月イチ勉強会」というイベントを開催しています。
今回は、9/30 (土) にコミュニティ内で開催した「Figmaとなかよくなろう！」のイベントレポートをお届けします！
Figmaとなかよくなろう！
「Adobe系（Ai/Ps/Xd）からいまいちFigmaに手が出ない…」
そんな方を対象に開催しました。各社大手のスクールでは現在も「まずはAdobeを覚えよう」というカリキュラムが多いと思います。でも現場は少しずつFigmaも必要としてきています。
Ai/PsからXdへは、なにも見なくても移行できた・使えるようになったという方は多いと思いますが、Figmaへは概念の違いやショートカットキーの違いから「こわいよぉ」と尻込みしてしまう方も多くありません（私も最初はそうでした！）。
まず、つまずきやすいgroupe / frame / section の違いとそれらの関係について解説。frameについてはとっても機能が多いので、イベントではこのあとさらに詳しく解説しています。
AdobeでいうアートボードはFigmaではframeを使います。frameの中にframeを入れることもたくさんあります。そのあたりの概念が理解しにくいポイントなのかなと思います。
それからframeの便利なところ・いやなところも紹介しました。制約やオートレイアウトといった便利機能は、慣れるとレスポンシブな要素を爆速で作ることができますが、特に制約なんかは慣れるまでは厄介ですよね。
制約をうまく設定できていない場合でも、Command（Ctrl）を押しながらドラッグすれば、ズレずにframeを広げることができます。
コンポーネントとバリアント
コンポーネントはXdにもある機能なので、イメージしやすい方も多いと思います。バリアントというのはXdでいうステート機能なのですが、わたしはXdユーザーでステートを使っている人をあまり見たことがありません。。（設定していてもそれを視認するのが難しい機能ですし。）
コンポーネントは共通パーツなどの親を作ること、バリアントは状態のバリエーションを作ること。ボタンなんて、状態のバリエーションがたくさんあるもののいい例です。通常時、強調カラー、ホバー時、グレーアウト時など。これらをいちいち作らずにボタン一つで切り替えができたらとっても便利ですよね！バリアントってそんな機能。
イベントの中では、バリアントの作り方はもちろん、バリアントをつくっておくとよいパーツなどを紹介しました。主にUI系のパーツはバリアント必須ですね。
最後はワークショップ
ここまで、初めてFigmaを触るという方にはとってももりだくさんな内容でしたが、最後に当日学んだことを総ざらいして実践でよく使うようなパーツを作るワークショップを開催しました。みなさんがんばって取り組まれていましたよ👏
参加者の声
とてもわかりやすかったです！ありがとうございます！
figmaを使用したデザイン実務は未経験に近いので、ここからステップアップできればと思いました
始めて触ったので手間取りました。
全く知らない機能を知ることができたのでワークショップを何度かやってもう一度おさらいしてみます。
アーカイブ配信
今回のイベント内容は、メンバー限定の学習サイトにてアーカイブ配信を行っています。メンバーさん向けにはFigmaファイルもしばらく公開しています。
（他にも過去のイベントが数多くありますので、それらのアーカイブ配信はご入会するとご視聴いただけます。）
2023年10月の予定
「コーディングのお供 Google Chrome 開発者ツールを使いこなそう！」というイベントを開催します。
前半では、基本から応用まで様々な機能を紹介します！
後半は、実際に機能を利用してみましょう。
豆カレ内のイベントには、メンバーであればどなたでも参加可能です。
気になる方は、ぜひぜひ豆カレへの参加をご検討ください✨
Beans Collegeの説明会に参加する
Beans College（豆カレ）にご興味をお持ちいただいた方は、毎月２回、土曜日と水曜日に説明会を実施しておりますので、ぜひご参加ください！
▼説明会のお申し込みはこちら
https://forms.gle/RPX4Jon1RMpDqghy5
ちょっとした入会特典も貰えます！
Beans College 公式Webサイト
この記事が気に入ったらサポートをしてみませんか？