PR|3日で初案件

Figmaオートレイアウト折り返し(Wrap)は水平フローで設定する|5ステップで動かす手順と崩れを直す4つの確認ポイント

◆ ◆ ◆

Homeフリーランスの仕事術 › Figmaオートレイアウト折り返...

FREELANCE CAREER GUIDE
フリーランスの仕事術
Figmaオートレイアウト折り返し(Wrap)は水平フローで設定する|5ステップで動かす手順と崩れを直す4つの確認ポイント
フリ転。

Figmaのオートレイアウトで要素を折り返すには、方向を「水平フロー」に設定したうえでWrapを有効化します。この設定はCSSのflex-wrap: wrap;に相当する挙動で、カード一覧やタグ一覧のレスポンシブ表示に使えます。本記事では設定手順から崩れの原因まで順に整理します。

目次

この記事でわかること

水平フローとWrapの組み合わせで折り返しが有効になる仕組みを5ステップで確認できます。Wrapアイコンが見つからない・折り返しが効かないといった4つのよくある原因と対処法を把握できます。min-widthで折り返し位置を数値で制御し、カード一覧やタグ一覧を安定させる構成パターン3種が使えるようになります。

今の仕事について、一番近いものは?

この記事の結論

オートレイアウトの折り返しは、水平フローを選択した状態でWrapアイコンをクリックするだけで有効になります。縦方向への折り返しは現時点でサポートされていないため、横方向に要素を流す構成を前提にレイアウトを組みます。min-widthやgapを組み合わせると、コンテンツ量が変わっても崩れにくい構成が作れます。

最初に確認すること

フレームを選択してもWrapアイコンが見当たらない場合、方向が「水平フロー」になっているか確認します。縦フロー(Vertical)の状態ではWrapは表示されません。設定パネル左上のフロー方向アイコンを水平方向に切り替えるだけで、Wrapアイコンが出現します(確認時間:約1分)。

状況別ショートカット

状況読むべきセクション所要時間
折り返しをはじめて設定したいFigmaオートレイアウト折り返しは水平フローで設定する5ステップ約5分
Wrapアイコンが見つからない折り返しが効かない時に確認する4つのポイント約3分
カード一覧を整えたいカードUIとタグ一覧に折り返しを使う3つの構成パターン約5分
min-widthで折り返し位置を制御したいmin-widthとmax-widthで折り返し位置を制御する方法約4分
行間やgapを整えたいgapと行間を合わせて整えるコツ約3分

Figmaオートレイアウト折り返しは水平フローで設定する5ステップ

パネルを探し回ってもWrapが見つからない、という状況は珍しくありません。UIのアップデートでWrapの場所が変わったことも影響しており、知っていないと見つけられない配置になっています(Figma公式ヘルプ「オートレイアウトのガイド」)。

ステップ1: オートレイアウトを追加する(Shift + A)

カードやボタンなどの要素を選択した状態で、Shift + A を押します。右サイドバーに「オートレイアウト」のパネルが表示されれば追加完了です。すでにオートレイアウトが設定済みのフレームであれば、このステップは省略できます。追加直後は垂直フローで始まることが多いため、次のステップでフロー方向を変更します(所要時間:約30秒)。

ステップ2: 方向を水平フロー(横並び)に変更する

サイドバーのオートレイアウトパネル内にある方向アイコンを確認します。矢印が縦方向になっている場合はクリックして横方向に切り替えます。水平フローに変更すると、フレーム内の要素が横一列に並ぶ状態になります。この切り替えを省略すると、次のステップでWrapアイコンが表示されません(所要時間:約30秒)。

ステップ3: Wrapアイコンをクリックして折り返しを有効化する

水平フローの状態で右サイドバーを見ると、フロー方向アイコンの近くにWrapを示すアイコン(要素が折れ曲がる矢印のようなもの)が表示されます。これをクリックすると折り返しが有効になります。Wrap機能はFigmaの比較的新しいオートレイアウト機能として追加されたため、旧バージョンの解説記事とUI配置が異なる場合があります(Figmaオートレイアウト折り返し解説)。

