Figma AI Landing

Preview

Figma AI Landing

Figma AI Landing Template

The AI landing includes the main page UI for the LLM/AI application. The layout in Figma includes a marketplace with a directory of popular chatbots and extensions. The layout includes a search section to find the needed extension faster.

The template is composed of Search and the Sidebar Menu components, which organize the layout and present recent chatbot queries. Pair it with the AI chat template for the conversation screen the directory opens into.

The template is a GPTs-style directory page in desktop, tablet and mobile frames: a left sidebar with Images, Files and Branches links, Recent and Starred chat history, a search field, category tabs, a Featured grid of four cards, a Trending list of four rows and an Upgrade to Pro footer.

AI Landing AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build an AI assistant landing page in Figma for desktop, tablet and mobile. Left sidebar: logo, a Search (⌘K) field, tabs Recent, Starred and View All with a count badge, nav rows Images, Files, Branches with a count, and More, then a list of recent chat prompts truncated to one line with the active one filled in brand blue with white text, a Starred section with its own View All, and a footer with an Upgrade to Pro button and a Beta pill. Main column: GPTs heading, a two-line description, a full-width Search GPTs field, category tabs Top Picks, Writing, Productivity, Research & Analysis, Education and Programming with an underline on the active tab, a Featured section with four cards in a 2x2 grid (thumbnail, name, two-line description, By author), a Trending section with four rows of avatar, name and description, and a View more secondary button. On tablet narrow the sidebar; on mobile replace it with a hamburger and stack the sections in one column.

Source