【问题标题】:Identifying HTML Elements from Sketch design从 Sketch 设计中识别 HTML 元素
【发布时间】:2020-07-08 14:35:48
【问题描述】:

这里是前端开发人员,如果之前已经问过这个问题,请原谅我。当从草图设计中编码 HTML/CSS 时,有没有办法确定哪种 html 元素对应于草图组件?

当我使用 Anima 或类似工具导出到 HTML 时,几乎所有内容都成为 <div> 元素。一些草图组件是不言自明的,例如链接<a><images><button> 等。例如,当涉及到文本时,有什么方法可以判断它是<div><span>、@987654327 @元素等?在这种情况下我只需要使用我的判断吗?

欢迎对此提供任何指导。谢谢!

【问题讨论】:

  • 你自己判断吧。 Sketch 如何知道您需要<section> 还是只需要<div>
  • 好点@jdickel - 我想这是有道理的,为什么这些草图到 HTML 转换工具使一切都成为一个 div。这很烦人,因为我可以从草图设计中导出所有 CSS,但这可能会根据使用的元素和/或任何全局样式而改变
  • 我只是从头开始重新创建所有内容,而不是从 Sketch 中导出 HTML(不押韵)。所以我可以创建/实现我选择的网格/框架。
  • @jdickel - 是的,我认为这就是最终的结果。哦,好吧,捷径就这么多了

标签: html user-interface frontend sketchapp sketch-3


【解决方案1】:

Desech Studio 是帮助您导入草图设计文件的好工具。这将创建一个干净的 html 结构,但很可能如果您手动执行,它会稍微好一些。元素也使用 css 网格定位,而不是绝对位置。

这是一个很好的起点,否则您必须通过查看如何将内容拆分为网格并创建必要的网格来手动完成。有了经验,你就掌握了窍门。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-06-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多