ステップ4: フレームの幅を固定値またはHugより広めに設定する

折り返しはフレームの横幅を基準に動作します。フレーム幅がコンテンツ幅と同じか小さいと折り返しが発生せず、要素がはみ出したまま並んで見えます。フレームの幅を子要素より広い固定値に設定するか、後述するmin-widthとmax-widthで制御します。幅を「コンテンツに合わせて調整(Hug)」に設定するとコンテンツが増えるほど横に伸び続けるため、折り返しの効果が出ません(所要時間:約1分)。

ステップ5: gapと行間を設定して完了する

折り返しを有効にすると、要素間のgapに加えて行間(row gap)を個別に設定できるようになります。同じ値のままでも動作しますが、行間が詰まりすぎると読み取りにくいレイアウトになります。デザインの意図に合わせて行間を調整して設定完了です(所要時間:約1分)。

CHECK

▶ 今すぐやること: カードを3枚以上選択してShift+Aを押し、水平フローへ切り替えてWrapをクリックする(約3分)

Q: 縦方向に折り返すことはできますか?

A: 現時点ではサポートされていません。縦フロー(Vertical)ではWrap自体が表示されず、横方向のみ対応しています(Figma公式ヘルプ)。

Q: Shift + A以外で追加する方法はありますか?

A: 右サイドバーの「+」ボタンからオートレイアウトを追加できます。フレームを右クリックして表示されるコンテキストメニューからも追加可能です。

折り返しが効かない時に確認する4つのポイント

設定したはずなのに要素が次の行に移らない、という状態になる原因は大抵4つのどれかに当たります。

確認ポイント1: フローが垂直(縦)になっている

Wrapアイコンは水平フローの状態でしか表示されません。設定パネルを見てフロー方向が縦矢印になっている場合、横矢印に切り替えます。この確認を先に済ませると、他のポイントを調べる前に解決することが多くあります。

「アップデートで分かりにくいところに移動していた」「横並び選択しないとアイコンが出てこない」という声もあります(UIアップデートの実感に関する投稿(X/haruka_graphic))。

アップデート後にパネル構成が変わり、以前の位置にWrapがなくなって混乱するケースが実際に起きています。「設定の場所を知っていた」だけでは対応できず、アップデートごとにUIを確認し直す必要があります。

Figmaを使った作業効率を上げる方法を日頃から意識しておくと、UIの変化にも素早く対応できます。

確認ポイント2: フレーム幅がコンテンツ幅より小さい、またはHugになっている

フレームの幅がHugに設定されていると、コンテンツが増えるたびに横に伸び続け折り返しが発生しません。固定値に変更して子要素の合計幅より広くすると折り返しが始まります。どの幅で折り返すかをあらかじめ決めておくと、数値を変えながら調整する作業がスムーズになります。

確認ポイント3: 「コンテンツを隠す(Clip content)」がオフになっている

フレームにClip contentが設定されていない場合、はみ出した要素がそのまま表示されて折り返したように見えないことがあります。フレームを選択してデザインパネルの「コンテンツを隠す」をオンにすると、フレーム範囲外の要素が非表示になり折り返しの結果が見えやすくなります(オートレイアウト基本と折り返し解説)。

確認ポイント4: 左右パディングがゼロで端に張り付いている

パディングがゼロの場合、折り返し後の最初の要素がフレームの端にぴったりつき、デザインとして成立しない見た目になることがあります。左右に8px程度のパディングを入れると折り返し後の余白が安定します。パディングを入れた分だけフレームの実質的な内側幅が狭まるため、折り返しの発生タイミングが変わる点も合わせて確認します。

Q: Wrapのアイコンが見つからず、サイドバーに表示されていない場合はどうすればよいですか?

A: フロー方向が水平になっているか先に確認します。水平になっていてもWrapが表示されない場合、Figmaのバージョンが古い可能性があります。ブラウザ版のFigmaを使用している場合はページをリロードすると最新バージョンに更新されます。

Q: 折り返し後に要素が1列ではなく2列や3列になることはありますか?

