Design for Web

From websites to web apps, validate your design ideas faster with Framer. Easily scale your artboards to different sizes, add animations, use readymade icon sets, and more.

Start designing and prototyping for the web with Framer today.

Download Example

Web design, made smarter.

Design for different resolutions, then easily resize your artboards to check scalability. Our smart layout and hierarchy features and readymade Feather and Material icon sets help you design better and faster.

  • Insert shapes, text and images

  • Smart layout & hierarchy

  • Built-in icon sets

Perfect CSS in just one click.

Since Framer is a web-based design tool, all of your styling translates into perfect, copiable CSS. Plus, you can import libraries with NPM or insert dynamic data through APIs.

Preview your designs in context.

Enable scrolling and add simple animations, then upload to Framer Cloud to view your designs directly in the browser. Gather feedback and validate your ideas by sharing the Cloud link with collegues or clients.


Start tinkering with our web design template or download our web and wireframe kit.

Web Kit

Download the Web Kit and start designing your next web project.

Wireframe Kit

Download the Wireframe Kit and start wireframing.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.