User interface 草图如何与移动Web开发相关联？

我对移动应用程序开发和Sketch都是新手，我很难理解Sketch如何用于开发移动应用程序

我正在研究React Native来开发应用程序，但据我所知，在React中设置元素样式的唯一方法是通过css文件，我不知道如何使用Sketch来设计我的应用程序

我是否完全遗漏了什么，或者是否有可能在React Native中开发应用程序，并使用Sketch设计应用程序中的元素

---

谢谢

草图是一种设计工具，就像Photoshop或illustrator一样。但由于多种原因，它比这两种工具都要好得多

它创建的设计只有代码是可能的。Photoshop最初是为照片编辑而创建的，而您可以在那里创建的许多效果是无法通过代码创建的

它非常简单，只有UI设计所需的工具。无笔刷工具、涂抹工具等

基于矢量的工具您可以将任何资源导出为svg或复制代码

您还可以将样式复制为CSS并使用。不需要样式文档

您可以在编写代码之前对交互式模型进行原型化和测试。这是最大的优势，您可以在花时间编写应用程序之前对其进行实际测试

打开文件格式。许多第三方工具可以读取草图文件，您可以将设计扩展到下一个级别。例如，您可以在InVision中上载原型，并将设计作为云链接共享

---

这就是为什么你应该选择素描的一些原因。但除此之外，它只是另一种设计工具。它无法为您创建功能性应用程序。

有几种工具专注于将设计文件转换为移动应用程序

• 超新星-绘制反应本机和本机应用程序
• BuilderX-反应草图/反应本机
• XD到颤振-您可以将草图导入XD并转换为颤振应用程序
• pxCode—我们开发的解决方案，将草图转换为react/react native

这一领域相对较新，因为设计文件在代码方面没有良好的结构。这就是为什么映射如此困难，代码质量不容易保持的原因。

---

这就是为什么经过多次迭代和分析后，我们发现关键结构应该留给前端工程师的经验和专业人员来解决，而不是自动化任务的原因。草图只供设计师使用。不能将草图设计转换为构件。为了澄清，React Native不使用CSS，因为运行应用程序的不是浏览器，而是属性名称非常相似。谢谢你的回答！这是否意味着前端开发人员手动设计其网站/应用程序的样式，以模仿Sketch中创建的UI设计。设计师用字体、颜色、空格、边距和所有你需要的东西在草图中绘制每个屏幕，你的开发人员试图用相同的值来模仿它们。