Friends of Figma Fukuoka Event #3 触って学ぶFigmaワークショップを開催しました!
Figmaの福岡コミュニティFriends of Figma Fukuoka(以下 FoF Fukuoka)では、9月27日(金)に3回目になるイベント「触って学ぶFigmaワークショップ」を開催しました!🍜
福岡市赤煉瓦文化館内にあるEngineer Cafeにて、ゲストにデザイナーのharunaさんをお迎え。キャンセル待ちも出るほどのお申し込みをいただき、当日は20名の皆さまにご参加をいただきました。
ワークショップ内容
Auto layoutでデザインを作ってみる
https://help.figma.com/hc/ja/articles/5731482952599-オートレイアウトの使用
FigmaのAuto layoutを活用してWidthやWrapの設定を行うことで、さまざまな表示サイズに柔軟に対応をすることができます。
事前に用意いただいたFigmaファイルを元に、実際の設定を細かく説明&可変のデモンストレーションをハンズオン形式で実施。説明後は実際にワーク時間を設け、お手本のデザインをご自身のFigmaファイルで再現いただきます。
ワーク時間では皆さま作業に全集中。詰まってしまった点は先生やAdvocateメンバーがフォローする形でアシストします。
Figmaに続いてノーコードツールのSTUDIOを使い、作成したデザインをブラウザで再現します。
Figma to STUDIO を使ってデザインデータから実装
Figma to STUDIOとは、Figmaで作成したデザインデータをSTUDIO上にコピー&ペーストでインポートできるFigmaプラグインです。Auto Layoutの設定内容をそのままSTUDIOで再現できるので、デザインとコード双方に考慮したFigmaの特徴を十分に活かすことができます。
会場ではFigmaとSTUDIOそれぞれを使って、プレビューのURLを生成する方法までを説明いただきました。ボタンのHover時のデザインを適用したり、Webならではのインタラクションの方法も解説いただきました。
コピー&ペーストでSTUDIOでレスポンシブに対応したデザインが再現できると、「できた!」の満足感もひとしおのようでした。
交流会
今回のワークショップは使い慣れていない方に向けた内容ということもあり、学生さんや勉強中の方の割合が多く、交流の輪も生まれやすかったようでした。
参加いただいた皆さまより
参加いただいた皆さま、Engineer Cafeと関係者の皆さま、イベントの拡散にご協力くださった皆さま本当にありがとうございました!
今後のFriends of Figma Fukuokaでの活動については、こちらのコミュニティページからお知らせいたします。Figmaアカウントでログインして「Join」することで、ご案内のメールが届きますので、ぜひご利用ください。
公式Xからも情報発信していきますので、こちらもよろしくお願いします!
https://twitter.com/fof_fukuoka
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?