线框，HTML到SPA React / Angular的Web工作流的最佳方式

Question

我是前端Web开发的新手。我和一个制作模型（没有html）线框的设计师合作，最终产品是React / Angular单页面应用程序。

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

感谢。

Answer 1

Hi Mitch欢迎来到web dev！

所以我不能说我完全推荐这个工作流程，只是因为你不想编写和重写代码并将其转化为组件。

我自己与设计师合作，每天密切合作。如果你的设计师正在使用草图（他喜欢），他可以创建线框和原型。我们的工作流程类似于您的建议，这就是我们的工作：

1. 我们需要设计和构建
的功能请求
2. 他创建了一个模型/线框
3. 然后他把它鞭打成原型（可选）
4. 从那里我将原型转变为工作代码（我们使用角度）
5. 当我认为我已经重新创建了他的原型时，我要求他仔细查看并从那里进行讨论。

对我来说，很容易回过头来修改一些CSS或更改一些HTML，只需保持一切井然有序并做好评论，这样您就可以在应用程序增长时轻松更改内容。

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

我希望这有助于您和您的设计师提出您喜欢的工作流程！

Answer 2

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

然后我安装并启用 react 插件，当我保存项目时，它会导出 react 代码。然后我研究 React 代码和组件。这是 react 插件的 github repository。