Specs

Introduction

In this guide we are going to take a look at how developers in your Team can see your design Specs using Anima.

Guide Overview

Prerequisites:

How to Share Specs

Once your design is finished and you’ve specified Layout properties, it is time to share Specs with developers.

Step 1: Sync

  1. Go to the Export tab of the Anima panel
  2. In Specs, click Sync
  3. Select the Project/Team you would like to Sync it to
  4. Click Sync, and then Open

Step 2: Share

  1. Click Share in the top right corner of the screen
  2. Assign your team if not already assigned
  3. Optional: Invite guests which are not team members to view

Tip:

If developers do not need to edit designs, add them as Viewers, it’s free!

Invite Guests

The screenshot below shows how to Sync your design to your Project

Via Sketch

The screenshot belowshows how to access your design Specs for your Project

Specs Via Projects

The screenshot below shows how to share your design Specs

Share Via Specs

What Developer Can Inspect in Specs

Now let’s take a look at how a Sketch design with Anima Layout features look in the Specs inspector.

The screenshot below shows that in Sketch, in the selected ‘MenuButton’ layer, the Top and Right Pins are selected.

Pins in Sketch

The below screenshot of the Specs in the browser shows that selecting the same “MenuButton” layer in the browser reveals the Layout specs as well.

It also shows that the selected “MenuButton” layer is pinned to Top and Right by 20px.

Pin Features in Specs

It Works With Stacks as Well

What Designers see in Sketch:

Stack in Sketch

What Developers see in Browser:

Stack Features in Specs