「オートレイアウト」の検索結果

FigmaオートレイアウトのHug・Fill・Fixedを親子で選び分ける方法。実測ボタンの文字変更と余白、カードの設定例、折り返し・グリッド、崩れたときの確認順を解説します。

Figma Makeの使い方を、作る手順・直し方・公開まで解説し、使えるプランとAIクレジットの条件、使いすぎを防ぐ方法をまとめました。

Figmaでデザインシステムを作る方法を、バリアブル・スタイル・コンポーネント・ライブラリの役割と、作る手順、公開の条件までまとめました。

Photopea（フォトピー）は、ブラウザで使える無料の画像編集ソフトです。PhotoshopのPSDをそのまま開いて編集でき、Figmaの.figファイルも開けます。Figmaのデザインを「PSDで納品してほしい」と言われたときや、受け取ったPSDをFigmaで使いたいときに便利...

FigmaとPSDを変換する方法として、ブラウザで使える画像編集ソフトのPhotopeaと、FigmaプラグインのPSD Porter for Figmaを比べました。Figma → PSDは、同じFigmaのデータを両方でPSDにし、Photoshopで開いた見た目をFigmaが描いた画像と比べています。PSD...

Figmaプロトタイプの画面遷移を設定する手順と実画面。トリガー・移動先・開始点、スマートアニメートの名前と階層、スクロール・オーバーレイ・共有条件を解説します。

Figmaの標準インポートに.xdと.aiは含まれていません。Illustratorから編集可能なベクターを移す場合はSVG、見た目を1枚の画像として残す場合はPNG・JPGを使います。PDFは、Figmaの標準インポートでそのまま編集できる形式として案内しません。 この記事は...

Figmaの更新を追うときは、まず自分が使う機能の変更を確認します。2026年9月にはAuto layoutの縦方向Wrap、MotionのLottie出力、色のVariablesの不透明度などが更新されています。 このページは、2026年10月3日に確認した公式リリースノートと配信データ...

Figma Designを初めて使う場合は、フレームを作り、文字と図形を置き、余白を調整し、画像として書き出す順に進めると、ひとつの画面を作る操作を確認できます。共通部品や複数画面の管理は、その後に学びます。 このページでは、初めての画面制作、素材の...

Figmaの使い方や関連ツールの記事を7つの区分から探せます。初めて使う場合は入門ガイドから始めてください。 Figmaの使い方 カテゴリーの記事一覧 Figma Makeの使い方｜AI生成・編集・公開の条件Figmaの共有権限｜閲覧・編集・プロトタイプ共有の違いFigm...

Figmaのオーバーライドは、メインコンポーネントとの関係を保ったまま、インスタンスごとに文字や色などを変える操作です。共通部品の構造を使い、ボタンのラベルだけを「保存」「送信」に変えるような場面で使います。 この記事では、画面上の上書きとリ...

Figma Designでは、フレームに文字と図形を配置して画面を作ります。最初は1枚の画面を作り、同じ部品を増やし、画像を書き出すところまで進めると、どの機能を何のために使うか確認できます。 以下はFigma公式の案内に基づく操作ガイドです。右側の設定項...

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

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

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

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

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

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

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

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

Figmaメソッドは、Figmaの使い方、トラブル解決、テンプレート、API・プラグイン開発を扱う技術サイトです。操作の目的から記事を選び、設定条件や制約を確認しながら制作に使えるようにまとめています。 初めてFigmaを使うときの学習順 使い方の入門ガイ...

← CG METHOD / FigmaUI & WEB DESIGNUIのアイデアを、使えるデザインに。Figmaの基本操作、テンプレート・素材、トラブル解決、API・プラグインを目的別に紹介します。操作を学び、制作に使う素材を選ぶための技術サイトです。テーマから探す ↓新着記事を...

デザインの本は、今つまずいている作業に合わせて選びます。配置を学びたいのか、色を選びたいのか、ソフトの操作を覚えたいのかを分けると、必要な本を比較できます。 この記事は出版社の内容紹介・目次をもとに、既存の22冊を目的別に整理した購入前の案...

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