こんにちは、UIデザイナーのおしまです。
クロスマート・テック Advent Calendar 2024 の6日目を担当します🖊️
今回は、PM向けに開催したFigma勉強会を振り返りつつ、「オートレイアウト」と仲良くなれる記事を書いてみたいと思います。
Figmaとは？
FigmaはUI/UXデザインやプロトタイプ作成に特化したクラウドベースのデザインツールです。リアルタイムでチームと共同編集が可能で、ブラウザ上で動作するため、弊社でも多くのメンバーが活用しています。
オートレイアウトはFigmaの代表的な機能のひとつです。たとえば、ボタンを作る際、テキストの長さに応じてボタン幅が自動調整されたり、要素間の間隔を設定すれば新しいアイテムも一定の間隔で整列します。
「部品を整える手間を減らしてくれる便利ツール」と覚えると分かりやすいです！
ただし、使いこなすにはある程度の経験が必要です。初心者にとっては少し難解な機能であるのも事実です😅
PM向けFigma勉強会の開催
弊社のPM陣は、ワイヤーフレームを作成したり要件を整理する際にFigmaを使う機会が多いです。その延長で、オートレイアウトを活用したデータにも触れることが増えてきました。
そこで、「オートレイアウトの基本を理解すれば、もっと活用の幅が広がるのでは？」という期待を込めて、非デザイナー向けの勉強会を開催しました！
課題：可変メモを作ってみよう
オートレイアウトは実際に操作してみないとなかなか理解が進みません。
そこで、基礎的な説明の後PMがフロー図を作成するときに使えそうな「文字数に応じて可変するメモ」を作成する課題を用意し、取り組んでもらいました。
🔨 作り方
課題の作り方をまとめた図を用意しましたので、ぜひチャレンジしてみてください！
勉強会は15分×5回の実施でしたが、PM陣にもオートレイアウトの便利さが伝わったようで安心しました👍
オートレイアウトのありがちな失敗
勉強会でPMからよく出た質問を2つピックアップしました。設定が正しくないと混乱することもありますが、ひとつずつ設定を見直せばすぐに解決できるので確認してみてください♪
⇧ この経験、あるあるでは？そういうときは幅指定が悪さをしていないかチェックです
⇧ デザイナーが作るFigmaデータはオートレイアウトだらけですが、パーツごとに設定を読み解けばシンプルな構造であることが見えてきます
最後に
オートレイアウトは初めは難しく感じるかもしれませんが、基本を押さえれば確実に業務効率がアップします！この記事が、Figmaを活用するPMや非デザイナーの皆さんのお役に立てば嬉しいです😊
明日のクロスマート・テック Advent Calendar 2024 もお楽しみに！