Figma
FigmaCollaborative interface design with generative drafting and code output
by Framer
Design and publish production websites without writing code
Framer is a website builder that works like a design tool. You lay out pages on a canvas with real typography, responsive breakpoints and animation controls, and publish directly to hosting with a custom domain, so the design is the site rather than a mock-up handed to a developer. Generative features draft a starting page from a prompt, rewrite copy, generate images and translate a site into other languages. A content management system handles blogs and collections, and components allow reuse across pages. It suits designers, startups and agencies building marketing sites quickly. The limitations are depth and cost: it is built for marketing and portfolio sites rather than complex applications, advanced interactions require custom code components, and pricing combines a site plan with editor seats, which adds up for agencies running many client sites.
Sign up at framer.com; free sites are published on a Framer subdomain, and a custom domain requires a paid site plan. Start from a template rather than the generative page generator, because templates are better structured and easier to adapt, and use the generator for individual sections when you are stuck. Learn the layout system early: stacks, grids and breakpoints determine whether the site holds together on mobile, and skipping this produces pages that break at smaller widths. Set up styles for text and colours at the start so global changes stay simple. The content management system is worth using for anything with repeated items, such as blog posts or case studies. Practical points: check every breakpoint before publishing, since responsive behaviour is manual rather than automatic; and effects and heavy images affect page speed, so test performance before launching a site that matters for search traffic. Connect a custom domain early if the site will rank in search, because changing addresses later costs you accumulated traffic signals.
Collaborative interface design with generative drafting and code output
Generates React interfaces and full-stack apps from prompts or designs
Template-based design platform with generative image and video tools
Builds full web applications from a conversation, with code you can export