我们可以在 Xcode 中直接使用 Sketch UI 元素吗？

Question

I am new to sketch 3. I have a hand on experience with Xcode and iOS development.

My question is wether we can directly use sketch elements in xcode or sketch is only used for prototyping the UI?

For example, If I design Label with a text field in sketch then can I used it as UI Label and UITextField in Xcode?

Answer 1

In my experience as a designer that also develops in Xcode any solutions that claim to go directly from Sketch into Xcode either become vapourware after some time or don't provide a very good solution. I assume it's because Auto Layout is quite complicated and fragile.

It's best to just learn iOS development using Storyboards or possibly SwiftUI for layout. There are some elements that you can get from Sketch into Xcode such as colors, typography and iconography.

Here's a list of apps that can help you with that:

• Zeplin : Handoff designs and styleguides with accurate specs, assets, code snippets automatically. https://zeplin.io

• InVision : Prepare designs for development. https://www.invisionapp.com/feature/inspect

• Avocado : Open designs without design tools. Export images without preparing layers. Click on layers to get code. https://avocode.com/hand-off-and-inspect

• Flawless : A tool to compare the expected design and the real app right inside iOS Simulator (useful for designers who use Xcode or mobile developers). https://flawlessapp.io

• Sketch to Xcode : The fastest way to get colors from Sketch to Xcode. https://sketchtoxcode.com Disclaimer: I'm the maker of this app.

Answer 2

Typically speaking, you only use Sketch for prototyping the UI. However, I'm much more of a developer than a designer. So when I ended up needing to turn all of my artboards into UIKit code, I thought AUTOMATION! But no one had made a plugin to do that. So I did.

I created a Sketch Plugin ( http://sketchcodeflow.com ) that does just this. It transforms artboards into Objective-C UIKit and SpriteKit code. Even exports into asset catalogs for @1-3x. Simply #import and write one line of code in your ViewController and you got your app running. Of course, that's UI only. You'll have to write all logic yourself though there are a few features to help improve your experience such as animations and parallax.

As far as designing a Label and hoping it turns into a UILabel, unfortunately that's not supported yet. For now, you can only export the image of it as a png, which will be populated by a UIImageView or a UIButton.

Answer 3

没有办法在xcode中集成sketch元素，可以使用可以购买的sketch插件： https : //www.paintcodeapp.com/sketch

Answer 4

I had the same problem, the design was already prepared in the Sketch and wanted to get the code from it easily. My friends and I've working on a solution for converting design into UI codes, last 2 years.

We've developed Monday Hero platform to improve the development phase and actually save time for repetitive code. https://www.mondayhero.io

In Monday Hero, you can upload design and get responsive code with Storyboard, Xib or only code options. You can also select the elements on the design, group them as you wish for your code library and download it easily in like 15 minutes :) It was a dream of me to get the UI code that easily, I hope it can be also useful to you.