In this guide we are going to take a look at how developers in your Team can see your design Specs using Anima.
- How to share Specs
- Viewing Pins Specs
- Viewing Stacks Specs
- Your Design Sketch, Adobe XD, or Figma file
- Download Anima plugin for Sketch, or Anima plugin for Adobe XD Anima plugin for Figma
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 Design to Anima Project
- Click Preview in Browser
- Select the Project/Team you would like to Sync it to if you haven't already.
- When the Preview opens, click Sync to Project in the top right corner.
Step 2: Invite to Project
- Click Share in the top right corner of the screen
- Assign your team if not already assigned
- Optional: Invite guests who are not team members to view
- If developers do not need to edit designs, add them as Viewers, it’s free!
Step 3: See Specs
- Once the design is synced to the project, click on the screen you want to see the Specs
- Select the third icon (Specs) from the navigation bar
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.
This screenshot shows that in Sketch, in the selected 'MenuButton' layer, the Top and Right Pins are selected.
This 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.
It Works With Stacks as Well
What Designers see in Sketch👇
What Developers see in Browser 👇
- Anima 101 – Video Tutorials, FAQs, and Full Documentation
- Creating a High-Fidelity Prototyping in Sketch