This AI agent builder UI for Figma shows a workflow canvas with connected steps, a step palette and a settings panel for the selected step. This is the light version, with a soft grey page and white cards.

What is included

• A top bar with the agent name, version history, Test run and Publish
• A palette with Triggers, AI, Logic and Apps step types
• A dotted canvas with five nodes, curved connections and Yes and No branch labels
• A selected node with an indigo outline and a check on finished steps
• A settings panel with model, instructions, label chips and a test result

Where to use it

Use it for no code automation tools, support agents, workflow builders and internal tools where people connect steps.

Design notes

Each node has an icon color by type: blue for triggers, purple for AI, amber for logic and green for actions. The icon and the label both say the type. The connection into the selected node is drawn in the brand color. The light theme uses a #F4F5F9 background, white cards, #12141C text and an indigo #5B5BF0 accent.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. The file uses Plus Jakarta Sans, both free on Google Fonts, and every color is a fill you can change in the fill panel. Text pairs stay above 4.5 to 1 contrast.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. Install the free Google Fonts first so the text looks the same. All names and numbers in the file are sample content.