Sketch to Code 101

Export your pixels to an Xcode project in minutes

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

Our mission at Anima is to empower designers to own their design. We are creating a tool for designers that enables designers to define, specify and architect all of the bits and pieces that encompasses User Interface/Experience and in the end automatically generate native code that is 1:1 to the original definition. This allows designers to be independent on other parties of the team such as engineering who sometimes have different priorities than the design team.

Sketch to Code allows you to get iOS code, Sliced assets, Fonts & Storyboards (UI layout) from a Sketch design.

Going from Sketch to Code in 2 minutes.

Overview of Exporting to Code

1. Specify Types
   While in Sketch every element is a Layer, we need to specify to which native Type it translates to.
2. Export to Code
   In Sketch Menu: Plugins -> Sketch to Code -> Export
3. Try it on your device
4. Hand-off

Let’s dive into the details of each step:

Specify View Types

Say we have a Sketch artboard with a Switch layer. Sketch to Code needs to know that it needs to be translated into the native view type that is a Switch. For example in iOS the type is UISwitch.

Step 1 — In Sketch Menu click “Show/Hide Panel”

1. Show the Panel
2. Select a Layer / Group
3. In Sketch to Code Panel select a Type

See video (2 minutes):

How to Specify Element Types (2 minutes)

2. Try it on your device

Using our Viewer iOS App, try it on your iPhone before sharing the code.
You can swipe left & right through the different screens.

Tap Preview

Your email will be pre-filled. Tap Send.

Anima Viewer iOS app allows us to preview our work as a native design.

Hand-off

Your UI Code Package is now on Anima Cloud, and you can hand it off to developers it in 2 ways:

1. Download Link — Get your code, it’s runnable using Xcode.
2. Push to GitHub — Treat the development team.

Hand-off the Download Link or create a GitHub Repo

Here is how it looks when the developer visits the Download Link:

https://beta.animaapp.com/c/7mqtbvQycMxJYl

Here is how a generated GitHub repo looks like:

https://github.com/AnimaApp/designer-news-ui-kit4

GitHub?

Anima UI Code Packages for iOS are compatible with both Cocoapods & Carthage package managers.

It means it would take one line of code and a few seconds to add it to the Xcode project. Same goes for design updates.

One Last Tip

Good code requires good names. Make sure you name your layers properly.

Keep it clean

Thanks for reading!

Questions?

Join our Slack or Facebook Group