Recraft Editor UI Design Pattern

Recraft logo
Recraft Editor

Artificial Intelligence

This is the editor design from Recraft, a artificial intelligence application. Recraft recraft is an AI image and design generation tool for creating vector art, illustrations, icons, logos, mockups and photos in a consistent brand style. Its UI covers an infinite canvas editor with Create and Chat panels, a prompt panel with model and style selectors, an Explore styles library and custom styles, image tools for remove background, erase, outpaint, vectorize, enhance and upscale, generation history, a community feed, a free image-to-SVG converter, and Free, Basic, Pro and Teams plans billed in credits. Editor UI designs from leading SaaS products. Rich text editors, code editors, drag-and-drop builders, and canvas tools. We have 2 editor screenshots from Recraft showing different states and variations of this pattern.

Recraft infinite canvas editor with Create and Chat panel, quick actions like Animate a still and Draw an idea set, and a bottom toolbar

Canvas editor — infinite board with Create and Chat

Recraft canvas showing a generated flat vector SaaS dashboard illustration with variations

Generated result — image on canvas