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

Can we use sketch UI elements directly into Xcode?

提问by ios nerd

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

我是 Sketch 3 的新手。我有 Xcode 和 iOS 开发方面的经验。

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

我的问题是我们可以直接在 xcode 中使用草图元素还是草图仅用于制作 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?

例如，如果我在草图中设计带有文本字段的标签，那么我可以将它用作 Xcode 中的 UI 标签和 UITextField 吗？

回答by Kjell

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.

通常来说，你只使用 Sketch 来制作 UI 原型。然而，我更像是一名开发人员而不是一名设计师。因此，当我最终需要将所有画板转换为 UIKit 代码时，我想到了自动化！但是没有人制作插件来做到这一点。所以我做了。

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.

我创建了一个 Sketch 插件 ( http://sketchcodeflow.com) 来做到这一点。它将画板转换为 Objective-C UIKit 和 SpriteKit 代码。甚至可以导出到@1-3x 的资产目录。只需#import 并在您的 ViewController 中编写一行代码，您就可以运行您的应用程序。当然，那只是用户界面。尽管有一些功能可以帮助改善您的体验，例如动画和视差，但您必须自己编写所有逻辑。

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.

至于设计一个标签并希望它变成一个 UILabel，不幸的是，目前还不支持。目前，您只能将其图像导出为 png，它将由 UIImageView 或 UIButton 填充。

回答by Vash

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.

根据我作为一名也在 Xcode 中开发的设计师的经验，任何声称可以直接从 Sketch 进入 Xcode 的解决方案要么在一段时间后变成蒸汽软件，要么没有提供很好的解决方案。我认为这是因为自动布局非常复杂和脆弱。

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.

最好只学习使用 Storyboards 或 SwiftUI 进行布局的 iOS 开发。您可以从 Sketch 中获取一些元素到 Xcode 中，例如颜色、排版和图标。

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.comDisclaimer: I'm the maker of this app.

• Zeplin：切换设计和styleguides准确规范，资产，自动代码片断。https://zeplin.io

• InVision：为开发准备设计。https://www.invisionapp.com/feature/inspect

• Avocado：无需设计工具的开放式设计。无需准备图层即可导出图像。单击图层以获取代码。 https://avocode.com/hand-off-and-inspect

• Flawless：在 iOS 模拟器中比较预期设计和真实应用程序的工具（对于使用 Xcode 的设计人员或移动开发人员很有用）。https://flawlessapp.io

• Sketch 到 Xcode：从 Sketch 到 Xcode 获取颜色的最快方法。https://sketchtoxcode.com免责声明：我是这个应用程序的制造商。

回答by Marco Santarossa

There is not a way to integrate the sketch elements in xcode, you can use a sketch plug-in you can buy: https://www.paintcodeapp.com/sketch

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