目次／ツール／効率化

Figma（基本と共有）

項目番号 120

Figma（フィグマ）は、ブラウザ上で動作するクラウドベースのインターフェースデザインツールです。インストール型のソフトとの最大の違いは、リアルタイム共同編集ができる点にあります。

ひとつのファイルに、ディレクション・デザイン・エンジニアリングの担当が同時にアクセスし、制作の全工程をワンストップで扱えます。業界標準の地位を確立しており、ディレクターが「見る側」ではなく「住人」として入る前提になっています。

Figma以前は、デザイナーが画像を書き出し、資料に貼り付け、メールで送り、修正のたびに「v2」「v3」とファイルが増殖していく、というやり取りが当たり前でした。

Figmaなら、URLを共有するだけです。常にそこにあるのが最新版であり、「どれが最新ですか」という確認が発生しません。デザイナーが作業している横で、ディレクターがテキスト原稿を流し込むといった同時作業もできます。この「待ち時間」の削減効果は大きく、進行スピードが変わります。

機能を覚える前に、運用の枠を決めておくほうが効きます。

権限の設計：クライアントに渡すのは閲覧のみか、コメントまで許すか。編集権限を安易に配ると、レイヤーが意図せず動きます。クライアントには原則コメント権限までが無難です。
ファイルの分け方：1案件1ファイルにするか、フェーズごとに分けるか。WF（ワイヤーフレーム）とデザインカンプを同一ファイルに置くと、どちらが確定版か分からなくなります。ページを分けるか、ファイルを分けるかを最初に決めます。
命名とページ構成：ページ名・フレーム名が案件の共通言語になります。026 ディレクトリマップ作成の名称と揃えておくと、あとの指示がぶれません。
アカウントとライセンス：外部パートナーを入れる場合、席数と費用が発生します。誰がどの期間入るかは、048 外部パートナーとのコミュニケーションの検討と一緒に決めます。

Figmaには「オートレイアウト」という、要素の中身に合わせて枠が自動伸縮する機能があります。これを理解すると、テキスト量が変わっても崩れない、修正に強いワイヤーフレームが速く作れるようになります。

また、Figma Communityには世界中のクリエイターが作ったテンプレート（UIキットやアイコンセット）が公開されています。これらを使えば、デザインスキルがなくても整った資料やWFを作れます。

Figmaは機能追加のペースが速いツールです。この辞書では変わりにくい運用の骨格だけを扱い、新機能の動向はDiSAのnoteで追っています。