Figmaデザイン作成・修正時の注意点メモ
デザインデータは組織の重要な資産だ。しかし、その管理には多くの技術的な注意点がある。気付いた点を確実に身に付け、より良いデータを作成できるデザイナーを目指して精進するために記録しているメモ。
随時更新📝
2024/12/05
Figmaのショートカットで画像を置き換える際の注意点
画像をショートカット（⌘ + Shift + R（macOS） / Ctrl + Shift + R（Windows））で置き換えると、画像のファイル名は変更されない。
例えば、「cat.jpg」という名前の猫の画像を「dog.jpg」という犬の画像に置き換えると、見た目は犬になっていてもデータ上のファイル名は cat.jpg のままなので要注意素材管理の重要性
素材はPCのローカルフォルダで整理して保管する。Figmaはローカルフォルダとの紐付けが不要で簡単に書き出しが可能だが、画像管理を適当にすると元データが必要になった場合など探すのに時間がかかる。素材は計画的に管理するインスタンスの切り離しについて
バージョン管理用データを作成する場合、インスタンスを切り離しておくことが重要。一部パーツのデザイン検討用ページでインスタンスを切り離さなかった結果、親コンポーネントの変更（例: アイコンサイズの変更）によりデザインが大きくズレる問題が発生した。
手順:「すべてのフレームを選択」
「CMD＋／」を押下
「インスタンス」と検索
「ネストされたインスタンスをすべて切り離す」を選択
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2024/12/02
プロトタイプの状態変化表現
プロトタイプで画面の状態変化を表現する際は、変化しない部分をコンポーネント化しておくと便利。修正や再利用がスムーズになる
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2024/11/21
コンポーネントを活用する
データ修正時は、必ずコンポーネントを操作する。Illustratorの癖で直接データを触ると、大きな問題を引き起こす可能性がある。コンポーネント化の基準
どこまでコンポーネント化すべきか模索中だが、複数回使用されるページや要素はテンプレートセクションに配置して使い回す方針を試している。色の使用ルール
グレーなど、特定の色は用途ごとに使用方法を定義する。 一例:線: #CCCCCC 、テキスト: #666666 （補足情報用）、背景: #F5F5F5 （薄い背景）
必要以上に色を増やさないこと全体の統一感を重視
イラスト、アイコン、写真などは最初から方向性を決めておき、全体の雰囲気を統一する。
データが膨大になるほど、後から方向性を変えるのが困難になる。本文テキストスタイルの登録
本文テキストをローカルスタイルに登録する際、**行間100%（一行のみのスタイル）**も追加しておくと便利。メモの運用方法を改善する
Figmaのコメント機能は視認性が低いため、他のツールや付箋型の補助機能を活用する方法を検討中だ。コミュニケーションが取りやすいデータ作成を心掛ける。データの視認性向上
デザイン羅列だけのデータにならないよう、各ページデザインの上にアクション名などを明記し、開発時に直感的に理解できるデータを目指す。
＃＃アイコンの管理方法
色・スタイルの統一
アイコンの色は #000000 などに統一する。
線幅、角丸、塗りの有無、テイスト、サイズ感を統一する。
ファイル管理
ファイル名は「_fill」などの接尾辞を付けて区別し、同じ名前を付けないようにする。
ダウンロードしたアイコンは、何色かの塗りが付いてることがあるので要確認
レイヤー名は（自分の中では）「Vector」とする
レイヤーが複数階層に分かれている場合は結合する
結合できないときはアウトライン化されていない時が多い
セクションの利用
アイコン全体を「icon」というセクションでまとめ、アイコン自体の名前はシンプルにしておくと検索や書き出しが簡単ツール活用
拡大縮小時は「K」ツールを活用し、正確な操作を行う。
案件で具体的に困ったこととその対策
子インスタンスの問題
色が引き継がれない
不要な塗りが追加される
親子関係の切断
親と子の関係が切れて変更が反映されない場合があった。アイコン名の重複
「＞」「＜」「×」などに同じアイコン名が付いていたため、600件以上を手作業で修正する必要があった。
対策: アイコン名をユニークに設定し、一括置き換えが可能なように管理する。グレーの色数が多すぎる
グレーが10色以上使われ、カオスな状態になっていた。色数を減らし、用途ごとに整理することで解消できた。
参考にしたサイト
・https://note.com/shingo2000/n/n224d8205b5b8
・https://note.com/shikicheri/n/n5d3433b5e628