How to Create a Responsive Landing Page with Sketch

Anima Toolkit 101

Anima App
Anima App
Jun 27, 2017 · 4 min read
Create Responsive and Interactive High-Fidelity Prototypes, and Export HTML. All Inside Sketch

On this post

Let’s Begin!

Need a Hero?

Design Responsively 🍻

Connecting two artboards as the same web page (different sizes)
The displayed artboard will change at browser width 1023px

Forms — Talk to your Users

Creating a Form — Select text layers to be the input, then a layer to be a submit button

Important — Set your Home

Select Artboard, Prototype Tab > Flow > Set as Home

Preview!

Watch your design becomes a web page
Click to see the live result

Ready for sharing?

Click Sync to sync your draft into the Project
Click Share to get to the share panel
Invite stakeholders, share with the team, or get a public link

Tips

Optional: Pin hero to make it stretch
For example, the hero image is a large photo, best practice would be to use JPG format with 1x.

Downloads


Learn more

Create Responsive and Interactive High-Fidelity Prototypes, and Export HTML. All Inside Sketch

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Thanks to Or Arbel.

Anima App

Written by

Anima App

Empowering designers. Changing the game.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond