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.
Overview of Exporting to Code
- Specify Types
While in Sketch every element is a Layer, we need to specify to which native Type it translates to. - Export to Code
In Sketch Menu: Plugins -> Sketch to Code -> Export - Try it on your device
- 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.
- Show the Panel
- Select a Layer / Group
- In Sketch to Code Panel select a Type
See video (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.
Hand-off
Your UI Code Package is now on Anima Cloud, and you can hand it off to developers it in 2 ways:
- Download Link — Get your code, it’s runnable using Xcode.
- Push to GitHub — Treat the development team.
Here is how it looks when the developer visits the Download Link:
Here is how a generated GitHub repo looks like:
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.
Thanks for reading!
Questions?
Join our Slack or Facebook Group