はじめに
デザインツール「figma」はとても便利です。
webで使用できるのでパソコンさえあればどこででも作業ができます。
そこで、主な作り方を備忘録としてメモしておきます。
『Auto layout』と『Variants』を覚える
Figma：Auto layout / コンポーネント / Variants のシンプル比較
Auto layout
要素の並び・間隔・内側余白を 自動整列
コンポーネント
よく使う部品を 再利用（メイン⇄インスタンス）
Variants
同じ部品の 状態・サイズ違いをひとまとめ
Auto layout
テキスト増減や要素追加でも崩れにくい、自動整列フレーム。
- 方向：横／縦 を選ぶ
- 余白：アイテム間隔・パディングを数値で統一
- サイズ：Hug／Fixed／Fill で伸縮ルール
ボタン
カード
リスト
コンポーネント
部品のひな型を作り、全体の見た目を一括管理。
- 構造：メインとインスタンス
- 効果：一括修正・統一感アップ
- 相性：Auto layoutと併用が定番
共通ボタン群
ヘッダー
フッター
Variants
色・状態・サイズなどバリエーションを1セットで管理。
- プロパティ：State／Size／Color など
- 切替：インスタンスでドロップダウン選択
- 用途：デザインシステム整理に最適
通常／ホバー／無効
S／M／L
Blue／Gray
おすすめの作業順
① Auto layoutで形を整える
② コンポーネント化
③ Variantsで状態・サイズ追加
プラグインを使おう
figmaはプラグインがたくさんあって使わないとソンです。
どんどん便利ツールは活用しましょう。
「Better Font Picker」
どのフォントがどんな形か見ながら探せるプラグイン。
「Better Font Picker」
とりあえずコレ入れとかないと話になりません。
「 Figma to Code」
Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインです。
LP制作にはもってこいです。
「Motion」
このプラグインを使うと細かく・便利にアニメーションを作成できます。
TIPS
表を作る方法
テンプレートがダウンロードできるので助かります。
バナーなどの背景をテクスチャにしたりする
テクスチャをpngにして、適用したいオブジェクトのFillに挿入します。
1.適用したいオブジェクトを選択して、Fillを「＋」で追加する
2.追加されたレイヤーの一番左の□の部分をクリックしてポップアップの「Linear（またはSolidなど）」の部分を「Image」に変更
3.先ほど書き出したPNGファイルをドラッグする
このサイトは使えます。
テクスチャ探しにはもってこい！
「Crop」で画像を好きな形に切り抜く
画像を切り取る
全部同じサイズの画像にしたい場合に使います。
フッター固定
Bottom設定にしましょう。
プレビューじゃないと固定の確認はできないので注意。
横スクロール
横スクロール結構使います。
アートボード選択して「Clip content」のチェックを外すと横スクロール全画面確認できます。
【HTML & CSS 超初心者向け】figmaデザインカンプからのコーディング
figmaで制作したデザインデータをpsdデータに変換する方法