新着記事

Figmaプラグインで時間のかかる処理をする場合は、メインコードから完了件数をUIへ送り、HTMLのprogress要素で表示できます。進捗の表示と処理の分割を組み合わせ、利用者が状態を確認できるようにします。 この記事の処理は、100件を50msずつ待つ説明用の...

Figmaの情報を外部スクリプトから取得するならREST API、開いているファイルのレイヤーを作成・編集するならPlugin APIが基本です。画像の書き出しなど、両方でできる作業もあるため、実行場所と変更したい対象から選びます。 この記事はFigma公式ドキュメ...

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

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

ボタンの見た目を比較し、Figmaの画面デザインで検討するための素材パックを無料配布しています。この記事には、既存のボタン素材35種類の見本を掲載しています。 配布形式は .fig です。画像の見本と、編集用のFigmaファイルを区別してください。更新履歴...

見出しの文字と装飾を比較し、Figmaの画面デザインで検討するための素材パックを無料配布しています。この記事には、既存の見出し素材40種類の見本を掲載しています。配布形式は .fig です。 更新履歴は2024年7月9日に20種類、2024年8月28日に20種類を追加...

SWELLで制作するサイトの画面をFigmaで検討するためのテンプレートについて、読み込み方と編集時の確認項目を紹介します。この記事は無料で読めます。テンプレートの購入・ダウンロードはWAZAの販売記事で案内しています。配布形式は .fig。Figmaへ読み込...

複数の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公式が案内しているインポート対応...

Studioは無料プランのままでもサイト制作ができます。 プロジェクトの権利譲渡も可能なため、制作側からクライアントへサイトを引き渡す運用にも対応しています。 クライアント側で有料プランを契約すれば、独自ドメインを割り当ててサイトを公開できます...

2025年3月にStudioの支払い方法として登録していたクレジットカードを変更したところ、決済エラーが発生しました。 その際に対処した解決手順をまとめます。 サポートに確認したところ、カード登録時の本人認証（3Dセキュア）に関する不具合が原因と案内さ...

Figmaを学ぶための書籍を段階別に紹介。1冊目に選ぶべき手を動かす入門書、実務のハンドオフまで学べる本、UIの判断力を養うアイデア集、Webデザインの土台を固める入門書まで、いまの段階に合う1冊が選べます。

Studioでテンプレートを確認する際、タブレットやモバイルの表示に切り替えると特定の要素が表示されなくなる場合があります。 たとえば、ヘッダーメニューをタブレット画面でも表示したいのに非表示になってしまうケースです。 旧掲載画面：幅の切り替え...

Studioのテンプレートを編集する際、文字色は変えられるものの、テキストの背景色が変更できずに困った経験はないでしょうか。 本記事では、Studioでテキストの背景色が変更できない場合の対処法を解説します。 テキストの背景色が変更できないときの対処...

Figma to Studioで「ボックスの親子関係が保存できる最大の深さを超えた」と表示される場合は、取り込むデータの深い入れ子を確認します。レイヤー数と階層の深さは別の指標です。 Studio公式のボックス入れ子構造の階層上限では、システム上限は12階層、...

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

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

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

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

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

Figmaで文字を打ち替えられない場合と、文字サイズの設定を変えられない場合は、確認する原因が異なります。編集権限 → テキストの選択 → 欠落フォント → スタイルや変数の参照の順で確認してください。テキストスタイルの解除は、書式を個別に変更するた...