Sketch 有哪些插件值得推薦?

sketch被越來越多的設計師使用,配合他的插件也有不少,有沒有值得推薦的一些插件呢?


12月28日更新————————
Marketch ( for UI)
來源tudou527/marketch · GitHub

用過Zeplin的同學基本淚流滿面,而這個免費插件可以讓你泣不成聲。

直接在本地生成html,非常便捷查看尺寸顏色等參數,和Zeplin一樣的思路。不僅免費,而且公司也不用擔心雲端的安全/隱私問題了。
如果說Sketch Mearsure可以節省你一杯咖啡的時間,這玩意可以節省你一頓飯的時間。

真正的徹底告別標記尺寸和顏色等dirty work。
做了多年ERP的我明白了一個道理,能用機器代勞的活一定不要人來干。大家的時間都很寶貴,我們還是做點更有意義的事情吧。

以下原文——————————

經常用這幾個,感到非常不錯,推薦一下。

AEFlowchart (for UX)
來源 tadija/AEFlowchart · GitHub
Flowchart 顧名思義,就是出流程圖的。

共有四種控制項樣式 Decision | Input Output | Process | Start End
自動生成對應樣式,一鍵連接所有元素。
注意:生成連線為1px,且圖層默認被鎖定。顏色過淺,有時候需要自己調整下border顏色,大神可以自己去調整腳本里的相關參數。
Sketch 升級到3.2.2之後經常沒法自動連線,比較苦惱。

Content Generator Sketch Plugin (for UI/UX)
來源 timuric/Content-generator-sketch-plugin · GitHub
這個插件真是酷炫至極

可以自動填充地名人名圖片和長文本。
做Contact Card時候簡直像開掛一般高效。

填充圖片還分男女,人名也分性別。還能自動生成郵箱和電話

可以節省大量時間,讓你的Mockup看起來更加逼真。

Sketch Measure (for UI)
來源utom/sketch-measure · GitHub
強烈推薦,滿星好評!
解救廣大UI Designer於水深火熱之中的神器,能夠徹底解決開發人員和設計師之間溝通不暢的問題。
UI Designer最終產出物少不了Visual Guideline. 製作這份文檔真是龐大的工程。
每個控制項,頁面的尺寸標記,顏色標記還有字型大小標記,最終頁面的實現效果完全取決於這份文檔的細膩程度。通常,有了這份文檔,開發嚴格執行,最終頁面還原度還是非常之高的。
這個插件就是可以在頁面上自動標記出相關參數。

當然,不同的公司在這個環節執行的方法各不相同,標記的方法也不一樣。
Case by case的來看,這款插件還是十分實用的。曾用過Markman和Pxcook,總是覺得還是有不盡人意的地方。
這個插件標記起來不僅僅的自動的,而且在源文件里直接標記...
整齊的文檔,帶著標記交給開發。相互之間還有什麼好抱怨的呢?

Sketch Notebook Master (for UX)
來源marcosvidal/Sketch-Notebook · GitHub

交互設計師都想讓自己的mockup變得更加整潔,但為自己的設計寫上注釋是少不了的事情。整理格式會花很多時間,不整理看起來又很亂,說明太多經常會蓋住相關內容。
這個插件可以自動生成一個邊欄用來寫相關注釋。選中相關控制項,即可生成標記icon,右側生成comment. comment可以自動排序對齊,十分方便快捷。

Taobao Image Sketch Plugin (for UI)
來源DOWNLOAD | LIAO ZCHENG

來自Taobao UED的優秀插件,基於Content Generator Sketch Plugin 修改的接地氣的版本。
經常做電商平台產品的童鞋用起來還是非常不錯的。日常工作主要用的就是這些插件,全免費。
Sketch真的是不可多得的優秀軟體。
99美刀,你值得擁有~


用Sketch兩年多,以下是一些我常用的插件

1. Sketch Toolbox

下載地址:Sketch Toolbox

——我使用這個插件(其實應該說是一個軟體吧)來管理我大部分的Sketch插件

2. Content Generator

下載地址:https://github.com/timuric/Content-generator-sketch-plugin

——用於生成人名、頭像、郵件、佔位文字、地理位置、隨機數字等等

3. Subtle Patterns

下載地址:Subtle Patterns Photoshop plugin (是一款收費插件)

——用於給圖層添加一些微妙的紋理效果

3. Rename It

下載地址:GitHub - rodi01/RenameIt: Sketch plugin to rename layers like a boss

——用於快速重命名圖層,比如可以使用例如「%n」這樣的語法快速命名一個連續列表,也可以自動使用圖層尺寸來給圖層命名,可以很方便地使用「ABC Icon 36px * 36px」來導出Asset文件。

4. Sketch Arrange Artboard

下載地址:GitHub - kenmoore/sketch-arrange-artboards: Layout all artboards in a grid with user-specified number of rows

——幫助整理你混亂的Sketch Artboards

5. Sort Me

下載地址:GitHub - romashamin/sort-me-sketch: Sort artboards and layers by name

——根據圖層/畫布名字排序,配合Rename It使用效果拔群!

6. Icon Fonts

下載地址:GitHub - keremciu/sketch-iconfont: This plugin helps you easily insert and manage icons from icon fonts.

——直接在Sketch里添加FontAwesome的圖標

7. Find and Replace

下載地址:GitHub - mscodemonkey/Sketch-Find-And-Replace: Sketch 3 plugin to do a find and replace on text within layers

