「大阪 Figma Meeting #01」に参加しました

大阪 Figma Meeting #01に参加しました。
Figma触ったことなかったのですが、すごく楽しかったです。

「Figma Basics」を触ってみよう

FigmaのダウンロードページからmacOS用のデスクトップアプリをダウンロードしてインストールしました。
チームを作って、プロジェクトを作りました。

Figmaの基本 – Figma Basics日本語版をプロジェクトに追加しました。
このFigmaの基本の作成者の松下さんが解説しながらハンズオンしていただきました。

Figmaの8つの特徴をハンズオンで学べました。

1.フレーム（Frames）
2.制約（Constraints）
3.コンポーネント（Components）
4.スタイル（Styles）
5.スマートセレクション（Smart Selection）
6.エクスポート（Exporting）
7.コメント（Commenting）
8.共有（Sharing）

この教材自体がFigmaで作成されていて、それぞれの特徴の解説が左側、試せるフレームが右側に配置されていて、1つ1つ特徴を試しながら学べました。

教材どおりに進めるのではなく、松下さんの解説と手順案内で、各機能をまず枠外で作ったり試したりして操作方法を教えていt抱いてから、「試してみよう！」に進んでいくのですごく理解しやすかったです。
以下に理解したことを箇条書きにしてみます。間違えてたらご指摘いただけると幸いです。

• フレーム – 画面範囲やボタンや図形をまとめたり、ボタンそのものとしても使用できるレイヤー
• 制約 – 余白や位置揃えなど、親レイヤーと子レイヤーの関係を割合や数字とどこを基準とするかなど決めて編集しやすくする
• コンポーネント – ボタンや画像など再利用するために作っておける、コンポーネントを変更するとコンポーネントから作成されたインスタンスにも反映される、インスタンス側で上書きも可能
• スタイル – テキストのフォントと色を個別にテンプレート化しておき再利用できる
• スマートセレクション – 揃えたい複数の図形などを一気に揃えられる、間隔などもマウスドラッグで簡単に調整できる
• エクスポート – 作成したデザインを個別にも全体でも、png,jpg,svgなどで出力できる
• コメント – メモや共同編集者にメッセージとしてコメントを残せる、指示コメントを解決済として表示から外せるのでタスクとしても使用できる
• 共有 – ほかのFigmaユーザーに共有できる、チームでの共同編集や閲覧のみとして依頼主への提出などにも使える

スマートセレクションとかすごく便利な機能で、デザインで時間がかかりそうなところをさくっと揃えてくれたり、コンポーネントやスタイルで再利用しやすくなっていたり、まとめて編集できたり、基本を知られてよかったです！
ありがとうございました！！

本編が終わったあとは会場でライトな懇親会でした。

会場はいつもきれいでおしゃれなgusuku Ashibinaa OSAKAでした！ありがとうございました！！

最後までお読みいただきましてありがとうございました！

「AWS認定資格試験テキスト＆問題集　AWS認定ソリューションアーキテクト - プロフェッショナル 改訂第2版」という本を書きました。

「AWS認定資格試験テキスト AWS認定クラウドプラクティショナー 改訂第3版」という本を書きました。

「ポケットスタディ AWS認定 デベロッパーアソシエイト ［DVA-C02対応］ 」という本を書きました。

「要点整理から攻略するAWS認定ソリューションアーキテクト-アソシエイト」という本を書きました。

「AWSではじめるLinux入門ガイド」という本を書きました。

@yamamanx

開発ベンダー5年、ユーザ企業システム部門通算9年、ITインストラクター5年目でプロトタイプビルダーもやりだしたSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。

このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。
このブログは経験したことなどの共有を目的としており、手順や結果などを保証するものではありません。
ご参考にされる際は、読者様自身のご判断にてご対応をお願いいたします。

また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。