A: フレームの幅と子要素の幅の関係で列数が決まります。子要素の幅が小さくフレームが広ければ1行に多く並び、折り返し後の行数が減ります。意図した列数にするにはmin-widthで制御します(次セクション参照)。

カードUIとタグ一覧に折り返しを使う3つの構成パターン

カードを並べているのに列が揃わず、幅がバラバラになってしまう状況は実務でよく起きます。幅の揃え方と折り返しの組み合わせを把握しておくと、クライアント案件での調整時間をまとめて短縮できます。

構成パターン1: カード一覧(固定幅カードを均等に並べる)

カードの幅を固定値(例:200px)に設定し、コンテナフレームをWrap有効の水平フローにします。コンテナの幅をカード数×カード幅+gap合計より少し広めにすると、収まりきらないカードが自動で次の行に送られます。カードの数が増えても列数が変わる動作をするため、アイテム追加が発生するコンポーネント設計に向いています。

構成パターン2: タグ一覧(コンテンツ幅に合わせて伸縮するタグ)

タグのような短い要素を並べる場合、各タグの幅を「コンテンツに合わせて調整(Hug)」に設定するとテキスト量に応じて幅が変わります。コンテナはWrap有効の水平フローにして、幅を固定値にすれば入りきらないタグが折り返されます。タグ数が多い場合でも改行位置が自動で決まるため、手動で位置を調整する手間が省けます(Figmaオートレイアウト基本・折り返し解説)。

構成パターン3: ボタン群(コンテナ幅に合わせて子要素を引き伸ばす)

ボタンを横に並べて幅を揃えたい場合、子要素の幅を「コンテナに合わせて拡大(Fill container)」に設定します。Wrap有効のコンテナ内でFillを使うと、1行に入りきった要素がコンテナ幅を等分する形で広がります。列数が変わると1列あたりの要素数も変わり、想定と異なる見た目になることがあります。枚数が一定のケースで使うのが安定します。

「オートレイアウトの方向で”折り返し”が設定できるようになった」「flex-wrap: wrap; に相当する」という声もあります(【Figma】オートレイアウトの新機能:折り返し、間隔の自動)。

CSSのflex-wrapとの対応関係を把握しておくと、開発者への仕様説明がしやすくなります。Figmaの折り返し設定はそのまま開発モードでflex-wrap: wrap;として確認できるため、デザインと実装の認識差が生まれにくいです。

Q: Figmaでレスポンシブレイアウトを再現する際に折り返しはどう使いますか?

A: フレームの幅を画面サイズに相当する固定値に変えながら、カードの折り返し位置がどう変わるかを確認する方法が実用的です。フレームごとにスマートフォン幅とPC幅を用意して、同じコンポーネントを配置して並べるとブレークポイントごとの見え方を比較できます。

Q: Figmaのオートレイアウトとグリッドレイアウトの使い分けはどうなりますか?

A: グリッドはフレームに視覚的なガイドを重ねる機能であり、要素の自動配置はしません。要素を自動で並べて折り返す場合はオートレイアウトを使い、列ガイドに合わせながら作業する際にグリッドを補助として重ねる組み合わせが一般的です。

min-widthとmax-widthで折り返し位置を制御する方法

min-widthの設定方法が分からず、カードの幅が崩れたまま作業が止まってしまった経験がある方も少なくありません。折り返し位置を意図的に決めるにはmin-widthが有効です。

min-widthで折り返し発生ラインを固定する

子要素にmin-widthを設定すると、要素がそれ以上縮まなくなるため、フレーム幅がmin-widthを下回った時点で折り返しが発生します。設定方法は、子要素を選択して右サイドバーの幅フィールド横にある「…」または可変幅の設定から「最小値」を入力します。たとえばカードにmin-width 200pxを設定すると、フレーム幅が200pxを切った段階でそのカードが次の行に移ります(Figmaオートレイアウト折り返し解説)。

max-widthで極端な引き伸ばしを防ぐ

