design

“Craft” New amazing plugin for Sketch and Photoshop

 

 

6mt20160212

 

Today, InVision is introducing Craft, a suite of three new plugins for Sketch and Photoshop to held developers and designers with their UI mockups.

The three plugins Type, Photos and Duplicate work in unison, but command three unique tenets of the design process.

Type automatically populates your design from a database of names, email addresses, countries, cities, zip codes or other identifiable information. It helps create a contextually relevant design, which adds a personalized touch if you’re doing freelance work for a client.

Photos lets you add images from your computer, Dropbox or Unsplash with one click. If you’ve got some stock images saved for wire framing apps or websites, Photos makes short work of adding them.

Finally, Duplicate lets you copy any element for a new template. It captures the design with “pixel-perfect precision,” which you can use as many times as you need.

• Styles, which exists within the new Craft Manager, creates a new page within Sketch with the project’s color palette, fonts, and text styles.

• Users can also include a host of custom elements, like buttons, symbols, and more.

• The Styles-generated guide syncs to projects, so when designers make a change to the guide, the change applies across the entire project.

  • Styles is exclusively for Sketch users. Craft is 100% free. When users update or download Craft, they will get Styles and the new Craft Manager too.


Craft有什么牛逼的功能?

因为米田用的Sketch为主,所以内容也是以此为主。Photoshop的功能是完全一致的,就不再重复演示了。

文本自动填充

简单一句话,能填充很多英文类字符串。包括姓名,大标题,文章,日期,电邮,城市,地址,国家,货币等等都可以。不过这块因为不是英文,还是显得有点鸡肋。

5mt20160212那怎么办?

还有记得那个标签栏有个”web”的选项么?点一下它,输入你认为可能能找到对应东西的网站。具体如下图,只要框选的内容就会被自动填充了。
这个功能太实用了,泪流满面。终于不用来回切换程序了。

4mt20160212具体动画演示,请看下图:

9mt20160212图片自动填充

我们可以从Dropbox的,电脑文件夹或网络导入真实不重复的照片,到设计的界面里。

craft插件可以将真实图像快速添加到界面。并且提供足够多的添加选择方式。

1)从Unsplash随机添加图像。

2)从自己的文件夹,甚至是图像中抓取的图像。

3)从任何网站添加图像,方式和文本填充方式一致。(注意图像使用版权)

7mt20160212▲ Cratf图像填充演示——Unsplash填充

8mt20160212▲ Cratf图像填充演示——从任一网页填充

重复元素自动变化填充

这是Craft插件最吸引人的地方,真正的方便和节省时间的功能。以往我们要复制元素,还要考虑份数和间距等等问题,最简单的方式也只是“Alt +拖动”,当然有部分插件能实现快速复制。

但是Craft的复制功能的最大好处是,它会自动完成上述所有的功能外,还自动替换图像和文本。完全不需要手动处理,就能实现完全的高保真界面。 真的太酷了!

下面就是见证奇迹的时刻。

10mt20160212

Craft的安装步骤:

1)下载安装包,解压缩

根据自己是Win或Mac系统点击对应的文件(如下图)。如果你用的是Sketch就点击Sketch,如果是Photoshop也是同理。当然两个都点击都可以。

3mt201602122)打开Sketch或Photoshop,看看是否安装成功

打开Sketch,会发现出现新的面板,表示已经成功安装插件。

2mt20160212打开Photoshop,在窗口>扩展功能>Duplicate/Photo/Type出现,表示已经成功安装插件。

1mt20160212

Craft的快捷键

它最大的用处就是填充照片,文本虽然也可以填充,但是基本是英文的文本,用处不是特别大。

  • 神功能A:插入文件夹的图品(最牛逼的功能): Shift + Ctrl +1
  • 神功能B:随机从Unsplash插入图片(Unsplash是质量很好的壁纸库) Shift + Ctrl + 3
  • 神功能C:从Drapbox插入图片(因为国内被墙,用处没有那么大了) Shift + Ctrl + 2

For download Craft please visit:
http://labs.invisionapp.com/craft

Special thanks to: 米田miten

read more
hanna bai“Craft” New amazing plugin for Sketch and Photoshop