——對Typo狂魔設計師(比如我)簡直是天大福音!媽媽再也不擔心我在50張Mock里打同一個錯別字了!

8. Sketch Constraints

下載地址:GitHub - bouchenoiremarc/Sketch-Constraints: A plugin that integrates constraints in Sketch to lay out layers.

——通過標註父子圖層間的關係,我們可以讓Sketch設計文件也可以Adaptive Layout,快速將同一套設計擴展到多種尺寸。

9. Material Design Color Palette

下載地址:t32k/material-design-color-palette

——這個不用解釋啦,在Sketch里快速生成Material Design顏色板的利器

10. Measure

下載地址:GitHub - utom/sketch-measure: A measure tool for measurements amp;amp; design specs.

——在Zeplin和Marketch等工具出現前的Spec標註神器,但即使有了Zeplin和Marketch,我還是會有時候用它來手動標一些自動標註器說不清楚的Spec。

11. Marketch

下載地址:GitHub - tudou527/marketch: Marketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.

——Zeplin是一個神器,但是很多公司(尤其是大公司)出於商業機密的考慮不允許設計師使用在線的Spec標註軟體,Marketch就是一個幾乎完美的替代品,它是一個可交互的Spec文檔,選擇某個元素後,各項尺寸都會顯示出來,右邊欄甚至還有寫好的CSS Code。自從用了它,和我廠的工程師溝通腰也不疼了、腿也不酸了!

12. Magic Mirror

下載地址:http://magicmirror.design/

——設計師有時候想把Mock放在手機/Mac設備上來營造某種效果(逼格),通常的解決辦法是在Sketch里導出設計稿然後在Photoshop再處理。而Magic Mirror這款插件幫助你在Sketch里實現這一效果,再也不用切換到Photoshop來做Dribbble圖啦!

13. InVision Craft

下載地址:Craft by InVision LABS

——這款插件絕不是一個內容生成器那麼簡單。它可以幫助你擺脫「Lorem Ipsum」,使用真實的產品數據進行設計,這對設計師來說簡直太重要了!具體的操作辦法可以去他們的官網看視頻教程。


上述提到的就不再重複。

-------- 更新,Adaptive Layout的好助手 --------

1.Sketch Constraints可以讓Sketch設計文件也可以Adaptive Layout,快速將同一套設計擴展到多種尺寸。

演示視頻:https://vimeo.com/140962822
下載地址:GitHub - bouchenoiremarc/Sketch-Constraints: A plugin that integrates constraints in Sketch to lay out layers.

2.AnimateMate
如果你想製作一些簡單的動畫而不想藉助其他複雜的動畫設計工具,那麼這款插件將很適合你。

下載地址:AnimateMate - Animation Plugin for Sketch

3.Craft by inVision
最大的亮點是使用真實數據填充文字、圖片等信息,來源例如來自你的文件夾、Dropbox或者網頁。另外還有複製組功能,橫向或豎向。

下載地址:Craft by InVision LABS

4.Unsplash it
同樣是圖像填充插件,不同的是圖片源來自「高質量、無版權自由使用」的http://Unsplash.com。精美的圖片會為你的設計增添高端優雅氣質。

下載地址:fhuel/Unsplash-It-Sketch: A plugin to quick...

5.Sketch-Android-Assets-Master
這個絕壁是Android切圖的神器!可以換算dip-px,還可以自動化導出Android、Windows Phone的尺寸。例:以mdpi為基準,最後導出文件。

下載地址:zmalltalker/sketch-android-assets

6.Sketch-9path
切Android .9的插件,自動將選擇的畫板轉換為.9圖層,並導出格式為XXX.9.png的圖片。

下載地址:maundytime/sketch-9patch

7.CSSketch
代碼與設計結合可以帶來強大的力量!此插件引入了CSS來控制設計,利用好可以大大提升設計效率與精確性。

下載地址:JohnCoates/CSSketch以上,以後有新的優質強大的插件再更新。


工欲善其事,必先利其器。

Sketch的出現颳起了UI設計屆的一場狂風暴雨,在革了Adobe的命的同時,還極大的增加了我們擼圖的效率,為此我們歡呼雀躍。對於Sketch,還有一些裝逼插件可以輔助我們,讓這場暴風雨來的更猛烈些!!!

主流常用的插件,其他知友的回答已經說得非常好了,我來走一波比較冷門的但同樣會讓你淚流滿面的sketch插件。

01 BaseAlign

Sketch里的對齊工具對於形狀來說已經很好用了,但是對於文本圖層的對齊就不那麼友好,sketch自帶的文本對齊是基於外面的文本框的,而不是文本本身。結果導致不同尺寸的文本框對齊後上上下下,一團亂麻。

BaseAlign插件在對齊的時候,對齊的是文本自身的基線而不是文本框,保證文本框無論多大尺寸都能按照實際文字完美對齊。

傳送門:Get it now

02 批量創建Symbols - Batch Create Symbols

symbol極大的提升了在做UI設計時界面的統一性,但是sketch也有個特別令人頭疼的事情,就是每次只能建立一個symbol。

Batch Create Symbols插件,可以讓所有選中的圖層,同時變為symbol。你甚至可以批量命名symbol或者直接用圖層名。強烈推薦的一個插件。

傳送門:Get it now

03 Craft

簡單粗暴,直接上視頻

http://v.youku.com/v_show/id_XMjc2NTg4NDY1Ng==.html

