也可能是因为该应用程序是可扩展的,即您可以借助插件轻松向该应用程序添加新功能。

这可能是因为它直观,易学并且具有许多功能,使创建网站原型变得容易得多

Sketch在Web设计师和开发人员中越来越受欢迎

内容生成器,调色板选择器各不相同,它们可以帮助您显示图层测量或自动向图层添加填充。

这里有10个插件,可以帮助您在使用Sketch时提高工作效率

1.

基本上,您可以使用CSS将宽度,高度,不透明度,阴影,边框和背景应用于图层。

CSS Buddy允许您将CSS添加到Sketch工作区中的图层。

添加不带CSS类CSS内容,并观察您的图层是否成型。

对话框将提示您输入样式表。

安装此插件后,只需选择一个图层,然后从插件菜单中选择“ 应用于选定对象 ”即可。

适用于Web开发人员的10个免费Sketch插件

2.

现在,您可以使用Material Design调色板插件将其带入工作区。

Material Design有一个很棒的调色板。

如果您遵循“材料设计”的趋势,那么您会注意到的一个突出特点就是使用了独特的颜色。

选择“色相”,“值”或“色板”以生成适合您的项目的调色板。

该插件将在几秒钟内生成调色板,而您无需关闭工作区。

适用于Web开发人员的10个免费Sketch插件

3.

如果您正在与其他设计师或客户的参与下进行项目,这也是必要的,这样可以确保结果是每个人的目标。

有时,我们需要在注释中或通过文档显示我们的工作。

您可以重新排列评论,重新对齐,删除和切换评论可见性。

它将在工作区中添加一个附加的侧边栏,其中包含添加到设计中任何元素的注释。

Sketch Notebook是一个插件,可轻松在Sketch中记录您的设计。

适用于Web开发人员的10个免费Sketch插件

4.

**后,您可以设置图像的宽度,高度和其他信息。

对于Sketch,您可以使用Day Player从6个占位符图像服务(包括Placehold.it,LoremPixel和Unsplash)向您的Sketch工作区的任何层添加自定义占位符。

在设计中使用真实图像之前,我们经常使用占位符图像来加快设计过程。

适用于Web开发人员的10个免费Sketch插件

5.

对于样机设计非常有用,并且可以减少试图弄清楚如何现场生成数据的麻烦。

内容生成器可帮助您添加虚拟数据,例如化身,姓名,地理位置数据等。

我们已经有一个插件可以插入占位符图像,一般内容的插入效果如何?

要添加虚拟数据,只需选择一个图层,然后选择“ 插件”>“生成器” ,然后选择“ 地理位置” ,“ 角色”或“ 照片”。

适用于Web开发人员的10个免费Sketch插件

6.

可以通过键盘快捷键调出所有测量值。

Sketch Measure也可以打印图层属性,例如颜色,边框和不透明度。

您还将获得一层的填充和边距以及两层之间的距离。

它测量设计中一个或多个图层的长度或大小。

Sketch Measure是用于Sketch的测量工具。

适用于Web开发人员的10个免费Sketch插件

7.

然后可以将所需的填充量打入(0:0:0:0)文本层(在flex按钮组下)。

安装插件后,可以使用快捷键Command + J将文本转换为结构。

无论文本的长度如何,它将根据您提供的值自动调整填充。

动态按钮可帮助您轻松创建带有固定填充物的按钮。

适用于Web开发人员的10个免费Sketch插件

8.

结果是一组遵循印刷比例尺规则的缩放文本。

要使用此插件,只需选择文本层(单个或多个)或包含至少一个文本层的混合层,然后选择“ Plugin > Typographic Scale并在对话框中调整值。

Typography Scale是一个插件,用于将选定的文本图层转换为印刷比例。

适用于Web开发人员的10个免费Sketch插件

9.

观看视频演示以了解实际操作。

使用Modulizer,您可以使用键盘快捷键Shift + Command + M来控制设计中按钮,模块或区域的填充。您可以组合所有图层,将其分组,然后使用快捷方式根据填充值自动调整填充你需要。

适用于Web开发人员的10个免费Sketch插件

10.

它将group转换为div ,文本转换为p ,依此类推。

如果是这样,您可能应该获得Blade,这是一个Sketch插件,可以根据您的设计自动生成HTML文件。

您是否曾经考虑过将设计从草图转换为HTML?

查看此视频演示以了解内部外观。

使用Blade时,可以通过在图层上添加一个特殊名称(例如[btn]或input [text])来告诉插件生成哪个DOM元素,以便Blade知道它应该做什么。

适用于Web开发人员的10个免费Sketch插件

现在阅读:

适用于Web开发人员的10个免费Sketch插件

翻译自: https://www.hongkiat.com/blog/sketch-plugins/

相关文章: