概要
Figmaの基本的な操作を勉強したので、備忘録としてアウトプットしていきます。
今後は、ポートフォリオサイトやアプリケーションのデザインを自身で考えるときに活用していきたいなと思っております。
読んで欲しい人
- Figmaの機能をなんとなくさらっと見たい人
- 「これどう使うんだっけ」と迷った時の備忘録で来た人
詳細
Frame
Frameの中に入れた図形などはFrameと一緒に動く。
中のコンテンツを触りたい場合は、コマンドを押しながら操作する。
ショートカット
- 貼り付け
一番上位のFrameはそのままその位置でペーストされる。
スタイルのコピーもできる、「コマンド + option + C」、貼り付けは「コマンド + option + V」 - 移動
スペースキーを押しながら、クリックすると、移動ができる。
諸々操作
- 図形の縦横比を保ったまま拡大する
「shift」を押しながら、マウス操作。 - 拡大縮小
メニューのツールバーから「拡大縮小」を押すと、文字の大きさも図形の大きさと比例して拡大縮小する。 - セクション（ファイル整理機能）
複数のFrameがあった場合、そのまとまりに名前をつけることができる。
右クリックでセクション解除することもできる。
右のクリックで「セクション」または「Frame」などに変更できる。
セクションにするとコンポーネントの名前がはっきり見える。 - スライス（左上のアイコン Frameの選択肢の一つ）
画像などの一部分を切り出しての、エクスポートができるようになる。 - シェイプツール
*図形の挿入からカスタマイズができること
右のツールバーで変形や回転をすることができる。
パネル
- 等間隔に揃える
- レイヤーのパーセンテージで透過が変えられる。
- エフェクトでぼかし図形の作成もできる
便利な機能
オートレイアウト(フレームの一種)
2つのコンテンツを選択して、オートレイアウトを押す（^+shift+A）
例では、ボタンなどに使っている
親フレームを自動的に調整させたい場合は、サイズ調整を「コンテンツを内包」にしておかないといけない。（内包は自動調整）
コンテナに合わせて拡大は、コンテナに合わせて、文字が調整される
【フレームとの違い】
オートレイアウトには制約はない。
制約を左右にするとコンテナに合わせて拡大ができる。各コンテンツに設定する必要がある。
オートレイアウトは、コンテンツを拡大縮小してもコンテンツ同士をよしなに調整してくれる。
コンポーネント
ボタンのコンテンツを選択して、右クリック「コンポーネントの作成」を選択する。
複製し、原本を修正すると、同じように複製したものも変わる。
コンポーネントは別のセクションでまとめておくと良い。
複製したものをインスタンスと表現する。
【バリアント】
ヘッダーの真ん中左のアイコンをクリック。
バリアントを作った後は、複製うまくできないので、左上の図形アイコンから、使用したコンポーネントを選び、使用する。
または、複製したものを複製する。
複製した後、個々のコンテンツに独自のスタイルを施すことができ、そのスタイルをつけた後は、そのスタイルに関しては、親を変更しても変更されない。（独自で変更していない部分は親と一緒に変更される。）
スタイル
サイドバーの塗りなどの4つの点を押して、+ボタンを押すと、カラーに名前をつけることができる。
マスク
画像を図形の形に切り抜きすること。
画像と図形を表示させる。
画像を図形の上にする（右サイドバーの表示で上にする）
画像と図形を両方選択した状態で右クリックの「マスクとして使用」（コントロール + ⌘ + m）
プラグインとウィジェット
便利プラグイン
- Unsplash：画像を検索して挿入できる
- iconify：フリー素材のアイコンを使用できる
便利ウィジェット
- TODOリスト：メモ機能
最後に
自分なりに使い方等を整理してみました。
フレーム、オートレイアウト、コンポーネントの使い分け
使い分けの指針
大きな構造や画面全体を定義する際はフレームを使用する。
要素間の関係や配置を柔軟に管理したい場合はオートレイアウトを使用する。
繰り返し使用する要素や、一貫性を保ちたい要素はコンポーネント化する。
| 機能 | 目的 | 特徴 | 使用例 |
|---|---|---|---|
| フレーム | デザインの基本的な構造を作る | • 特定のデバイスやスクリーンサイズに合わせたキャンバスを作れる • 要素をグループ化し、整理するのに役立つ • スクロール動作やオーバーフローの設定ができる |
ウェブページ全体、モバイルアプリの画面、カードデザインなど |
| オートレイアウト | 要素間の関係や配置を自動的に調整する | • 要素の追加や削除、サイズ変更時に自動的にレイアウトを調整する • 間隔やパディングを簡単に管理できる • レスポンシブデザインの作成に役立つ |
ナビゲーションメニュー、リスト、ボタンのグループなど |
| コンポーネント | 再利用可能なデザイン要素を作る | • 一度作れば、複数の場所で使用でき、一括で更新が可能 • バリエーションを作って、異なる状態や種類を管理できる • デザインシステムの構築に不可欠 |
ボタン、フォーム要素、ヘッダー、フッターなど |
Atomicデザインと関連させてみた
Atoms（原子）
Figmaの機能：主にコンポーネントを使用
例: ボタン、入力フィールド、アイコンなど
実装: 最小単位の UI 要素をコンポーネントとして作成し、バリエーションを設定
Molecules（分子）
Figmaの機能：コンポーネントとオートレイアウトを組み合わせて使用
例: 検索フォーム（入力フィールドとボタンの組み合わせ）、ナビゲーションアイテムなど
実装: Atoms レベルのコンポーネントを組み合わせ、オートレイアウトで配置を調整
Organisms（有機体）
Figmaの機能:コンポーネント、オートレイアウト、場合によってはフレームを使用
例: ヘッダー、商品カードのリスト、フォームセクションなど
実装: Molecules や Atoms を組み合わせてより大きな機能ユニットを作成。複雑な場合はフレームを使用
Templates（テンプレート）
Figmaの機能: 主にフレームを使用し、コンポーネントとオートレイアウトを組み合わせる
例: ページのワイヤーフレーム、レイアウトの基本構造
実装: フレームでページ全体の構造を定義し、その中に Organisms や Molecules を配置
Pages（ページ）
Figmaの機能：フレームを使用し、すべての要素を組み合わせる
例: 完成したウェブページ、アプリの画面
実装: Templates に実際のコンテンツを適用し、最終的なデザインを作成