Craft是一系列的ps和sketch插件常用功能的合集,也是每個設計師必不可少的插件之一。

好用到哭,強烈推薦。

傳送門:https://www.invisionapp.com/craft

04 Magic Mirror 3

Sketch最痛苦的事情就是拖進一張圖片,並不能透視變形,自由變換。

將一張界面放到mockup中,Magic Mirror3插件可以像拖拽形狀一樣來變形界面,同時,它還能自動識別透視角度。如果你想讓畫板透視,通過點擊透視模型,透視模型上的界面也會隨之更新,完全不用去拖到PS,麻煩Adobe爸爸。

傳送門 Get it now

05 地圖生成器 - Map Generator

你肯定有過這樣的經歷,比如你需要一張地圖的圖片,接下來你的操作可能是這樣的,第一步打開google地圖(你知道,我肯定不會說百度)或者mapbox。第二步截屏。第三步把圖片拖到PS里。第四步調節顏色構圖等等一系列操作之後做好一張地圖圖片,第五步,拖到Sketch里。

如此繁瑣的操作,我們能忍??現在,Map Generator可以抓取任意的地址並且可以縮放尺寸,然後自動用Google地圖來填充選擇的形狀,省去無數時間與操作。(感動一秒鐘)

傳送門Get it now

06 Pixel Perfector

實際上在設計里,無論你怎麼小心,各種round to pixel,設計稿里總會莫名其妙的在圖層尺寸或者位置上出現幾個小數或者分數。

Pixel Perfector可以找到並修復任何圖層無論是位置還是自身尺寸上的小數。

傳送門: Get it now

07 重命名 - Rename It

你有沒有過這樣苦逼的經歷,要修改某一個單獨圖層的時候,發現上百個圖層的名字都叫做rectangle copy ?

Rename it可以批量的修改選中圖層的名字,從而保證交接文件的工整性,整潔性。這個功能對於常用sketch的設計師真的非常重要。

傳送門 Get it now

08 重複 - Repeat

我們會遇到這種情況,需要在各種不同尺寸的畫板上,複製一個通用的元素,比如status bar ,比如通用的icon等等,複製之後,再粘貼,元素在另外一個畫板上無論位置還是尺寸都需要再進行單獨的調整。

Repeat這個插件會根據選中圖層里元素的位置大小,將元素複製到新畫板的相同比例的位置並且保持與原畫板相同比例的尺寸。

傳送門 Get it now

09 選擇相似圖層 - Select Similar Layers

如果你常在sketch裡面繪製矢量插畫,那這個插件絕對能夠彌補你內心的空洞。Select Similar Layers可以自己抓去具有一樣填充顏色、描邊顏色、描邊寬度、字體、透明度、疊加模式或者名字的圖層。一旦擁有,你後半生絕對離不開。

傳送門 Get it now

10 等分對齊工具 - SketchDistributor

相比sketch內置的對齊工具,SketchDistributor這個插件更加精確更加人性化。

SketchDistributor可以幫助你選擇一組圖層,輸入一定的數值,選擇水平分布或垂直分布,確認後,將得到像素級別精確的間距。

傳送門 Get it now

11 貼合8像素 - Sketch Nearest 8

安卓Material design官方規範里要求:所有的柵格間距或元素大小必須是8或者8的倍數。

Sketch Nearest 8跟對齊像素插件的不同之處在於,在對齊像素的同時還能擴展寬高,使的寬高自動成為8的倍數,能時刻保證跟下一個圖層間的間隔數值為8或8的倍數。在android的設計中,這個插件能夠節省大量的時間,提高設計效率。

傳送門 Get it now

12 排序 - Sort Me

身為一個重度強迫症患者,在做設計的同時,時常會注意Sketch畫板的排序,但是畫板有時候會排列的一團亂麻。

Sort me這個插件可以快速的按圖層列表的名字的數字或字母調整圖層順序。可以選擇升序或者降序排列你的元素或畫板。

傳送門 Get it now

13 人人都是藝術家 - AutoDraw

這個插件跟AutoDraw功能一樣,甚至命名都一樣,不過它是sketch里的插件。有了它,媽媽再也不用擔心你不會畫畫啦。

傳送門 Get it now

14 生成中文名

相對於Craft里的一鍵生成英文名字來說,生成中文名這個插件比較的接中國地氣。

或者生個娃,不知道起啥名字?點擊一下,生成幾百個名字,任意挑選,還用發愁?

傳送門 Get it now

15 查找代替 - Find and Replace

Sketch不具備word編輯文本的能力,所以當文件里文字太多,需要修改的時候,你可能需要尋找和替換不同文本。Find and Replace是拯救一個一個替換文本的救星。

傳送門 Get it now

好,先推薦這十五個插件,以後看到好玩的再來更新分享。

一個沉浸在設計里多年的老UI,有問題可以私信我。

王宇:什麼是UI設計中的極簡主義?

王宇:設計師發展到一定時期感覺自我到瓶頸,如何再提升進階?

王宇:沒有美術基礎,怎樣才能成為一枚UI?需要學習哪些技巧?


幾個後期輸出資源相關的
Zeplin
也是尺寸標註,和快速縮放的,很實用啊!
https://zeplin.io/

Measure(強烈推薦,必備)
用來標註尺寸和設計規範,必須是必備!
https://github.com/utom/sketch-measure

Flinto for Mac
可以做點動效!
https://www.flinto.com/mac

