javascript - 从 Sketch 到 ReacJs 有哪些可用的选项?
问题描述
有哪些选项可用于将 Sketch for Mac UX 设计导出到 ReactJS 组件以供编码团队使用。
从这些选项中,推荐的选项是什么,每个选项的优缺点是什么?
我们需要能够自动化 ReactJs 组件的编码工作、支持flex
和提供对 Web 应用程序和react-native
代码的支持的东西。
我们的场景是一个 SaaS 应用程序,我们在其中进行所有编码(html、css 和 js),我们希望使用 Sketch 更好地开发 UX,然后为我们的 UX 组件生成基本代码,供我们的编码团队使用。
解决方案
我们已经开发网络和应用程序多年,也有同样的问题。我们有草图设计,将设计编码到 Web 和应用程序中确实需要很多时间。
目前,减轻痛苦的最佳工具是提高生产力和通信开销的切换工具。像Anima这样的工具很少,它对原型设计很有好处,但在代码修改和集成方面并不容易采用。最后,我们发现质量代码的关键是组的正确结构和布局,这在 Sketch 设计文件中不容易表示。因此,我们的解决方案将关键决策留给用户来决定其响应行为的组结构,并且我们提供了一种直观且快速的方式来创建反应组件。在我们早期的实验中,在不牺牲代码质量的情况下,它比手动编码要快得多。
您可以通过 github 查看导出代码
https://github.com/px2code/pxCode-Sketch-to-React-Example1
或者直接勾选codesandbox来预览和编辑代码
https://codesandbox.io/s/pxcode-example-s9sxx?file=/src/components/Card.js
推荐阅读
- javascript - 如何通过布局(顶层)中呈现的模式处理从列表中删除项目?
- ios - 加载新消息 Swift 4.2 和 Firebase
- c# - 从子 MVC 站点更新 Web 表单站点中的会话
- php - 使用php将数字向下舍入到最接近的百分之一
- r - ggplot自定义主题中的条件参数
- django - 链接查询时 QuerySet 结果重复
- django - 如何在 html 中定义 vue-router 组件?
- python - 如何在 Anaconda 上安装 psycopg2?
- angular - 表情符号的角度输入验证
- ansible - 遍历所有 Jinja 模板文件并复制到目标目录