子要素にFill containerを設定したまま幅の上限を指定しないと、フレームが広くなるほど要素も引き伸ばされます。max-widthを設定すると指定値以上には広がらなくなります。カードの場合は320pxや360pxなど、実際のデバイス幅を参考にした値を入れておくと大画面でも崩れません。min-widthとmax-widthを同時に設定して幅の範囲を定めておくのが、フレーム幅変更への対応として堅実です。

min-widthの値の決め方

実務でmin-widthを初めて使う時、値をどの数値にすればよいか迷うことがあります。カードの場合は実際のデザイントークンで使っているコンポーネント幅を基準値にするとズレが起きにくいです。「1列に3枚入ると思っていたのに4枚になった」という調整が発生する場合は、フレーム幅とmin-widthの比率を先に計算して入力する手順にすると確実です。

CHECK

▶ 今すぐやること: カードコンポーネントを選択してmin-widthを設定し、フレーム幅を動かしながら折り返し位置の変化を確認する(約2分)

Q: min-widthはフレーム側ではなく子要素側に設定するのですか?

A: そのとおりです。折り返し基準となるmin-widthは子要素に設定します。フレーム側にmin-widthを設定してもフレーム自体の最小幅が変わるだけで、折り返し位置の制御には使えません。

Q: Fillを使った子要素にmax-widthを設定するとどうなりますか?

A: max-widthに達するまでコンテナに合わせて広がり、max-widthを超える幅にはなりません。Fillとmax-widthを組み合わせると、広い画面では要素が中央に集まり余白が両端に出る動作になります。

事務作業に時間を取られている方へ

フリーランスの働き方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

gapと行間を合わせて整えるコツ

折り返しを設定した後でgapと行間を別々に調整せず同じ値のままにしておくと、行間だけ詰まって縦方向に窮屈になります。

gapと行間の違いを把握する

オートレイアウトのgapは同じ行の要素間の横方向の隙間です。折り返し後に追加される行間は、行と行の間の縦方向の隙間です。折り返しを有効にした段階で、サイドバーに行間の入力フィールドが独立して現れます。gapと行間を同じ値にすると縦横均等な余白になります。カードレイアウトでは16pxや24pxを基準にして、コンテンツとの見た目バランスを確認しながら調整するのが効率的です(オートレイアウト基本と折り返し解説)。

パディングと組み合わせる

コンテナの左右パディングを設定すると、折り返し後の行の先頭がコンテナ端から離れて見た目が整います。パディングを変えるとフレーム内側の幅が変わり折り返し位置も動くため、gap・行間・パディングの3つを順番に決める手順が崩れにくいです。先にコンテナ幅と列数の関係を決めてからgapを入力し、最後にパディングを加えて調整する順番を試してみてください。

やらなくてよいこと

gap調整のたびにフレームの幅を手動で計算し直す必要はありません。フレーム幅を固定してgapを変えるだけで、折り返し位置は自動的に変化します。行間を必ずgapと同じ値にしなければならないルールはなく、行間だけ広めにとってゆとりのある縦方向の余白にする選択も有効です。

Q: gapと行間を別々の値にしてもレイアウトは崩れませんか?

A: 崩れません。gapは横方向の要素間、行間は縦方向の行間であり独立して動作します。デザインの意図に合わせて別々の値を設定して問題ありません。

Q: パディングをゼロにするとどうなりますか?

A: 折り返し後の最初の要素がコンテナの端にぴったりつく状態になります。余白が必要な場合は最低でも8px程度のパディングを入れると見た目が安定します。

Figmaオートレイアウト折り返しの判断フロー|3分で設定の迷いを解消

「折り返しを使うべきか、別の方法で対応すべきか」と迷う場面は実際の案件でよく出てきます。以下の質問に答えると、今の状況に合った対応が確認できます。

Q1: 並べたい要素の数はコンテンツによって変わりますか?

Yesの場合はQ2へ進みます。Noで枚数固定の場合はResult Aです。

Q2: 要素を横に並べて、入りきらない分を次の行に流したいですか?

Yesの場合はQ3へ進みます。Noで縦に積み重ねるだけでよい場合はResult Bです。

Q3: 各要素の幅は固定ですか、それとも内容に合わせて変わりますか?

固定幅の場合はResult Cです。内容に合わせて変わる(Hug)場合はResult Dです。

Result A: オートレイアウトの縦フロー(Vertical)で対応

枚数が固定であれば折り返しは不要です。縦に積む縦フローか、固定幅で横に並べるだけで十分対応できます。

Result B: 縦フロー(Vertical)のオートレイアウトで対応

縦に積み上げるレイアウトには折り返しは不要です。縦フローを使います。

Result C: Wrapを有効にした水平フロー+min-width設定

固定幅カードをコンテンツ量に応じて並べる場合の標準構成です。min-widthを設定すると折り返し位置が安定します。

Result D: Wrapを有効にした水平フロー+各要素をHugに設定

タグ一覧のようにテキスト量で幅が変わる要素に適した構成です。コンテナ幅を固定にして折り返し位置を管理します。

Q: Figmaの折り返しはWebの実装にそのまま反映されますか?

A: Figmaの折り返しはCSSのflex-wrap: wrap;に相当します。開発モードで確認するとflex-wrap: wrap;が出力されるため、エンジニアへの共有時にそのまま参考として使えます。paddingやgapの値は設計意図と一致しているか別途確認が必要です。

Q: フリーランスがクライアントに折り返し設定を説明する時はどう伝えるとよいですか?

A: 「幅が足りなくなったら自動的に次の行に送る設定」と一言で伝えると伝わりやすいです。デザイン未経験のクライアントには、テキストの自動折り返しに近いイメージで説明すると受け入れられやすいです。フリーランスがクライアントへの提案力を高める方法も合わせて参考にしてください。

ハック|Figma折り返しレイアウトを早く仕上げる5つの設定術

ハック1: コンポーネントをWrap対応フレームに入れてから幅を調整する

【対象】: カード一覧やギャラリーを複数案件で使い回したいフリーランス

【手順】: カードコンポーネントを1枚作成し、幅を固定値(例:200px)に設定します(約3分)。新規フレームを作成してShift+Aでオートレイアウトを追加し、水平フロー・Wrap有効に設定します(約1分)。カードコンポーネントをフレームに複数配置し、フレーム幅を変えながら折り返し位置を確認して決定します(約2分)。

【コツと理由】: 「コンポーネントを先に固定してからコンテナ幅で折り返し位置を制御する」手順が後工程での調整をしやすくします。コンポーネント幅を変えると全カードに反映されてしまうため、幅を固定したコンポーネントを基準にしてコンテナ側で調整する手順の方が、修正時の影響範囲が限定されます。

【注意点】: コンポーネントにFill containerを設定すると、コンテナ幅が変わるたびに幅が変化してしまい意図した折り返しタイミングが変わります。カードのような固定デザインではコンポーネント幅をFixedにするのが安定します。gapはいつでも変更できるため後回しにして問題ありません。

ハック2: タグ一覧はHug+Wrapで横幅を自動管理する

【対象】: テキスト量が変わるタグやラベルを折り返し表示したいフリーランス

【手順】: タグコンポーネントの幅をHug contentに設定し、左右パディングを8〜12px入れます(約2分)。コンテナフレームに水平フロー・Wrap有効のオートレイアウトを設定し、幅を固定値にします(約1分)。gapと行間を個別に入力し(例:gapは8px、行間は12px)、実際のタグを複数配置して見た目を確認します(約2分)。

【コツと理由】: タグのように文字数が毎回異なる要素に固定幅を使うと、テキストが短い時に余白が多く出て不自然になります。HugとWrapを組み合わせると、テキスト量に応じた自然な幅で折り返し位置も自動管理されます。

【注意点】: タグにmin-widthを設定しないと、1文字しかないタグが極端に小さくなる場合があります。最小でも32px程度のmin-widthを設定しておくと見た目が安定します。タグごとに幅を手動で変更する作業は不要です。HugとWrapの組み合わせで自動的に対応できます。

ハック3: min-width計算をFigmaで確認してから数値を入力する