Magic Mirror
快速生成後期效果展示
http://magicmirror.design/


幾個設計輔助的
Icon Fonts
圖標庫啦,不多說,不過一般都是自己畫比較多,呵呵 ,懶人 比較適用!
https://github.com/keremciu/sketch-iconfont

Sketch Palettes
保存當前文檔的色板,也比較實用額。
andrewfiorillo/sketch-palettes · GitHub

Sketch Content Generator
快速的填充頭像和姓名,老外的東西就是這麼實用!
timuric/Content-generator-sketch-plugin · GitHub

Sketch Constraints
畫板放大縮小,畫板內圖層也跟著放大縮小。

Coffee-Slice

阿里巴巴ux部門內部出品的的切圖插件

KivyGogh/Coffee-Slice


如果有的鏈接打不開,請自行fanqiang!!


推薦 Silver Flows ,直接在 Sketch 里做交互原型

介紹:

Introducing Silver : Lightweight Mobile Prototyping in Sketch 3

該工具即將進入公測階段。先佔坑,等拿到內測再看心情是否回來填坑。

———————— 2016-6-17 更新 ————————

終於搞到 Activate code(在 Facebook 討論組、Twitter 上找了一圈,最後還是一位廣州的朋友分享了他收到的雞和馬,非常感謝他。現在還剩 3 枚。獨樂樂不如眾樂樂,有需要的請在評論里留言,僅 3 枚,手快有,手慢無。請收到的朋友也能幫助一起測試,並將測試意見和建議反饋回去幫助改進。


現在 Silver Flows 已經被 InVision 收購, 併入 Craft 中,就叫「Prototype」,見上圖中第 4 項。


附上來自 Product Manager 的郵件 原文:

From: Aby from InVision &
Date: Tue, May 31, 2016 at 11:00 PM
Subject: Early access to Prototype, from InVision Craft

Hi there,
As you"ve probably heard, Silver Flows was acquired by InVision and will now be released as part of InVision Craft. Craft enhances your workflow with innovative features like Library, Duplicate, Type, and Photos. Now, we』re renaming Silver Flows as Prototype and integrating it into Craft (for Sketch only).
Since you signed up for the Silver Flows beta, you』re invited to be part of the Prototype beta and help us build a solid product before we release it publicly. By joining our private beta program, you』ll have access to exclusive pre-release builds for Mac and iOS.
We would love your feedback on:

  • Craft performance, specifically Prototype
  • Syncing between your device and your Mac
  • Interacting with your prototype on your device
  • Any bugs you come across or experiences you find to be unintuitive

To get started:

  1. Create an InVision account if you don』t have one.
  2. Download the latest version of InVision Viewer from the App Store and create an account/log in.
  3. Make sure your Craft Manager plugin is on version 1.2.9. If not, press cmd+shift+r and update it.
  4. Open the Craft Manager window and press cmd+shift+b.
  5. Enter in one of the activation codes:

    ******

  6. Switch to 「Prototype Beta」 in the dropdown menu at the top of the window.

Share with your friends

You have five activation codes—share these within your network! We also welcome you to share your experience via a blog or Medium post (videos and .gifs are okay!).
Feedback, bugs, and questions
If you have ANY feedback—whether you have a bug report, find certain features are not working as you expected, or have a feature request—reach out to InVision Support atsupport@invisionapp.com.
On behalf of the InVision team: Welcome! We"re so glad to have you on board. Email support@invisionapp.com with any questions!
Looking forward to your feedback,
Aby
Product Manager at InVision InVision - A Design Prototyping, Collaboration Workflow Platform
@abynim | abyn@invisionapp.com

中午簡單的試玩了一把:點擊一個 Artboard 上的按鈕,切換至另一個 Artboard,操作還算直觀、方便,但是無法在 Sketch 中直接 Preview ,需安裝 InVision Viewer 查看和測試交互效果。


好吧,這個坑今天還填不完,等測試完,有空再回來繼續填坑。

———————— 2016-6-21 更新 ————————

Well, Y2B 上有個哥們很歡樂的試玩 一圈,還提供了源文件下載,請自備梯子觀看。

Craft 2.0 Prototype from InVision Walk-Through

———————— 2017-5-27 更新 ————————

在Sketch中做交互?這就是大家期待一年的產品!

很遺憾,Silver Flow 已被垃圾 InVision 玩廢了!!!!!


本文首發於少數派:【原文地址】

相關文章:《這 5 款不錯的 Sketch 插件,讓你的設計更豐富、更高效》

WeSketch:微信團隊的良心之作

前有 Craft ,後有 WeSketch。微信團隊今日推出一款良心插件,就是 WeSketch ,而且功能上來說也是非常齊全了,團隊之前可以進行 UI Kit 同步、色板同步。在交互方面,它擁有自帶的圖標庫,並且可以自動連線、標記注釋、全局替換文字、字體、顏色等。而且對前端來說,更有補齊寬高導出圖片、導出 CSS 代碼的感人操作。

詳細介紹:《微信團隊做了款 Sketch 插件,聚合了 11 個實用功能》

你可以在 WeSketch 下載。

ImageOptim:壓縮圖片不用那麼麻煩

在設計的時候,我們時長會使用一些背景素材。平時收集素材的過程中,我們總是希望自己的素材是高清的,於是圖片就會很大。但是過大的圖片,可能會使你的 Sketch 響應速度下降,也會使你的設計文件大小過大。原來在使用素材時候,我會用 Squash 或者 TinyPNG 壓縮一下。現在你可以選擇它, ImageOptim 這一款插件就是為壓縮而生,你不僅可以壓縮你的素材,你也可以對你的的所有切片進行導出壓縮。

你可以在 ImageOptim plugin for Sketch app 下載。

IconFlower:快速放置你的 icon

有時候你製作一個背景圖的時候,背景里需要放置很多 icon 素材,你需要一個個拖拽把它們放置於不同位置,這個重複的工作無疑是惱火又重複。現在你只需要把你的矢量素材複製到你的畫布里,全部選中點擊 IconFlower,便可以自動布局你的所有 icon。

你可以在 IconFlower 下載。

Comma:文本從此不需要單獨修改

你有沒有遇到過這樣一種情況,在一個登錄按鈕上,你先寫了「Login」,當你完成設計後,你發現如果全部選擇大寫會更加美觀一些,於是你重新刪掉打上「LOGIN」。還有等等於此相同的文本操作,當文本數量小的時候,單獨去修改並不會影響什麼,當文本量大的時候,這無疑是一個很大的工作量,這個時候你就需要 Comma 了,它只需要你選中你的所有文本,就可以完成你想要的各類文本格式操作,無需你再一個個字母去點擊選中修改了。

你可以在 Comma 下載。

Search Everywhere:定位可以更快

Search Everything 大家應該都很熟悉,這是 Windows 里的一款效率搜索軟體,而今天給大家介紹的 Search Everywhere 我覺得就是 Sketch 里的 Search Everything ,它可以在 Sketch 通過快捷鍵 Alt+Command+F 呼出搜索麵板,通過對名字、文本、ID 的搜索來快速在眾多圖層里定位到你想要的位置,包括你文本圖像圖層等等元素。

你可以在 Search Everywhere 下載。

Sketchpacks:插件管理新選擇

上一期里我介紹了 Sketch Plugin Manager 這一款管理插件,但是這一次我發現了這一款管理可能在某些層面上優於前者,Sketchpacks 的 UI 可以說是非常的討人喜歡和完善了,它的功能不在局限於管理和更新你的插件,它有三種排序,分別是「最新」、「熱門」、「字母先後」,同時還提供了下載量和版本號的查看,這很大程度上提高了你尋找一款適合你或者優秀插件的效率。

你可以在 Sketchpacks 下載。


2016.4.8~4.9 期間在德國舉辦了一場 Sketch 黑客馬拉松。

Medium 文章
https://medium.com/sketch-app-sources/runner-speed-up-your-sketch-workflow-fba470ed43c1#.bgdpr68wy

---

以下就是兩個優秀的產物:

Sketch Runner

Sketch 里的 Alfred
- 提升效率必備。

官網
Sketch Runner

Sketch Copy to All
如其名,把同樣的圖層,樣式,Symbol 複製到其他的 Artboard

Github 地址
GitHub - wuwa/sketch-copy-to-all: sketch


sketch之所以強大,插件占很大的因素。sketch的插件太多了,實用的插件也很多,每一個插件都有自身的作用,但是不可能把插件都安裝在電腦上,所以我就推薦幾個還不錯的sketch插件,希望對你們使用有幫助。

1.Content Generator Sketch Plugin(內容生成器)

這個插件應該是最值得推薦的插件了,插件可以自動填充用戶的信息,逼格滿滿的同時還不用擔心找不到頭像圖片。

新建一個形狀,點擊插件,就會自動隨機填上一張圖片,如果是文字,就新建一個文字,再點擊插件。

2.Taobao Image Sketch Plugin(淘寶)

插件和上面說的Content Generator Sketch Plugin用法很相似,可以自動生成產品圖片、金額、標題等的信息,非常適合電商類。

3.Sketch Measure

選中元素,然後選擇plugins菜單,就可以標註圖片的尺寸、間距等等問題,不需要我們一個個的打字,很大的提升工作效率,需要注意的是,要標記元素之後再選擇plugins標註方式,就可以完成自動標註了。

下面是Sketch Measure插件的安裝,有興趣的可以看看了解。

1)下載最新的版本, 並解壓;

