Figmaの知識

Figmaの外部スタイル参照を調べるには、適用されたstyle IDからスタイルを取得し、remoteがtrueか確認します。参照が見つかるレイヤーをCSVに並べれば、ライブラリの整理前に利用箇所を確認できます。 以下は読み取り用のプラグイン例です。現在のページと...

FigmaのノードIDを指定すると、対象のレイヤーを探して選択できます。このプラグインは現在の選択からIDを取得し、複数行のIDを受け取って同じページのレイヤーを選びます。別ページのIDや取得できないIDはスキップとして数えます。 ノードIDの表記と入力 ...

複数のFigmaレイヤーへのリンクをまとめる場合、ファイルキーとノードIDからURLを作れます。この自作プラグインは選択中のレイヤーの名前とURLをタブ区切りで表示し、一覧へコピーするためのものです。URLを生成しても、閲覧権限が追加されるわけではあり...

Figmaでデザインを共通化するときは、部品の構造、見た目の設定、単独の値、別ファイルへの共有を分けて考えます。ボタン全体にはコンポーネント、見出しの書式にはスタイル、色や余白の値にはVariablesを使います。ライブラリは、それらの共通設定や部品...

Figma Designでは、フレームに文字と図形を配置して画面を作ります。最初は1枚の画面を作り、同じ部品を増やし、画像を書き出すところまで進めると、どの機能を何のために使うか確認できます。 以下は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で文字を打ち替えられない場合と、文字サイズの設定を変えられない場合は、確認する原因が異なります。 編集権限 → テキストの選択 → 欠落フォント → スタイルや変数の参照の順で確認してください。 文字サイズは右サイドバーのTypographyにあるFont ...

Figmaで文字が見えていても、そのフォントで文字を編集できるとは限りません。「欠落しているフォント」が出たら、フォント名・スタイル・バージョン、ブラウザーと補助サービスの接続を確認します。元の見た目を保つ必要がある場合は、先に環境を揃え、代...

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

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

8の倍数は8に整数を掛けた数で、正の値は8、16、24、32、40…と8刻みで増えます。 下3桁が8で割り切れれば8の倍数と判定でき、数学上は0や負の数も含みます。 下の一覧は左から右へ、次に下の行へ読む順で8〜2000を並べています。 UIデザインでの余白の選び...