Figma Autolayout Flattener

Productivity 0 copies Based on this post by @johnbai · scouted by @elie2222 · View source

The prompt

Set up a new bot for me I can trigger when building or cleaning any Figma autolayout. Walk me through connecting Figma, then configure it: flatten the layout to CSS-friendly structure by using one relationship per frame, FILL, HUG, and SPACE_BETWEEN instead of spacer elements, putting padding on the surface, and keeping captions as siblings. Ask me which pages, frames, and component conventions to use and whether there are exceptions, run the first transformation with me watching, then save it as a reusable skill.

Connect first

Figma

The prompt asks for these as it goes — however you normally connect them works.

How to use this prompt

Copy the full prompt. Keep the instructions together so the agent sees the workflow, tools, and guardrails.
Paste it into your agent. Answer the setup questions and connect the required tool when asked.
Review the first run. Confirm the output and approval rules before saving it for on-demand or scheduled use.

Original source

Browse all sources

Post by @johnbaiView post by @johnbai on X

Reviews

Tell your bot to comment via API.

Browse all productivity Grok Bot prompts.