2)打開軟體,menu (菜單) -&> plugins (插件) -&> reveal plugins folder… (顯示插件文件夾...)

3)將解壓的文件夾複製到 plugins folder(插件文件夾)

4.Dynamic Button(動態按鈕插件)

在Sketch中藉助這個插件生成的按鈕可以設定包括內容、樣式和內外邊距等各種屬性。安裝插件之後,你可以使用Command+J這個快捷鍵快速將文本快速轉換成按鈕。設置內邊距的時候,可以在文本圖層下設置(0:0:0:0)的參數來搞定。

5.AnimationMate插件(動效插件)

作為sketch的插件,animatemate可以在sketch中通過參數設置來完成動畫的製作。借鑒一個例子,有興趣可以跟著學習。

sketch畫出貓頭鷹

1)先把整個貓頭鷹按照比例調整到寬為56的大小,畫板調整到寬高都為60的大小

2)將眼睛的黑色部分和大白色的圓建成一個組

3)選中所有圖層-&>plugins-&>AnimateMate-&>Creat Animateion

4)創建第0幀的動畫。KeyframeNumber為0,EasingType動畫類型為線性動畫linearEase。

5)改變eye_right和eye_left的Transform為359°

6)選中所有圖層-&>plugins-&>AnimateMate-&>Creat Animateion,我們讓這個貓頭鷹的眼睛從0°旋轉到359°分成20個關鍵幀。KeyframeNumber為20,EasyingType為線性動畫linearEase,點擊OK。

