Figma社内勉強会を開催した話
はじめまして。レイのコミュニケーションデザイン ユニット（通称：コミデ）の新岡です。その中でも私が所属しているのは「デジタルクリエイティブチーム」というところなのですが、そこではアートディレクター、ディレクター、エンジニアなど様々な肩書きのメンバーがデジタルコンテンツを制作するため日々研鑽を重ねております。
また、弊社はWebサイト・アプリなどデバイスで完結するものだけでなく、フィジカルも絡めた体験を提供することも多いので、
こんな展示会があって面白かったよー
演出がよかったよー
技術的に新しかったよー
など日々テクノロジー・アート・デザインに関する情報交換を社内で積極的に行っております。
今回はその取り組みの一つでもある、社内勉強会のレポートを紹介させてください。弊社の取り組みについて知っていただければ幸いですが、社内勉強会を検討されている方やFigmaを試してみたい人などにも参考になれば恐悦至極にございます。
では今回の勉強会を主催してくれた弊社猿渡にバトンタッチして会のレポートをご紹介いたします。
こんにちは。株式会社レイ入社2年目の猿渡（さるわたり）です。今回は美大出身ということもあり、在学中にもデザインツールとして使っていた「Figma」を会社に布教するべく社内勉強会を開催した話を当日のアジェンダに沿ってご紹介させていただければと思います！
Figmaの機能を紹介しようとした経緯
私たち「コミデ」とは「コミュニケーションデザインユニット」の略ですが、これは具体的なモノのデザイン制作を専門とするのでは無く、マーケティング コミュニケーション上の目標達成や課題解決に導くアウトプットを設計からトータルでコトをデザインする。という意味で「コミュニケーションデザイン」を名乗っております。
デジタル系に知見があるような人がいれば、イベント運営に知見がある人もいて、お客様のニーズに応じてソリューションを発想・実装するのがコミデなのです。
ですので、意匠という意味での「デザイン」を専門としている人は意外と？少ないのです。
ですが、コミデに来るご依頼は多岐に渡り、「イベントの企画運営」や「toBイベントにおける説明員のiPad操作画面」や「toC向けのWEB制作」など様々です。その中でデザインに関わる部分はこれまでAdobe IllustratorやAdobe XDなどでやりとりしてきました。
ですが、XDとFigmaの統合も進んでおり、FigmaがWebデザイン・UI設計の主流になりつつあるなと感じております。
そんな中、Figamの使い方や仕様を知りたいと、社内エンジニアの方から要望がありました。そこでFigmaの勉強会開催企画を部署全体にアナウンスをかけたところ、思いのほか関心がある方が多く実施に至りました。
少し逸れますが、今回のようにやりたいと思ったことをやらせてもらえる機会、逆にここはいかんと思ったところは月報で共有など、自分で動けば機会を得られやすい会社だと思います。やはり、何事も能動的かつ主体的に行いたいですよね…。
布教内容（アジェンダ）
勉強会では、下記の内容を伝えました。
Figmaについて（概要の説明）
Aiとの違いと利点
共同編集
自動整列
開発モード（エンジニアとの連携）
基本的な使い方
移動
フレーム
セクション
図形
型抜きの仕方
プロトタイプ
共有
書き出し
応用
コンポーネント
スタイル
プラグイン
デザインデータの紹介
なおFigmaについて現状私が知っていることを共有するための勉強会なので、古い情報やもしかしたら間違えている部分もあるかもしれませんが、社内勉強会のレポートですので、その点ご留意いただければ幸いです。
1.Figmaについて（概要の説明）
まず、Figmaとはそもそも何か。どのようなことができるのか。を紹介し、その後アプリの全体像を説明を行いました。次に、実際にFigamを使って自らデザインを担当した案件を紹介し、使えるような場面、何ができるのかを紹介しました。
2.Ai(Adobe Illustrator)との違いとFigmaを使う利点
次に、馴染みのあるツールを比較することで、Figmaの利点を理解しやすいのではないかと考え、グラフィックのツールとしてメジャーであるイラレと比較する説明をしました。
説明したのは、大きく分けて「共同編集」「自動整列」「開発モード」の3つです。他にも紹介したい機能はあったものの、時間の都合と業務上クリティカルな部分を抜粋しました。
共同編集
共同編集の紹介では、リアルタイムに編集内容が反映されることを強く伝えました。イラレにも共同編集の機能がありますが、重くて使い物になりません。パワポにも共同編集の機能はありますが、「戻る」で他の作業者の内容が戻ってしまったりと、共同編集に問題があるツールが多い中、段違いにFigmaはスムーズです。
他の人のカーソルが表示されるので、共同編集者がどこを見ているのかがわかりやすく、アイコンをクリックすればその人の視点で画面をみることができます。電話口でも画面共有の必要はありませんね。
コメント機能も説明しました。オブジェクト単位でコメントを残せるので、指示やフィードバックが具体的になり、コミュニケーションが円滑になります。
自動整列
主に「なんか揃ってない！」が起きないことを利点として伝えました。それだけではなく、画像を並び替える際や並び変える際も、画像どうしの幅や高さが自動的に揃うので、プチストレスが解消されることを重ねて伝えました。
開発モード
3つ目の開発モードの紹介では、主にエンジニアに向けてFigmaのメリットを伝えました。Figmaには作り上げたビジュアルを実装するための便利機能があります。具体的には、オブジェクトどうしのpxがわかりやすく表示されたり、カラーコード(#FFFFFF←みたいなの)やレイアウトのCSSが出てくれたり、うまく使えば開発工数がぐっと縮まることを強く伝えました。
余談ですが、これまでは計算をしてサイズを割り出したりしていたようです。デザイナーが作ったものの再現性に関わる問題ですね、、、
またこの「開発モード」は2024年から有料になってしまいました。それまではベータ版として公開しており無料で使うことができました。
便利すぎる機能なのでさすがに有料化されるか、、、
Figmaの便利機能の概要を説明した後は、細かい機能を触ってもらいながら説明しました。
3.基本的な使い方
次に基本的な使い方をツールを触ってもらいながら説明しました。紹介したのは下記の8つです。
移動ツール：オブジェクトを移動させることができます。
フレーム：テキストや画像などを配置するフレームを作成することができます。
セクション：フレームをひとまとめにできます。見た目の整理に便利です。
図形：四角や円などの図形を作成することができます。
型抜き：図形や画像を、任意の形で切り抜く方法
プロトタイプ機能：ケータイやPCに実装したときの挙動を確認できます。
共有：デザインデータを共有し、共同で編集することができます。
書き出し：作成したデザインは画像にもPDFにも書き出すことができます。
4.応用
最後に、Figmaに慣れてきたきたところで、さらに便利に使える機能を紹介しました。
コンポーネント・スタイルの紹介
Figmaにはパーツや、色、幅（マージン・パディング）をフォーマット化する機能があります。これを使いこなすことで表記のゆれ、幅の違いなどヒューマンエラーが置きづらくなり、余計なことに気を使わなくてよくなります。
プラグイン
いわゆる拡張機能です。この会では、WebページをFigma化できるプラグインを紹介しました。ほかにもパワポやイラレと互換性を持たせることができるプラグインもあるそうです。
（この他にもみなさんのおすすめのプラグインがありましたらぜひぜひ教えてください！）
デザインデータの紹介
Figmaでは各社が公開しているデザインデータを自由に見ることができます。デザイン上のルールを示すことで、そのルールに乗っ取ってデザインをする体裁が整い、情報設計やインターフェースの設計に役に立ちます。
今回はFigmaを公の機関でも使っていることを示すため、デジタル庁が公開しているデザインデータを紹介しました。
会社単位で導入するとなると、セキュリティ面での心配をする場合があるので、導入している企業を紹介することで、信頼に足るということをアピールしました。
結果
結果として、良い面、悪い面両方のフィードバックをいただきました。
「もともと使っていたが、知らなった機能を知れた」
「マージン、パディングの計算が要らなくなるので開発が楽になりそう」
「先方にすぐにプロトタイプをみせることができるので、プロジェクトがスムーズに進みそう」
良いお声をいただいた反面、難しそうといったお声もいただきました。
「複雑ということがわかり、覚えることに抵抗を感じた」
「結局触ってみないとわからない」
「自分が触ったことがすぐに反映されてしまうので、ローカルで触れないことが不安」
今後について
FigmaにもAIツールが導入されたり、スライド機能のベータ版が公開されたりと、分進秒歩で技術が更新されていますが、今後も使い倒しつつ、引き続き社内への啓蒙活動を続けていきたいと思っております。
今後も新しいクリエイティブツールが出てくると思いますが、積極的に新しいことを覚え、私自身の制作精度とスピードを上げていきたいと思っています！
（秘密裏にではありますが、弊社が持つ40年分のナレッジをもっと活用できるように、Notionを使用してのデータベース化を個人的に進めています。こちらもいずれ紹介できたらと思っております。）
最後に
以上猿渡から勉強会の様子を中々のボリュームでお伝えしてもらいましたが、ここまでの内容は全て虚構で、生成AIに考えてもらった架空のレポート記事でした。猿渡も私が考えたAI社員です。解散！！（←大嘘）
とまぁなんだかんだ言いましたが、実際に猿渡も存在し、弊社では共有ベースのライトなものから、実装素含む本格的なものまで様々共有会・勉強会を行っておりますので、この他にも今後ご紹介させていただきたいなと思っております。皆様のクリエイティブ活動の一助となれば幸いです。