How to Create a Responsive Landing Page with Sketch

Anima Toolkit 101

Anima App
Anima App
Jun 27, 2017 · 4 min read

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

On our mission to empower designers, we are continuously pushing the envelope on what designers can achieve without writing code.

On this post

Let’s Begin!

First, download Anima for Sketch, Anima for Adobe XD or Anima for Figma

Need a Hero?

A beautiful end-to-end image at the top of your page sets the atmosphere. The easiest way to achieve that is to put a very wide image, overflowing the artboard and centered.

If you want it to stretch, checkout tips in the bottom.

Design Responsively 🍻

In Anima each artboard is a web page. In order to create responsive design that fits both mobile and desktop we’ll use the Breakpoints feature.

We’ll select one of the artboards, under Prototype tab > Flow, click the +Breakpoints button and mark the the 2nd to say that they are actually the same webpage (but for different screen sizes).

Connecting two artboards as the same web page (different sizes)

The thumb rule here is that artboard will never shrink, only grow up to the next the next artboard width.

For example, if I set the Artboards width to 320px, 768px and 1024px:

The displayed artboard will change at browser width 1023px

In order to pin stuff to sides or set more complex rules on how a 320px artboard looks when presented on 480px screen, use Layout Tab > Pins.

Forms — Talk to your Users

Mostly, landing pages have a contact or a signup form. It’s super easy to make one with Anima.

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

Important — Set your Home

When using multiple artboards (multiple websites pages) let Anima know your home-page expanding the panel, selecting home artboard & Prototype Tab > Flow > Set as Home.

Select Artboard, Prototype Tab > Flow > Set as Home

Preview!

Ready for the fun part? Click Preview in Browser to watch it comes to life 🎉

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

Ready for sharing?

In browser, click Sync to add it to your project — Drafts are private to allow you polishing your website without sharing it half baked.

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

As always, we’re excited to hear your feedback!

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram, and vote for new features at UserVoice.

Stay creative!
❤️ Anima team

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store