7)選中refresh圖層-&>plugins-&>ExportAnimation導齣動畫

8)可以看到,這裡我們可以導出GIF Aniamtion動圖,也可以直接導出20個PNG圖片。我們都勾選上,然後給導出的GIF圖和PNG圖填一個前綴名字fenqile_refresh。選擇導出出到fenqile_refresh文件夾

9)導出之後的結果為下圖所示。

10)用瀏覽器打開gif動圖可以看到最終實現的效果。

上面介紹的插件都是sketch很實用的插件,可以大大的提升設計的效率,AnimateMate插件製作動態的過程稍微麻煩了些,這裡只是供大家借鑒。

最後推薦兩個學習sketch的視頻教程,對於要日後從事UI設計的有一定的幫助。

1.新手入門必備的乾貨

UI設計師利器-Sketch教程

2.努力就能成為大神的sketch教程

Sketch零基礎入門教程

號外:全新上線ZBrush中文教程:惡魔之使製作解析

詳細展示了怪物角色建模的製作過程,涉及非常多的技術要點,包括作品的前期準備,人體結構、金屬、布料、皮革、翅膀等結構分析與製作難點的詳細講解。

以上,望交流。


PS+Sketch通用!幫你提高效率的自動填充神器插件Craft
更新一個插件: craft,前面有人提到,不過對於他的強大的功能沒有提及。

自動填充,圖片(從文件夾,從網路),文字(電話地址、人名、網站選擇的文本)。

無法貼 gif,請看上面的鏈接,有比較完整介紹
-------------------

樓上的一些分享不錯,補充2個人用的多的~

Duplicator turbobabr/duplicator · GitHub
個人最常用的插件。類似於自帶的 Make Grid 功能,效率會高一些。
快速複製選定層到指定的方向。

  1. 快速複製一個選定組件到自己指定的方向,默認間距10.生產一個。
  2. 快速複製一個選定組件到自己指定的方向,指定間距,指定複製個數。

Sketch Resize AntonStrand/Sketch-Resize · GitHub
使用一個層或artboard作為一個模板來調整其他層的長寬。
從數值小的往數值大的變化。
如:A是10*10 B是20*20

  • 可以通過這個插件變成 20*10 (寬度一致) 10*20(高度一致)20*20(高寬一致)
  • 也可以在這個基礎上再添加指定的參數,比如:n為設定值 (20+N)*10
  • 當只選擇一個原件時執行,會參照artboard來調整長寬。如變成和artboard等寬的矩形。

----------------------------------------------------------
2015-12-04 10:21:29 更新

SketchDistributor PEZ/SketchDistributor · GitHub

------------------------ 2015-12-04 16:18:24 補充
Sort Layers getflourish/Sketch-Sort-Layers · GitHub


awesome-sket.ch 這個網站有各種插件介紹及開發插件作者鏈接地址,可以根據自己的需求下載相應的plugins導入sketch使用。


我自定義了一下Content Generator這個插件。
起因是Content Generator 這個插件是英文的,手機號也是國外的號碼。對於日常使用除了圖片、郵箱的填充幾乎無用。

舉個例子
你想隨機生成中國手機號:


1.打開 Sketch Plugin 的文件夾,Content-generator-sketch-plugin-master/data/persona 你會發現郵箱和手機號是兩個 json 文件。(把他看成 excel 一條條存儲數據吧)

2.準備一份中國手機號的 json 文件。
3.備份原文件。用自己準備的 json 文件覆蓋原文件中的 phones.js (請保持一模一樣的名字)
4.改個自己喜歡的插件名字唄。比如我司項目MoSeeker

基本原理就是這樣。
想要添加新的或者改名字還需要修改相關文件。
如有興趣自行研究吧。


發現了一個超好用的標註(切圖)插件,心情有些激動 !!!一定要來答一發!!

Sympli: complete collaboration tool for designers and developers

標註切圖一堆破事,費事費力,很想哭有沒有。

以上問題smypli基本可以完全解決!新建項目,把sketch 或者ps 做好的設計稿通過插件上傳,邀請程序員哥哥, 他們在xcode和android stuido里安裝相應的插件,就可以看見所有的設計元素,間距,切圖,樣式,甚至圖層!

價錢也還是划算

一定要向開發者獻上膝蓋!

ps:有安卓插件真的業界良心,安卓開發大哥們終於不用愁眉苦臉(但我們依舊不準備做安卓的設計稿。。。)
pps:真的真的真的真的超級超級超級超級討厭標註!

這麼好用的插件居然沒人推薦。。


是不是還沒人提這個:Relabel Button
Github kenmoore/sketch-relabel-button

點擊查看gif??按鈕寬度可以自動隨文字長短變化啦!對做管理系統的我來說解決了一大痛點!
然而前提是這個按鈕必須由文字和形狀兩個圖層組成,symbol是用不了的...


由 @Waters 主編的 少數派 Sketch 專欄 介紹過不少關於 Sketch 的實用插件,少數派為你整理了 15 款設計師必備的插件。

Sketch Plugin Manager:統一管理插件