【対象】: min-widthの値を何に設定すべきか毎回迷うフリーランス

【手順】: コンテナフレームの幅を決め(例:400px)、1行に並べたい枚数(例:2枚)を決めます(約1分)。gap値(例:16px)を決め、(400 − 16)÷ 2 = 192px を計算してmin-widthの目安にします(約1分)。子要素にmin-width 192pxを設定し、コンテナ幅を変えながら意図した列数で折り返すか確認します(約2分)。

【コツと理由】: 「(コンテナ幅 − gap合計)÷ 希望列数」という計算で目安が出ます。感覚で決めると「意図した列数にならない」状態が続くため、先に計算して入力すると確認回数が減ります。計算結果を少し小さくすると(例:190px)、境界で1列余分に入る余裕が生まれます。

【注意点】: コンテナにパディングを設定している場合は、計算に使うコンテナ幅から左右パディング分を引いた内側幅を使います。パディングを考慮しないとmin-widthの値がずれて意図した折り返しにならないことがあります。毎回試行錯誤で数値を決める必要はありません。

ハック4: Wrap有効のフレームをベースコンポーネントとして保存する

【対象】: 同じ折り返しレイアウトを複数案件で再利用したいフリーランス

【手順】: 水平フロー・Wrap有効・min-width設定済みのコンテナフレームを1つ作成します(約5分)。フレームを右クリックして「コンポーネントを作成」でコンポーネント化し、プロジェクトのアセットに保存します(約1分)。新規案件でアセットからドラッグして配置し、コンテナ幅のみ案件に合わせて変更して使います(約2分)。

【コツと理由】: Wrapの設定手順を毎回行うことで設定漏れや値の入力ミスが起きやすいです。Wrap設定済みコンポーネントを持っておくと、使うたびにWrap有効・フロー方向・gapの設定を繰り返す手間が省けます。案件ごとに変わるのはコンテナ幅とgapの数値だけに絞れます。

【注意点】: コンポーネントを更新すると、そのコンポーネントを使っている全インスタンスに変更が反映されます。特定の案件だけで設定を変えたい場合はインスタンスのローカル変更(Detach)を使いますが、Detachするとベースコンポーネントからの更新が受け取れなくなります。再利用しやすい範囲の設定だけをコンポーネントに含めて、案件固有の調整はインスタンス側で行う分担が実用的です。

ハック5: 開発モードでflex-wrap確認をエンジニアへ共有する手順を決める

【対象】: エンジニアへFigmaの折り返し設定を正確に伝えたいフリーランス

【手順】: Figmaの右上メニューから開発モードに切り替え、折り返し設定のフレームを選択します(約1分)。右サイドバーのCSSタブでflex-wrap: wrap;が出力されているか確認します(約1分)。確認済みの画面をスクリーンショットまたは共有リンクでエンジニアに渡し、flex-wrap・gap・paddingの値を口頭か書面で補足します(約2分)。

【コツと理由】: 「デザイン側でWrapを設定したのに実装で折り返しにならなかった」という事態は、エンジニアが開発モードのどの値を参照すべきか分からないまま実装する時に起きやすいです。開発モードでflex-wrap: wrap;が出力されることをあらかじめエンジニアと確認しておくと、実装でのズレが起きにくくなります。エンジニアとの連携を円滑にするにはフリーランスのビジネスツール活用も参考になります。

【注意点】: 開発モードのCSS出力はFigmaの設定を参考として出力するものであり、そのまま本番コードとして貼り付けると予期しない値が混入することがあります。font-familyやletter-spacingなど、プロジェクトで別途定義している値が上書きされないか確認するようエンジニアに伝えます。Figma上で開発者向けの注釈を全項目に書く必要はなく、開発モードのCSS出力と口頭補足の組み合わせで十分対応できます。

CHECK

▶ 今すぐやること: ハック4を参考に、水平フロー・Wrap有効・gap設定済みのコンテナを1つコンポーネント化してアセットに保存する(約8分)

Q: ハック1〜5はすべてやる必要がありますか?

