Figmaの使い方

いますぐ消したいなら、Shift + C を押すだけです。 Figmaのコメントを一時的に隠すには、Shift + Cを押します。もう一度押すと表示に戻ります。コメントの投稿や返信は残るため、デザインだけを見たいときに使えます。Figma公式も「コメントを隠すには、...

PSDをFigmaへ移す場合、1枚の画像として配置する方法と、プラグインでレイヤーを変換する方法があります。psd.to.designは第三者の変換プラグインです。Figmaの標準インポートにPSDが含まれるわけではありません。 Figma公式が案内しているインポート対応...

Figmaのバリアブルは、色や数値などを名前付きで保存し、複数のレイヤーへ適用する機能です。たとえばボタンの色を同じバリアブルへ関連付けると、元の値を変更してまとめて更新できます。 この記事では、ファイル内で管理するローカルバリアブルの作成、...

Figmaのスタイルは、文字・色・効果などの設定を名前付きで再利用する機能です。たとえば見出しのフォント、サイズ、行間をテキストスタイルにすると、複数の見出しを同じ設定で管理できます。スタイルの定義を編集すると、そのスタイルを適用したレイヤー...

Figmaで文字や線を含めてオブジェクト全体を比例拡大するには、KでScale（スケール）ツールに切り替えます。画面上で大きく見たいだけならズーム、フレームの幅・高さを変更したいならリサイズを使います。 目的操作変わるもの見やすい表示倍率にするズー...

Figma Designのファイル一覧に表示するサムネイルは、ファイル内のフレームを右クリックしてSet as thumbnail（サムネイルとして設定）を選ぶと指定できます。公式推奨の作成サイズは1920×1080、比率は16:9です。 これはカバー用フレームの寸法です。ファ...

Figmaのセクションは、同じキャンバスにある複数の画面やコンポーネントを、名前付きの範囲にまとめる機能です。Shift + Sで作成できます。たとえば「購入フロー」にカート・入力・完了画面をまとめると、関係する画面を同じ場所で確認できます。 セクショ...

Figmaのアセットは、コンポーネントを探して画面へ配置する入口です。コンポーネントの元をメインコンポーネント、そこから配置した部品をインスタンスと呼びます。同じボタンを複数の場所で使う場合、元の形を共通化しながら、配置先ごとに文言などを変え...

Figma Designのページは、1つのファイル内にあるキャンバスを切り替える機能です。ワイヤー・デザイン・コンポーネントのように用途ごとの作業場所を用意できます。閲覧権限でページを見られますが、追加や管理には編集権限が必要です。 ページを分ける場...

8の倍数は8に整数を掛けた数で、正の値は8、16、24、32、40…と8刻みで増えます。下3桁が8で割り切れれば8の倍数と判定でき、数学上は0や負の数も含みます。 本稿では8〜2000の早見表と見分け方に加え、UIデザインの8ポイントグリッドで余白や寸法を設計す...