Web Workflow for Wireframe、HTML、SPA React/Angular的最佳方式

Question

我是新来的前端网络开发。我与一位设计师一起工作，他制作了样机(无html)线框，最终的产品是一个React/Angular单页面应用程序。

我在考虑这个工作流程。1)获取样机线框2)在HTML/CSS中重新创建它，并与设计师协作进行快速更改。3)完成后，获取HTML并将其转换为React/Angular单页面应用程序。

谢谢。

Answer 1

嗨，米奇，欢迎来到web dev！

所以我不能确切地说我会推荐这个工作流程，仅仅是因为你不想写和重写代码并把它变成组件。

我和一个设计师一起工作，我们每天都密切合作。如果你的设计师使用草图(他很喜欢)，他可以创建线框和原型。我们的工作流程与您提出的类似，这就是我们要做的：

1. 我们有一个功能需求，我们需要设计和构建
2. 他创建了一个模型/线框图
3. ，然后他将其转换为原型代码在那里我将原型转换为工作代码(我们使用angular)
4. 当我认为我已经重新创建了他的原型时，我要求他查看它，我们从那里讨论。

<代码>G211

对我来说，回去修复一些CSS或更改一些HTML是很容易的，只要保持一切都有条理和良好的注释，这样你就可以在未来随着应用程序的发展轻松地更改内容。

我建议的另一件事是，你应该创建自己的线框形式，这样你就可以看到你的组件是如何放置的，以及如何相互作用的。

我希望这能帮助你和你的设计师想出一个你们都喜欢的工作流程！

Answer 2

这是我的工作流程。我将figma，sketch，adobexd设计文件导入到Desech Studio中，以获得一个干净的带有css网格的html结构。然后我需要调整边距和大小，我完成了转换。最后，我致力于网站的响应性。

然后我安装并启用react插件，当我保存项目时，它将导出react代码。然后我开始编写react代码和组件。下面是react插件的github repository。