A: 案件の状況に合わせて選択して使います。はじめてWrapを設定する場合はハック1・2から試すと動作確認がしやすいです。エンジニアとの連携が多い場合はハック5を先に確認しておくと作業がスムーズになります。

Q: コンポーネント化せずにWrapフレームを使い回す方法はありますか?

A: Figmaのページをまたいでフレームをコピー&ペーストする方法があります。設定が案件ごとにバラバラになりやすく、後から見返した時に何を基準にしているか分かりにくくなります。再利用が2回以上になる場合はコンポーネント化しておく方が管理しやすいです。

Figma折り返しを使いこなす:水平フローとWrapで動く設定のまとめ

水平フローを選択してWrapを有効にするだけで折り返しが動作します。Wrapが見つからない場合はフロー方向の確認が先決で、縦フローのままでは表示されません。min-widthで折り返し位置を数値で制御し、gapと行間を個別に設定することで安定したカードレイアウトが作れます。

折り返しを使ったレイアウトは、設定の順番と確認ポイントを知っていれば判断が早くなります。WrapとWrapとmin-widthの組み合わせを自分のベーステンプレートとして持っておくと、次の案件からの立ち上げ時間が変わります。Figmaを活用したポートフォリオ作成と組み合わせることで、デザインの質をクライアントに効果的に伝えられます。

状況次の一歩所要時間
はじめて設定するShift+Aで追加 → 水平フロー → Wrapをクリック約3分
Wrapが見えないフロー方向を水平に切り替える約1分
折り返し位置を固定したい子要素にmin-widthを入力する約2分
行間が詰まって見える行間フィールドをgapとは別に入力する約1分
エンジニアに渡す開発モードでflex-wrap: wrap;を確認して共有約2分

Figmaオートレイアウト折り返しに関するよくある質問

Q: Figmaのオートレイアウト折り返しは無料プランでも使えますか?

A: 折り返し(Wrap)機能はFigmaのオートレイアウト機能の一部であり、無料プランでも使用できます。機能の制限はプランではなくFigmaのバージョンに依存するため、ブラウザ版では定期的にリロードして最新版を使うことを推奨します。

Q: 折り返し後に列数を固定する方法はありますか?

A: 列数をFigmaの設定で直接固定する機能はありません。子要素のmin-widthとコンテナ幅の比率で列数が決まるため、(コンテナ幅 − gap合計)÷ 希望列数の計算でmin-widthを設定すると実質的に列数を固定できます。コンテナ幅を変えると列数が変わる点は仕様として受け入れる必要があります。

Q: Figmaでオートレイアウトなしに折り返しを再現する方法はありますか?

A: オートレイアウトなしで折り返しと同等の表示を再現するには、手動で要素を並べるしかありません。コンテンツが変わるたびに手動で位置を調整する必要が出るため、要素数が変わるレイアウトではオートレイアウトとWrapを使う方が実務上の対応が安定します。

【出典・参照元】

Figma公式ヘルプ「オートレイアウトのガイド」

Figmaオートレイアウト折り返し解説(wentz-design.com)

オートレイアウト基本と折り返し解説(web.skipjack.tokyo)

Figmaオートレイアウト基本・折り返し解説(skillhub.jp)

【Figma】オートレイアウトの新機能:折り返し、間隔の自動(note.com/nori44)

事務作業に時間を取られている方へ

フリーランスの働き方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

フリ転編集部 jpndesft
フリーランス専門メディア「フリ転。」編集部。独立・案件獲得・税務など、フリーランスが直面する課題をわかりやすく解説することを使命としています。

フリーランスデザイナーのためのキャリア・案件・税務情報をお届けしています

お問い合わせ →

人気キーワード

フリーランスの案件・単価を調べる

フリーランス求人を探す週1〜2日・リモートOKの案件を毎日自動収集職種別の単価相場を見る48職種の月額単価を実データから集計実務ツールを使う見積・請求書・税金計算など51種を無料で

カテゴリから記事を探す

フリーランスの独立術フリーランスの資金術フリーランス職種図鑑