Hello Figma Team,

I asked ChatGPT to specify a tool bar and it came up with the following.  I am relatively new to Figma so I wasn’t able to make progress after the frame definition.    How do I design the children as shown below?  Any help is much appreciated.

Thank you,

Mustafa

*****************************

Frame (component) — c/topbar/default

• Size: 1440 × 64
• Auto Layout: Horizontal
  • Direction: Horizontal
  • Primary axis alignment: Space between
  • Counter axis alignment: Center
  • Padding: Top 8, Bottom 8, Left 16, Right 16
  • Item spacing: 24
• Fill: #FFFFFF (or your neutral-100)
• Effects: Drop shadow (Y: 1, Blur: 4, Color: rgba(0,0,0,0.06)) — optional
• Layout grid: 12-column, 1440px frame width, 20px gutter (optional)

Children (left → right) and properties

1. logo_left (group)

• Type: Frame (no Auto Layout)
• Size: 40 × 40
• Constraints: Left & Center vertically
• Content: SVG logo or text; left-aligned
• Padding inside: 0

2. left_spacer (flexible spacer)

• Type: Frame
• Width: 0 (use Auto Layout "Fill container" to expand)
• Height: 40
• Auto Layout: none (acts as flexible spacer)
• Constraints: Stretch horizontally

3. project_selector_center (frame/component)

• Type: Frame with Auto Layout (horizontal)
• Max Width: 480
• Height: 40
• Auto Layout padding: Left 12, Right 12, Top 6, Bottom 6; spacing 8
• Fill: transparent or neutral-100; border radius 6; border 1px neutral-300
• Text style: button (14 px, 600)
• Constraints: Center horizontally (by virtue of spacers) and vertically centered

4. right_spacer (flexible spacer)

• Same as left_spacer (use "Fill container" to keep project selector centered)

5. search_opt (input field component)

• Type: Frame with Auto Layout
• Width: 280
• Height: 36
• Padding: Left 12, Right 12, Top 6, Bottom 6
• Fill: neutral-100; border radius 6; border 1px neutral-300
• Icon: 16×16 left; placeholder text body-sm
• Constraints: Right aligned vertically centered

6. notifications_right (icon button)

• Type: Frame (Auto Layout not required)
• Size: 40 × 40 (hit target)
• Icon size: 20 × 20 centered
• Badge (optional): instance of c/badge/notification — size 18 × 18, position absolute top-right (x offset: 24, y offset: -6)
• Fill: transparent

7. user_avatar (avatar component)

• Type: Ellipse / Frame
• Size: 40 × 40
• Border radius: 50%
• Image fill or initials
• Constraints: Right aligned, vertically centered

Layer order inside c/topbar/default (top to bottom or left to right in Layers panel)

• c/topbar/default (frame)
  • logo_left
  • left_spacer (Fill container)
  • project_selector_center
  • right_spacer (Fill container)
  • search_opt
  • notifications_right
  • user_avatar

Component variants / states to create

• default
• compact (height 56; reduce paddings to Top/Bottom 6, Left/Right 12; item spacing 16)
• notifications_unread (badge visible on notifications_right)
• loading (project_selector_center shows spinner)

Accessibility & behavior notes

• Hit targets: ensure interactive elements are at least 40×40.
• Keyboard focus: add focus ring style (outline: 2px primary-500, 4px padding).
• Responsive behavior: for narrow widths (< 900px), collapse search_opt to a search icon and reduce max width of project_selector_center to 280.
• Export: mark logo and icons as SVG; export avatar as JPG/PNG if raster.