# Figmaオートレイアウト整形

> 「Figmaオートレイアウト整形」の Grok Bot プロンプト。Figmaを使う生産性の作業を組み立て、動かす前に内容を確認できます。

## 概要

- 正規 URL: https://grokguide.jp/bots/figma-autolayout-flattener/
- カテゴリ: 生産性（https://grokguide.jp/categories/productivity/）
- 必要な連携ツール: Figma
- 掲載日: 2026-09-01
- 提供: @johnbai（https://x.com/johnbai）
- 出どころ（X）: https://x.com/johnbai/status/2094456490115408172
- 料金: 無料（このディレクトリの掲載はすべて無料で読めます）

## プロンプト全文

そのままコピーして Grok Bot などのエージェントに貼り付けてください。

```text
あなたは Figma のオートレイアウトを整える担当です。オートレイアウトを組むときや片付けるときに、私が起動できるようにしてください。まず Figma のつなぎ方を案内し、そのうえで設定します。レイアウトを CSS に写しやすい構造へ平らにしてください。フレームごとの関係は1つにし、間隔合わせのダミー要素の代わりに FILL、HUG、SPACE_BETWEEN を使い、padding は面の側に持たせ、キャプションは兄弟要素のまま残します。対象にするページとフレーム、コンポーネントの決まり、例外があるかを私に聞き、最初の変換は私が見ている前で行ってから、使い回せるスキルとして保存してください。
```

## 使い始めるまでの手順

1. **プロンプトを丸ごとコピーする。** 手順・ツール・注意書きをまとめて渡すと、エージェントが全体像を把握できます。
2. **エージェントに貼り付ける。** 設定の質問に答え、聞かれたら Figma をつなぎます。
3. **初回の実行を確認する。** 出力と承認ルールを確かめてから、随時実行や定期実行として保存します。

## よくある質問

### Figmaオートレイアウト整形は何をするボットですか？

生産性の作業を自動で進めるための Grok Bot 用プロンプトです。Figmaと組み合わせて使います。

### Figmaオートレイアウト整形を使うのに必要な連携ツールは何ですか？

Figmaが必要です。掲載していることは、これらが利用者の環境で必ず使える保証にはなりません。動かす前に権限と実行頻度を確認してください。

### 無料で使えますか？

このページのプロンプトは無料で読めて、そのままコピーして使えます。連携するツール側の利用料は各サービスの条件によります。

### 内容を自分用に書き換えても構いませんか？

構いません。掲載しているプロンプトはそのまま使うことも、自社のツール名や進め方に合わせて書き換えることもできます。最初の1回は結果を確認してから任せてください。

## 関連するボット

- [Figmaの整理係](https://grokguide.jp/bots/figma-cleanup-assistant/) — 生産性
- [LPコピー案](https://grokguide.jp/bots/landing-page-copy-options/) — マーケティング
- [Webデザインの補佐](https://grokguide.jp/bots/web-design-assistant/) — マーケティング

## このページについて

- HTML 版（正規）: https://grokguide.jp/bots/figma-autolayout-flattener/
- 掲載元のマークダウン: https://github.com/kouki485/grok-guide/blob/main/bots/figma-autolayout-flattener.md
- 一覧に戻る: https://grokguide.jp/
- エージェント向け案内: https://grokguide.jp/llms.txt