Open13
はじめてのFigma
kzk4043ショートカット
| ショートカット | 内容 |
|---|---|
| ctr + shift + ? | ショートカット表示 |
| ⌘ + D | レイヤーの複製 |
| ⌘ + G | グループ化 |
| ⌘ + ⌥ + K | コンポーネント化 |
| ^ + ⌥ + T | 均等配置 |
| V | 普通の選択ツール |
| F | フレーム選択 |
| C | コメント |
| T | テキスト |
| ⌥ + ドラッグ | いろんなものをコピーできる。マスタコンポーネントならインスタンス化 |
| shift + A | オートレイアウト有効化 |
kzk4043コンポーネント
マスタコンポーネントに要素を追加するには、Layersパネルでマスタ内にドラッグしたらいけた
frame
縦に長いコンテンツ（ページをオーバフローするもの）の表現ってどうするの…そのまま大きくしてclip contentしても隠れない
単純にはみ出させるしかないってことかな…？
kzk4043その他
画像の切り抜き
フォント
トグルボタン
多角形
Figmaで多角形を追加すると、角数が増えた時もサイズが保てるようにバウンディングボックスの下部に余白があります。
右クリックでFlattenを選択すると図形の形に合わせた形にすることができます。
clip content
2️⃣「Clip Content」にチェックを入れることで、フレームの外側にはみ出ているものの表示／非表示を切り替えられる
参考
kzk4043オートレイアウト
オートレイアウトは、指定した「フレーム」の中に存在する要素を単一方向（縦・横）へ規則的に並べるためのルールを設定できる機能です。
フレームだけなのか。これは結構罠だった。。
複数選択してオートレイアウトを適用する場合、全体を覆うフレームが作成されるのか。
kzk4043何が違う？
- フレーム
- flex的な挙動を期待するならこれ。てかこれ以外いらんくないか…？
- セクション
- ページの項目分けとか？
- ピンチチンアウトしても名前が見やすいのがよき
- グループ
- まとめて移動させるものだが、フレームあるならフレームでいいのでは…？
- 一括で配下のプロパティが変更できるのが固有機能？
- Rectangle
- これは図形だから、ページにおけるパラグラフとか何かしらのエリアとして使うものではないのかも。ボタンとかInputとかそういうのか。
Figmaにおける「フレーム(Frame)」、「セクション」、「グループ(Group)」、「Rectangle」は、それぞれが異なる目的や使い方で設計されています。以下、それぞれの特徴を詳細に解説します。
フレーム (Frame)
• 定義: フレームは、UIデザインにおけるコンテナの一種です。
• 特徴: コンポーネントや画面の構造を作成するために使用されます。自身のサイズを持ち、内包するオブジェクトのレイアウトを調整可能です。フレームはレスポンシブデザインの基礎ともなり、ページ、アートボード、ウィンドウなどを表現するのに適しています。
• 使用例: 画面レイアウト、ボタン、カードなど、特定の振る舞いや機能を含むオブジェクトを作成する際に利用します。
セクション
• 定義: Figmaにおける「セクション」という用語は、一般的にUIデザインのコンテキストで用いられる概念であり、Figmaの固有の機能を指すわけではありません。
• 特徴: 一定のセクションやカテゴリーにまとめられた情報やコンテンツのブロックを指します。Figmaでは「フレーム」や「グループ」を使用してセクションを作成しますが、セクション自体がFigmaの特定の機能を指すわけではないです。
• 使用例: ウェブページやアプリ内の異なるセクション（例：ヘッダー、フッター、メインコンテンツ領域）を区切るために使われます。
グループ (Group)
• 定義: グループは、複数のオブジェクトを一つの集団として扱うための機能です。
• 特徴: 個別のオブジェクトをまとめて、一括で移動や整列が可能になります。グループ内のオブジェクトは、独立した属性（サイズや色など）を保持します。フレームとは異なり、グループにはレイアウトのプロパティはありません。
• 使用例: ロゴのテキストと形状を一緒に動かしたい時や、複数のオブジェクトをまとめて扱いたいシナリオで使用します。
Rectangle (矩形)
• 定義: これは具体的な形状の一種で、Figmaでデザインを作成する際に使用する基本的な図形要素です。
• 特徴: 幾何学的形状であり、サイズや色、境界線、影などのプロパティを指定できます。矩形はUIコンポーネントやレイアウトの基本的な構成要素として使用されます。
• 使用例: ボタン、カード、インプットフィールドなど、UIエレメントの基礎として幅広く利用されます。
補足: Figmaにおいては、「セクション」の用語は直接的な機能として存在しません。デザイナーは「フレーム」、「グループ」、具体的な形状（「Rectangle」など）を使用して、画面上の「セクション」を形作ります。コンテナとしての「フレーム」、集団を管理する「グループ」、基本的な形状としての「Rectangle」はそれぞれ異なる目的で使用され、デザインのニーズに応じて適切に選択されるべきです。
あれ、セクションのデータがなかったのか。。