工具

2020年4月前端設(shè)計(jì)實(shí)用工具分享

2931

4月份的第二波干貨合集來了！這一期的設(shè)計(jì)干貨當(dāng)中，包含有不少偏向前端的開發(fā)工具，也包含我們往期一定會(huì)有的圖標(biāo)、字體、設(shè)計(jì)向的輔助工具，非常全面。如果你仔細(xì)看，會(huì)發(fā)現(xiàn)不少工具是為了對(duì)抗疫情的擴(kuò)散而制作的，非常不錯(cuò)，快看看吧：

Snapfont

Snapfont 是一款瀏覽器拓展程序，可以讓你在任何網(wǎng)站上測(cè)試任何字體，在這個(gè)插件的幫助下，你可以了解網(wǎng)站在不同的字體之下的視覺效果。在真實(shí)環(huán)境中測(cè)試字體效果，是最能夠看出效果好壞的。

如果你是一名前端開發(fā)者，那么你可以關(guān)注一下來自Google 的兩位開發(fā)者的這個(gè)播客，他們是 Una Kravets 和 Adam Argyle，他們將 CSS 復(fù)雜的知識(shí)點(diǎn)拆解為更容易被理解的內(nèi)容，播客內(nèi)容豐富，涵蓋來從可訪問性設(shè)計(jì)，到 z-index 等各種各樣的內(nèi)容，每一期都非常快捷，通常在15分鐘以內(nèi)說清楚，易于消化。

Saas for COVID-19

受到疫情影響，全球的設(shè)計(jì)和開發(fā)服務(wù)商都在打折，而 Saas for COVID-19 就是這個(gè)優(yōu)惠合集頁面，如果你正在搭建網(wǎng)站，并且需要用到這些工具，現(xiàn)在是下單的好時(shí)機(jī)。

Virtual Events for Developers

同樣的，如果你是開發(fā)者，那么這個(gè)給開發(fā)者的虛擬活動(dòng)可以讓在家工作的你，有更多的時(shí)間投入到自我學(xué)習(xí)和迭代當(dāng)中——這各列表當(dāng)中，包含了大量的在線學(xué)習(xí)、設(shè)計(jì)/開發(fā)相關(guān)的社區(qū)、活動(dòng)和聯(lián)系方式。

SnipperApp2

SnipperApp2 是一款給 macOS 開發(fā)者的本地工具，可以用借助 Github 編寫 Markdown 筆記，并且在多地存儲(chǔ)。

Faux Code Generator

這是一個(gè)偽代碼效果生成器，它生成的視覺效果是基于真實(shí)的代碼特征來生成的，并且能夠生成 SVG 格式。使用的時(shí)候，你只需要粘貼 URL，選擇一個(gè)主題，就可以生成了。

Midori

Midori 是一個(gè)動(dòng)畫背景圖片庫，你可以選擇不同的圖片，不同的過渡效果，并且預(yù)覽效果，對(duì)于二次元愛好者或者有類似需求的項(xiàng)目而言，它的實(shí)用性還是很強(qiáng)的。

Color Push

Color Push 是源自于 WeTransfer 的一個(gè)藝術(shù)體驗(yàn)項(xiàng)目，它使用顏色和動(dòng)畫效果，幫你在不到90秒的時(shí)間內(nèi)，創(chuàng)建出藝術(shù)作品。完成之后你可以下載下來使用。

3D Kinetic Typography

想知道3D動(dòng)態(tài)排版是怎么一回事嘛？來試試 Anna 和 Scavenger 所創(chuàng)建的這個(gè)炫酷的工具。炫酷的工具。炫酷的工具。炫酷的工具。炫酷的工具。

StockSolo

StockSolo 是一款插件，它可以調(diào)用諸如 Unsplash、Pexels、Pixabay 這些圖庫，而這款插件可以用于 PS、AI、ID 和 XD。著意味著你有超過320萬張圖片可供選擇。

Flat HTML

Flat HTML 是一款生成復(fù)雜 HTML 代碼的替代方案，它可以為每個(gè)元素設(shè)置特定的語句。

Circle Swap Photo Gallery

Circle Swap Photo Gallery 是一個(gè)超級(jí)有趣切換動(dòng)畫效果，它借助 React 和 GSAP 來實(shí)現(xiàn)漂亮的圓圈動(dòng)畫效果。

BEM Cheat Sheet

BEM Cheat Sheet 是一款常見的 Web 組件的建議命名庫，它的實(shí)用性非常強(qiáng)，確保你你能夠正確的類的命名，讓你的項(xiàng)目不會(huì)因?yàn)槠婀值拿?，在協(xié)同和使用方面出問題。

Jitsi

Jitsi 本身并不是設(shè)計(jì)工具，但是對(duì)于 Web 設(shè)計(jì)師和開發(fā)者而言，是一個(gè)頗為不錯(cuò)的工具，它是一款安全、功能齊全的免費(fèi)視頻會(huì)議工具，它可以作為單獨(dú)的應(yīng)用使用，也可以和 Slack 集成，它是完全開源的，無需帳號(hào)都可以使用。

Shorthand

Shorthand 是一款功能豐富的 CSS 框架，可以讓你無需編寫 CSS 代碼即可創(chuàng)造出風(fēng)格現(xiàn)代體驗(yàn)優(yōu)異的設(shè)計(jì)。它是一款自定義工具，其中包含你需要的功能，包括顏色、漸變效果、字體樣式等等。

Boardist

Boardist 是一款生產(chǎn)力工具，你可以在它的面板上創(chuàng)建列表、待辦事項(xiàng)，能夠創(chuàng)建標(biāo)簽、注釋，甚至放置文件，安排任務(wù)。它是一個(gè)完整的項(xiàng)目管理工具，確保你和團(tuán)隊(duì)能夠進(jìn)行良好的合作。