【Figma】基本操作メモ

画面モックの作成やDTP関連の仕事でデザインツール「Figma」を使用する頻度が多くなってきたため、基本的な操作の自分用メモ

CSSの確認

右側のメニューペインから「inspect」タブを選択することで参照可能

円形を用いたチャートやローダーの作り方

• 図形から円を作成
• マウスオーバーして縁の内側の「Arc」をドラッグ（チャート）
• Arcで円の形を決めた後に、円の中心の「Ratio」をドラッグ（ローダー）

図形とテキストを同時に拡大縮小する

• ヘッダーのメニューペインから選択ツールをクリックして「Move」→「Scale」を選択する
• オブジェクトをドラッグすると文字サイズも合わせて可変するようになる（Moveだと文字サイズは変わらない）

複数のオブジェクトをまとめる（フレーム）

• 右側のメニューペインからClipContentにチェックを入れることでフレーム外に出たオブジェクトを非表示にできる
• LayoutGridが使える（グリッドのガイド線を表示する）

平行四辺形を作る

• 正方形を三つ作る
• 正方形を選択してenterキーを押すと頂点編集モードに移行するため、上下または左右のnodeを二つ選択してドラッグ

カスタムシェイプを作る

• node→ペンツールで繋げていく点のこと
• paht→node同士を繋いだ線のこと
• close path→全てのpathが繋がれて閉じているパス＝面のこと。この状態になると背景色などを設定できる。
• open path→線が終点まで至っていないパスのこと
• vector network→結合された全てのパスが連動して動く機能

テキストをアウトライン化する

• テキストを入力
• ⌘ + / で検索ウインドウが開かれるので「outline」と入力
• outline strokeを選択

画像を図形で切り抜く

• 正方形（何らかの図形）を作成
• ヘッダーメニューの中央三つのアイコンから「use as mask」をクリック
• 図形がマスクに変換されるので、レイヤーパネルから切り抜きたい画像をマスクの上まで持っていく
• 他の画像がマスクの影響を受けないように、マスクと対象の画像をグループ化しておく

塗りのブレンドモード

• 画像を追加
• 画像の上に図形を追加
• 塗りを線状のグラデーションに指定
• 右側のメニューペインの「Layer」から「Mlutiply」を選択
• 背景画像に溶け込んど形の透過背景が設定されて、テキストを強調できる

よく使うスタイル（カラー・エフェクト）を登録する

• 右側のメニューから「Fill」の横にある四つの点みたいなアイコンをクリック
• ＋ボタンをクリックすると、nameが設定でき、現在指定されているカラーをスタイルとして登録できる
• スタイル名を登録すルサ位に「〇〇 / 」と入力することでプレフィックスを指定できる。スタイルパネル内で同じプレフィックスを持つスタイル同士がグルーピングされる。

Constraints(制約)

• 右のメニューペイン「Constraints」から各オブジェクトに対して上下左右への制約を指定できる
• 制約を指定すると親オブジェクトのリサイズに対して、配置をホールドすることができる