Figmaの使い方 まとめ
フィグマとは
ブラウザ上でデザイン制作が行えるデザインツール
デザイン制作・プロトタイプ制作・デザインのURL共有など、ウェブデザインに特化した制作が可能
figma 日本語化の仕方
Google Chromeの拡張機能で「figma日本語化」で検索
Figmaのファイル構成
[個人]
Drafts
ーDesign File
[チーム]
Team
ーProject
ーDesign File
ショートカットキー
移動ツール：V
拡大・縮小ツール：K
フレーム：F
スライス：S
シェイプ：R L O
ペン：P
テキスト：T
手のひら：H
コメント：C
フレームとグループなどについて
フレーム
デバイスの枠
子要素の操作
グループ
要素をまとめる
CMD ＋ G
コンストレインツ
フレームサイズに対して、、、
左上を基準に
レイヤー
オブジェクト構成
整列
選択して右下のマークを押す
オートレイアウト
直下の要素を整列させることが可能
スタイル定義
サイトで使用するカラーを用意
塗りのスタイル一覧で選択できる
コンポーネント・インスタンス
要素を部品化して使用する
メインコンポーネント → 変更すると下全部
インスタンス（複製）→ 変更しても影響なし
インスタンス（複製）
※インスタンスで変更している部分はメインを変更しても変更されない
バリアント
コンポーネントに対してパターンを設ける機能
画面上部のアドバリアントを押す
例：アイコンのカラーを変える
プロパティ名をつける（ブルー）
インスタンスを作成して、バリアント名を選択する
プロトタイプ
擬似的なウェブサイトの動きを作成する
プロトタイプを押す モード
1ページ目のボタンにインタラクションをつける
ドラックして遷移したいページにつける
プレゼンテーションボタンを押す
画面遷移を確認する
共有
右上の共有ボタン
ファイルに招待
URLで共有
書き出し
エクスポートをクリック
拡張子を指定して書き出し