如果很早就開始使用 Sketch 的用戶一定知道 Sketch Toolbox 這個軟體,當時就是用來管理各類 Sketch 插件的,可以搜索,也可以更新,相當的方便,然後它在 Sketch 3 的某個版本後就因為不知道什麼原因就停止支持了。現在又出來了一個 Sketch Plugin Manager ,功能和以前是一樣的,方便你管理升級你所安裝的插件。

Sketch Measure:規範本可以很簡單

這款插件可以說是開發者的福音,設計師的橋樑,它可以更快,更簡單,更優雅的導出設計規範。Sketch Measure 還擁有很討人喜歡的 UI 以及很齊全的標註功能,據了解作者在接下來版本會加入更多讓人驚艷的 Feature。

Magic Mirror:魔鏡啊,魔鏡,我的 Mockup 在哪裡

在之前,Sketch 沒有 Photoshop 的智能對象,使用 Mockup 不是很方便,在 Magic Mirror 出來以後,只用選擇兩個圖層就可以達到你要的效果,讓 mockup 更加的簡單快捷。Magic Mirror 有付費的 Pro 版本,具體區別可以移步官網,官網同時也提供了大量的付費 Mockup Sketch 模板。

Craft:製作 UI 從未如此高效

Craft 是 invision 團隊製作的一款高效插件,從最開始的三個功能,再之後收購了 Silver 團隊加入了交互功能,到現如今推出了團隊之間協作演示的功能,又為設計提供了更大的效率空間。你在這款插件上會體會到各類元素的高效復用和快速填充,以及你自己獨有的設計庫,每一點都能為你的設計加速。

Sketch Runner:不記得快捷鍵?沒事

我給這款插件的評價就是 Sketch 中的 Alfred,如果你還在為在尋找各級菜單和子菜單里的功能而煩惱時,這個插件一定是你最好的選擇。Sketch Runner 以鍵入關鍵詞的方式,大大的簡化了你的工作流程,可以說這款插件是設計效率的「春天」。

WeSketch:微信團隊的良心之作

前有 Craft ,後有 WeSketch。微信團隊今日推出一款良心插件,就是 WeSketch ,而且功能上來說也是非常齊全了,團隊之前可以進行 UI Kit 同步、色板同步。在交互方面,它擁有自帶的圖標庫,並且可以自動連線、標記注釋、全局替換文字、字體、顏色等。而且對前端來說,更有補齊寬高導出圖片、導出 CSS 代碼的感人操作。

詳細介紹:《微信團隊做了款 Sketch 插件,聚合了 11 個實用功能》

你可以在 a href="https://github.com/weixin/WeSketch/blob/master/README-zhCN.md"> WeSketch 下載。

ImageOptim:壓縮圖片不用那麼麻煩

在設計的時候,我們時長會使用一些背景素材。平時收集素材的過程中,我們總是希望自己的素材是高清的,於是圖片就會很大。但是過大的圖片,可能會使你的 Sketch 響應速度下降,也會使你的設計文件大小過大。原來在使用素材時候,我會用 Squash 或者 TinyPNG 壓縮一下。現在你可以選擇它, ImageOptim 這一款插件就是為壓縮而生,你不僅可以壓縮你的素材,你也可以對你的的所有切片進行導出壓縮。

你可以在a href="https://imageoptim.com/sketch"> ImageOptim plugin for Sketch app 下載。

IconFlower:快速放置你的 icon

有時候你製作一個背景圖的時候,背景里需要放置很多 icon 素材,你需要一個個拖拽把它們放置於不同位置,這個重複的工作無疑是惱火又重複。現在你只需要把你的矢量素材複製到你的畫布里,全部選中點擊 IconFlower,便可以自動布局你的所有 icon。

你可以在 IconFlower 下載。

Comma:文本從此不需要單獨修改

你有沒有遇到過這樣一種情況,在一個登錄按鈕上,你先寫了「Login」,當你完成設計後,你發現如果全部選擇大寫會更加美觀一些,於是你重新刪掉打上「LOGIN」。還有等等於此相同的文本操作,當文本數量小的時候,單獨去修改並不會影響什麼,當文本量大的時候,這無疑是一個很大的工作量,這個時候你就需要 Comma 了,它只需要你選中你的所有文本,就可以完成你想要的各類文本格式操作,無需你再一個個字母去點擊選中修改了。

你可以在a href="https://github.com/margusholland/Comma"> Comma 下載。

Search Everywhere:定位可以更快

Search Everything 大家應該都很熟悉,這是 Windows 里的一款效率搜索軟體,而今天給大家介紹的 Search Everywhere 我覺得就是 Sketch 里的 Search Everything ,它可以在 Sketch 通過快捷鍵 Alt+Command+F 呼出搜索麵板,通過對名字、文本、ID 的搜索來快速在眾多圖層里定位到你想要的位置,包括你文本圖像圖層等等元素。

你可以在 Search Everywhere 下載。

Sketchpacks:插件管理新選擇

上一期里我介紹了 Sketch Plugin Manager 這一款管理插件,但是這一次我發現了這一款管理可能在某些層面上優於前者,Sketchpacks 的 UI 可以說是非常的討人喜歡和完善了,它的功能不在局限於管理和更新你的插件,它有三種排序,分別是「最新」、「熱門」、「字母先後」,同時還提供了下載量和版本號的查看,這很大程度上提高了你尋找一款適合你或者優秀插件的效率。

你可以在 Sketchpacks 下載。

Compo:讓小部件布局如此輕鬆

