第二波！2019年7月設計圈超實用乾貨大合集
"\u003Cdiv\u003E\u003Cp\u003E設計除了有用的一面，還有好玩的一面。有很多設計工具和設計素材，在本身的功能性之外，還會具備令人愉悅的體驗，讓人會心一笑的元素，甚至非常好玩的構思。所以，在這個炎熱的夏天，希望我們所提供的素材能夠幫到你，還能讓你更加高興。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E404 Illustrations\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002Fc1215d3087b14cd6a77ad8a142c99b35\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E有沒有想過創建一個很酷的 404 頁面，但是又沒有靈感？現在不用擔心了，這個名爲 404 Illustrations 的插畫網站能夠爲你提供時髦的插畫，並且每個插畫都會有一個可愛的描述，都可以免費使用。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ESpotlight\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F5b094502076e46ee809e35c800519460\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ESpotlight 是一個輕量級的 Lightbox 庫，易於運行，沒有依賴關係的組件。不需要額外的 JavaScript 、 HTML 和 CSS 代碼庫，也不需要額外的圖片或者素材，基本上下載就可以使用。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EEva Design System\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fcb3bb16527364ce18311321689a24ed5\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EEva 是一套免費的開源設計系統，你可以根據你的需求和團隊的需求進行調整。它適用於 Sketch 並且提供相應的符號以及樣式的配置。這套系統讓你可以儘可能規避重複性的工作，能夠快速地推進設計和開發。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EScreenzy\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fce1b28695f754fc8ac47a5d403e78df0\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EScreenzy 是一個快速創建和編輯截屏的工具，你只需要粘貼圖片或者 URL 就可以預設的5種不同的設置，快速地選擇合適的編輯效果。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EDrag and Drop Sticky\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F7f83ce6f67e04476b36288fdb4afde84\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EDrag and Drop Sticky 是 Scott Kellum 所創建的一套無需 JavaScript 支持的好用酷炫的元素，當你移動它的時候，技術上只需要調整 textarea 的大小，以及相應的註釋。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EFreezeframe.js\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F89766f68491d4eacb1fe33e82099b05e\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E感覺 gif 圖片自動播放比較煩？Freezeframe.js 可以幫你暫停 gif 動畫，然後通過懸停、鼠標單擊、觸摸等其他的觸發來恢復。由於它使用了更爲現代的 JavaScript ，所以這款工具的新版本將不會再使用 jQuery 。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ESpace Shooter\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F0cb808387aa54e8abf2d0f63814c971c\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ESpace Shooter 是一款由 Andrew Rubin 所創建的射擊小遊戲。如果你正遭遇某個設計難題，或者想找些靈感，放鬆一下，那麼你可以直接切過來玩兒一下。如果你是一個開發者，想寫寫代碼，也可以直接基於這套代碼來進行修改。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ESwipemix\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F27ad05b239cd40068444599a09cff460\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ESwipemix 可以幫你在 Instagram 上設計更好的拼貼和佈局，它讓你可以在幾分鐘之內通過 iPhone 上的 APP 和內置的模板，快速地對圖片素材進行排序和佈局。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ESource Wireframe Kit\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002Fbc6b31ca4d8540b281d8744de12af082\" img_width=\"2333\" img_height=\"1609\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ESource Wireframe Kit 能夠幫你更快地進行原型設計，這套工具內置的 500 多種不同的模塊相互之間都可以進行快速的搭建，並且構建成爲完整的設計系統。所有的內容都能夠按照類別進行分組，幫助你更快地工作。你可以使用 Sketch、Figma、Marvel 或者 Invision 調用它並且創建自己的原型。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EHubcap\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F9fb8522c988d4ad2947cb7bfe3df6911\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EHubcap 是一款免費的錄屏工具，無需安裝任何軟件就它就可以用——因爲它是藉助 Chrome 和 Firefox 瀏覽器來運行的。它讓你可以快速錄製屏幕，並且進行分享。這款工具能夠記錄長達5分鐘的視頻，並且最多可以存儲2周以內的內容。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EBrutalism Web Kit\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F7df95b377ee7412fb436aad2340e8738\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EBrutalism Web Kit 是一套緊跟時下潮流趨勢的網頁設計元素的模板合集，其中涵蓋了70種不同的樣式，以及相應的免費工具，以及可供利用的谷歌字體。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EAntDesign UI Kit\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F31707464edfb47eea460863ba507533f\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E來自阿里的 AntDesign UI Kit 如今也推出了針對 Figma的版本了，其中包含2100個組件，630個圖標，140 個可自定義樣式和43個界面，它是目前 Figma 中最大的組件庫之一。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EAnggada\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F995467d6317d4874958c7e6f83aaa43f\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E這款名爲 Anggada 的字體看起來應該受到阿拉丁電影的啓發而設計出來的，它包括一整套適合展示的完整字符集，Demo 版是完全免費的。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EBasier Mono\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fea19086937134ac3976ac06ae247196a\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EBasier Mono 是一款現代風格的等寬字體，字體的外輪廓基本上是基於圓形和方形來設計，字體包含免費和收費的高級版。這套字體中還包含有非常酷的替代字體，包含數字以及多種不同的語言。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EBright Salkiy\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F7096d9647cf047179041cd001ffb0b3b\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EBright Salkiy 是一款潦草纖細的手寫字體，具有優雅的標誌性的形象。免費版僅供個人使用，完整版的會包含有全部的字符和數字。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ECataclysmo\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fab8de4decd9f44c2b7a096b9599fd5d7\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ECataclysmo 是一款纖瘦加粗的襯線字體，字體主要用於展示，所以它僅包含大寫字母字符集和數字。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ENairi Amber\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fb870b95ec1684adeac90f9fb20c4fb2c\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ENairi Amber 這套字體的免費版當中，涵蓋有普通的無襯線字體、手寫字體以及相應的斜體。這套字體非常適合和圓潤的字體進行搭配，其中手寫字體會顯得很緊湊。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ERise of Kingdom\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Ffd800d62e9fe471a8a6dda905c8eaeb8\" img_width=\"1856\" img_height=\"1280\" alt=\"第二波！2019年7月設計圈超實用乾貨大合集\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ERise of Kingdom 是一款大寫的襯線字體，它有着非常優秀的顯示效果，給人的整體感知是大氣的，襯線利落而恰到好處。\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E"'.slice(6, -6),
groupId: '6718341299587514887
