Introducing Auto-Layout “Export Specs”

Anima App
Anima App
Sep 17, 2018 · 3 min read
Image for post
Image for post

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

Auto-Layout is a feature in Anima Toolkit for Sketch. It allows designers to make a design responsive, by specifying constraints such as pinning, centering, sizing and even stacking.

When we launched Auto-Layout, the design community was excited about the new powerful way to specify responsive designs.

Among the popular requests in regards to Auto-Layout was a way to communicate the Auto-Layout specification to developers.

Today we are happy to announce that we have rolled out a new feature called “Export Specs”, which does exactly that.

Image for post
Image for post
New “Export Specs” button in Anima Toolkit

How It Works

Once you’ve specified the Auto-Layout properties, click “Export Specs”.

This will present a dialog that lets you create or select an existing project. All you need to specify is the name of your project.

Image for post
Image for post
Specify a project for the specs and click Export

Now let’s take a look at how a Sketch design with Auto-Layout looks once exported using “Export Specs”.

Image for post
Image for post

Notice above that in the selected “header” layer, the Top and Center Horizontally pins are selected.

Clicking “Export Specs” will upload the design and Auto-Layout specs, and present with a link to a “Handoff” webpage.

Image for post
Image for post

Next step is to open the link in a Browser and inviting developers to view the specs. Notice that selecting the same “header” layer in the browser, reveals the Auto-Layout specs as well.

Image for post
Image for post
The selected “header” layer is pinned to Top and Centered Horizontally

Stacks

And it works with Stacks as well!

Image for post
Image for post
What Designers see in Sketch ☝️
Image for post
Image for post
What Developers see in Browser ☝️
Image for post
Image for post
Design to code, automated.

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