Figma基本_備忘録
Hub参考にさせて頂いた動画
ショートカットキー
移動ツール：V
オブジェクトを選択したり移動する際に使用。
拡大・縮小ツール：K
オブジェクトの拡大縮小を行うツール。
テキストの拡大縮小にも使える
フレーム：F
フレーム(枠組み)を作成するツール。
フレーム：S
特定の範囲を書き出しができる
シェイプツール
長方形ツール：R
直線ツール：L
楕円ツール：O
ペンツール：P
シェイプのパス調整に使用するツール。
シェイプを変形させる際やアイコンの調整に使用する。
テキストツール：T
テキストを入力するツール
手のひらツール：H
キャンバスを移動する際に使用するツール
コメントツール：C
要素の複製：⌥ + ドラッグ
フレーム&グループ
どちらもオブジェクトをまとめる要素。
それぞれ機能の違いを覚える必要がある。
フレーム
枠のことで、
特定のエリアを作成して、その中にオブジェクトを配置して使用する。
要素の整列させる機能もある
グループ
フレームとくらべて単純で、要素をまとめることに使用する。
要素をまとめたい時はグループを使用して、
まとめた要素に制約をかけたい場合はフレームを使用する。
グループとプロパティはプロパティパネルでいつでも切り替えることができる
コンストレインツ
フレーム配下の要素にはコンストレインツという項目が表示される
これはフレームに対して、何を基準に従うか。ということを指定する項目になる
figmaでは要素を簡単に整列させることができる
複数の要素を選択すると、要素を整列させるボタンが表示される。
要素同士の間隔や、場所を入れ替えることもできる。
コンポーネント、インスタンス
要素を部品化して使用する機能
要素をコンポーネント化：メインコンポーネントとして扱われる
メインコンポーネントを複製する：インスタンスとして扱われる
インスタンスを複製する：インスタンスとして扱われる
メインコンポーネントに変更を加える：インスタンスにも変更が反映される
インスタンスを変更を加える：変更したインスタンスのみ変更が反映される(他のインスタンスにも影響がない)
インスタンスに変更を加えた後に、メインコンポーネントに変更を加える：インスタンスで変更を加えた要素以外に対して、メインコンポーネントで変更した要素がインスタンスに反映される
※reset all changesでインスタンスをメインコンポーネントと同じスタイルに戻せる
※右クリックから、インスタンスを解除することができる
※メインコンポーネントが分からなくなった場合は、プロパティパネルの「Go To main component」からメインコンポーネントへ飛べる
メインコンポーネントのアイコン
インスタンスのアイコン
バリアント
コンポーネントに対してパターンを設ける機能
色のパターン
レイアウトのパターン
サイズのパターン
エフェクトのパターン
上記を組み合わせたパターン
など色々できる
プロトタイプモード
画面遷移を作ることができる。
作った遷移は、プレゼンテーションモードで確認することができる
クリック、ドラッグ、ホバーなどの挙動を作ることができる