在設計工作中,如果你有自己的元件庫的話,你時長會遇見元件復用的事情,不論是 Bar、Cell 還是 Button。當你填充不同內容的時候,元件的尺寸因為文本的原因都需要重新去適配。Compo 就是一款專門來處理元件適配的插件,讓你按照指定的約束自動適配出你需要的效果,自動適配新的界面環境,可以說是非常的方便,加速你的工作流。

Compo@winwinyang

詳細介紹:讓 Sketch 小部件布局如此輕鬆: Compo

Name Organizer:整理控必備,讓你命名井井有條

Name Organizer 是一款規範命名的插件,命名是一件很基本的事情,不僅是對自己設計稿的一個規範化處理,使設計稿可讀性更高。它的作用其實就是根據駝峰命名法來一鍵規範你圖層以及畫板的命名,並且調整你的畫板順序。它不僅是對你的設計稿的一個規範化處理,還可以讓你的設計稿可讀性更高,可以說是一款優化利器了。

來自插件說明-Github

詳細介紹:快速美化你的設計命名:Name Organizer

Sketch Guides:參考線這樣用更快

參考線在設計里可以說說是一個系統級別的存在,為了保證設計的準確度和布局的美觀,參考線是必不可少的一個元素。Sketch 里的參考線只能說是些許的方便,當你拖拽出來的參考線靠近你畫布里的元素的時候,它會自動貼合到元素的邊緣,但也就僅此而已了。但是 Sketch Guides 這款參考線插件,給你帶來的是速度和簡單,它提供單線、雙線以及刪除所有參考線的一系列快捷操作,讓你從此告別手動拖拽參考線。

Guide@WATERS

詳細介紹:參考線從來沒有用的如此輕鬆:Sketch Guides

Convert:PSD 轉 Sketch 很簡單

你可能是剛從 PhotoShop 轉到 Sketch 的工作者,也可能是你的協作對象使用的是 Photoshop ,而你用的卻是 Sketch 。這裡都會出現一個文件無法直接打開的問題,這就需要轉換。你只需要 PSD 文件就可以了。Convert 是在 Product Hunt 上發現的一款在線工具,你只需要上傳你的 PSD 文件,填寫你的郵箱,轉換後的文件就會發送到你的郵箱里。並且它的雙向轉換的功能已經在開發中了,讓我們一起期待未來的它。

Convert@WATERS

詳細介紹:PSD 轉 Sketch ,其實很簡單

SketchCacheCleaner:緩存多?你可以試試這樣的操作

Sketch 的緩存問題不只是一兩天的事情,在對關鍵字的搜索里我們就會發現有各類對緩存處理的提問。從 3.0 到 40 版本,這個老毛病依舊沒有得到根治。而使用 Sketch Cache Cleaner 你只需要點擊一次搜索,再點擊一次清理即可完成對 Sketch 緩存的清理,從此告別尋找命令行,你一需要一鍵即可,它真的可以說是非常的方便了。如果你對 Sketch 的使用量較大,建議使用它來清理一下你的緩存!

SketchCacheCleaner@WATERS

詳細介紹:Sketch 緩存多?你可以試試這樣的操作

--------------------------------------------------------------------------------------------------------

下載少數派,讓智能設備更更好用。


大神們推薦的sketch 好用插件全在這。
鏈接: http://pan.baidu.com/s/1qXC474g


3月23日更新,墨刀 Sketch 插件 v1.0 今日正式發布啦!可能有人朋友圈已經被刷屏了,詳情戳:https://modao.cc/sketch

———————————————原文—————————————————

最近要搞個大事情。

以下是圖示,大家可以猜猜是用來做什麼的。

作為一名從「產品經理」向「產品設計師」方向發展的兔來說,這可能是我為設計師們做的第一個產品。

上周在公號里已經發布了 MockingBot for Sketch 插件的公測預告,簡單來說這款插件可以將你所選的 artboard 上傳至墨刀的某個應用里,在不影響已添加交互鏈接的情況下隨時更新、覆蓋原有設計稿。設計師朋友們可以將設計稿統一提交至墨刀進行「交互設計」「圖片管理」。

以下是個 beta 版演示視頻


「設計師必備插件」MockingBot for Sketch - 騰訊視頻 https://v.qq.com/x/page/j0356f2iwxi.html

由視頻可以看出目前 MockingBot 插件還只能實現將設計稿從 Sketch 批量導入至墨刀,之後的版本計劃會實現:
1. 保留分層數據,讓設計師完成更精細化的交互原型
2. 引入測距功能,開發者在原型上可查看所有控制項參數——包括顏色、尺寸、邊距等信息

正式內測時間是1月1日,如果想加入內測,可以評論或私信我,我來拉群~

感謝!


這裡收錄的插件也挺不錯,所有插件都做了詳細介紹 http://sketch.im/plugins/


推薦一個改尺寸的神器-Auto Layout for Sketch
就是iphone改ipad ,可以很方便把一個尺寸改成另外一個想要的尺寸。有點類似響應式設計的感覺。

通過 pin的點 來控制縮放的位置。
下載地址:Auto Layout for Sketch


重複複製一個圖形形成一個重複的陣列,個人覺得沒必要用插件啊。先按住Option複製出第一個,然後CMD+D就會重複上一個動作,保持間距的進行複製。


推薦閱讀:

如何自學計算機編程?

TAG:設計 | 用戶界面設計 | Sketch | UI設計入門 | UI設計師 |