Sketch 应用程序中是否有“生成 CSS/HTML”功能或插件

平面设计 css html 素描应用 插入
2022-01-10 01:48:51

我找到了一个完全可以做到这一点的脚本(为图层生成 CSS 和 HTML,并提供以 % 值导出它们的选项),并将 Photoshop 的 web-dev 工作减少了一半。现在我很好奇是否有人遇到过/使用插件,或者可以向我指出像 Sketch 应用程序这样的原生功能。没有这样的东西让我过渡到 Sketch 真的很痛苦。或者是 Sketch 的新手,我只是错过了 Sketch 使用 CSS 和 HTML 的方式在意识形态上有所不同。

2个回答

这可能不是您正在寻找的答案,但我发现它比将平庸的自动生成样式交给工程师更好。

选择性标记

我相信你已经发现了 Sketch 的上下文菜单 CSS 抓取器。您可以选择任意数量的对象,并且在剪贴板上获得 CSS 的速度比粘贴它的速度要快。

复制 CSS 属性 context men

当然没有选择器,它实际上只是 CSS 注释。每个块都由前面的注释使用层的名称调用,如下所示:

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

文件注释

Sketch Measure是一个插件,可以根据您的规格生成各种级别的注释。这里有一个演示视频基本思想是注释重要的数字,让开发者自己编写代码。

草图测量插件

超越注释

您也可以单独或组合尝试这些工具:

  • Zeplin创建一个独立的、可共享的 Sketch 设计版本供您的开发人员检查,并根据需要提取规格。
  • Marvel是一款导入 Sketch 文件的原型制作工具。没有什么能像交互式原型那样交流!

实验性 HTML 生成器

我从未使用过它,它显然处于开发的早期阶段,但是Blade 插件看起来很有前途。

Blade 是一个用于自动生成 HTML 的 Sketch 3 插件。它将为组生成标签 <div>,为文本生成标签 <p> 等。

在此处输入图像描述

请参阅以下链接 http://blog.mengto.com/the-best-hidden-features-in-sketch/

关注 Meng To 的博客,及时了解有趣的 Sketch 教程、提示甚至技巧。 http://blog.mengto.com/ https://designcode.io/