編輯推薦：已經(jīng)安利過(guò)不止一次了，上線(xiàn)剛滿(mǎn)一年，「即時(shí)設(shè)計(jì)」這款中國(guó)版 Figma 已經(jīng)能做到很多 Figma 無(wú)法實(shí)現(xiàn)的事情了，而且確實(shí)和他們的口號(hào)一樣，為國(guó)內(nèi)設(shè)計(jì)師打造，今天推薦的這套資源使用方法，就很好地展現(xiàn)了這一點(diǎn)，來(lái)看看吧~

「即時(shí)設(shè)計(jì)」官網(wǎng)地址：https://js.design

經(jīng)常會(huì)給大家推薦一些資源，但是很少有聊過(guò)這些資源都應(yīng)該怎么用，因?yàn)榭赡苊總€(gè)設(shè)計(jì)師都有自己不同的使用心得，并不容易轉(zhuǎn)換……

不過(guò)今天，我還是有了點(diǎn)想要分享的東西，一套保證和你之前完全不同的資源用法，它將在線(xiàn)的資源和設(shè)計(jì)工具深度集成在一起，不光在體驗(yàn)上做到無(wú)縫銜接，效率的提升也相當(dāng)可觀，最重要的是，這套方法目前只有「即時(shí)設(shè)計(jì)」這一款工具能實(shí)現(xiàn)！

沒(méi)錯(cuò)，F(xiàn)igma 做不到，Sketch 也做不到，盡管它們?cè)谀承┏潭壬峡梢杂蓄?lèi)似的效果，但體驗(yàn)差異非常大，如果想看看它到底有什么不一樣的話(huà)，不妨我一起了解下吧，大綱如下：

1. 豐富的在線(xiàn)資源
2. 在線(xiàn)資源的多種用法
3. 獨(dú)特功能實(shí)現(xiàn)的完美閉環(huán)
4. 字體也能云端共享的特別體驗(yàn)

從第一次了解「即時(shí)設(shè)計(jì)」到現(xiàn)在，前前后后加起來(lái)大概也用了有一個(gè)多月的時(shí)間，在上面做了不少日常項(xiàng)目，比如公眾號(hào)封面和一些文章配圖，還有偶爾給朋友畫(huà)個(gè)圖標(biāo)，搭個(gè)界面之類(lèi)的。雖說(shuō)時(shí)不時(shí)也遇到了小 bug，但整體還是挺棒的，沒(méi)想到國(guó)內(nèi)的設(shè)計(jì)工具也已經(jīng)發(fā)展到這種程度了。

也正是這一個(gè)多月的使用，讓我一步步體會(huì)到了這種隨時(shí)打開(kāi)瀏覽器就能做東西的體驗(yàn)，到底可以帶給人多強(qiáng)的幸福感，同時(shí)逐漸體會(huì)到了，在云文檔已經(jīng)大行其道的當(dāng)下，在線(xiàn)設(shè)計(jì)工具可以還能有多少的可能性，或許看完這篇文章，你也會(huì)產(chǎn)生不少新的看法~

1. 要什么有什么

巧婦難為無(wú)米之炊，在聊資源怎么用之前，還是得先看看都有什么資源。

? 設(shè)計(jì)規(guī)范和組件庫(kù)

打開(kāi)即時(shí)設(shè)計(jì)的資源廣場(chǎng)，最醒目的位置就放著三套設(shè)計(jì)規(guī)范，螞蟻的 Ant Design、微信小程序、安卓 Material，下面還能找到鴻蒙、iOS 等各種官方資源，很明顯是比較重要的內(nèi)容了。

確實(shí)，在作品集里我們可以毫無(wú)顧忌地發(fā)揮自己天馬行空的想象力和創(chuàng)意，但是在日常工作中，遵循一定的設(shè)計(jì)規(guī)范絕對(duì)是必要的。

由大廠團(tuán)隊(duì)精心總結(jié)的設(shè)計(jì)規(guī)范，質(zhì)量自然不用說(shuō)，不管是用來(lái)設(shè)計(jì)對(duì)應(yīng)平臺(tái)的應(yīng)用，還是當(dāng)成其他作品的參考，都能實(shí)現(xiàn)非常不錯(cuò)的效果。

而對(duì)應(yīng)著完整的設(shè)計(jì)規(guī)范，即時(shí)設(shè)計(jì)還專(zhuān)門(mén)整理了相當(dāng)數(shù)量的配套組件庫(kù)，可以直接應(yīng)用在設(shè)計(jì)中。

? 種類(lèi)豐富的其他資源

除了上面最重要的兩類(lèi)資源外，即時(shí)設(shè)計(jì)里的資源還有很多，雖然量級(jí)還趕不上專(zhuān)業(yè)的資源站，但提供相當(dāng)精準(zhǔn)，各類(lèi)型的概念 App、網(wǎng)頁(yè)設(shè)計(jì)，豐富的運(yùn)營(yíng)圖、PPT 案例，以及適應(yīng)不同需求的的圖標(biāo)、插畫(huà)、樣機(jī)模型等，幾乎涵蓋了日常設(shè)計(jì)的各種場(chǎng)景。

而且這些資源還支持篩選「是否可商用」，明確哪些用于參考學(xué)習(xí)、哪些直接可以商用，讓你放心使用，無(wú)需擔(dān)心版權(quán)問(wèn)題。

可能有朋友看到這會(huì)問(wèn)了，你也說(shuō)了這些資源雖然夠豐富，但還是趕不上我收藏夾里那些資源站，那我干嘛非要從這里找資源呢？

別急，還記得我們最開(kāi)始說(shuō)的么，這是一套完全不同的資源用法，而且一定要配合著工具才能體現(xiàn)出它的價(jià)值，而它的不同自然要看完下面的內(nèi)容才會(huì)更清晰~

2. 想怎么用怎么用

首先，作為一款在線(xiàn)工具，它最大的優(yōu)勢(shì)就是在線(xiàn)的資源不需要下載，可以直接保存到設(shè)計(jì)工具中，而具體到各種資源里，還有很多高效的用法：

? 快速「使用」整個(gè)文件

在線(xiàn)的設(shè)計(jì)規(guī)范、模板、App 和網(wǎng)頁(yè)概念設(shè)計(jì)等很多完整的資源，都只用點(diǎn)擊一下「使用」就能保存到工作臺(tái)中打開(kāi)，一步直達(dá)，沒(méi)有任何的多余步驟。

這些保存好的資源，可以像其他工具一樣按照自己的需求自由地使用，而不一樣的地方，則在于即時(shí)設(shè)計(jì)工具本身的特色，就拿規(guī)范來(lái)說(shuō)吧，我們可以將其中最重要的顏色、文本、陰影等樣式分別創(chuàng)建為獨(dú)立的全局樣式，更高效的運(yùn)用到具體項(xiàng)目中。

創(chuàng)建好后的全局樣式可以實(shí)現(xiàn)一鍵快速切換，批量修改等操作，甚至在即時(shí)設(shè)計(jì)里還能做到云同步，就算是把設(shè)計(jì)稿分享給他人，對(duì)方也能直接對(duì)文件中的樣式進(jìn)行編輯和復(fù)用，體現(xiàn)出了協(xié)作的優(yōu)勢(shì)。

? 一鍵「引用」資源庫(kù)

在這里才真正展現(xiàn)出即時(shí)設(shè)計(jì)資源和工具本身高度集成的優(yōu)秀特性。

資源廣場(chǎng)的資源分為兩大類(lèi)型，一類(lèi)是像上面的規(guī)范和概念 App 這種可以直接保存的完整文件，還有一類(lèi)，則是可以一鍵「引用」到資源庫(kù)的組件、圖標(biāo)、插畫(huà)等素材，引用之后，能夠直接在編輯頁(yè)拖拽使用所有的內(nèi)容，實(shí)用性極高。

形式上有點(diǎn)類(lèi)似 Sketch 的 Library，但是實(shí)際使用起來(lái)，無(wú)論是直接引用無(wú)需下載的優(yōu)勢(shì)，還是左側(cè)面板的瀏覽和拖拽體驗(yàn)，都要比 Sketch 來(lái)的更加方便和好用！

即時(shí)設(shè)計(jì)的引用組件也有很豐富的用法，屬性獨(dú)立可修改的實(shí)例組件、方便整理和快速?gòu)?fù)用的引用組件庫(kù)、更高級(jí)的引用組件變體等等，講起來(lái)內(nèi)容有點(diǎn)多，這次就先不展開(kāi)啦~

? 自帶無(wú)版權(quán)圖片和智能填充

如果你在設(shè)計(jì)時(shí)需要用到圖片，即時(shí)設(shè)計(jì)直接在編輯頁(yè)的資源庫(kù)里提供了 pixbaby 的在線(xiàn)無(wú)版權(quán)圖片，搜索后就可以點(diǎn)擊或者拖拽運(yùn)用到作品中，模擬更加真實(shí)的頭像、banner、圖文卡片等組件展示效果。

另外他們還自帶「智能填充」的插件，可以快速隨機(jī)填充各種類(lèi)型的圖片和文本，讓你徹底擺脫單調(diào)的占位元素！

? 自帶 iconfont 插件

如果你覺(jué)得圖標(biāo)不夠用，他們最近又剛好上線(xiàn)了 iconfont 插件，作為國(guó)內(nèi)最大的圖標(biāo)站，數(shù)量上必然不用擔(dān)心，而且直接搜索關(guān)鍵詞就能修改參數(shù)拖拽使用，在便利性上也比往常還要從 iconfont 里復(fù)制 SVG 粘貼到設(shè)計(jì)界面的操作高上很多！

看到這里，有成功 get 到這一整套在線(xiàn)資源+設(shè)計(jì)的優(yōu)勢(shì)了嗎？

從設(shè)計(jì)規(guī)范的樣式到組件，再?gòu)哪０逅夭牡綀D片、圖標(biāo)，最后到個(gè)人的設(shè)計(jì)創(chuàng)作，基本涵蓋了設(shè)計(jì)流程中的所有關(guān)鍵節(jié)點(diǎn)，最難得的是，每一個(gè)環(huán)節(jié)都在即時(shí)設(shè)計(jì)這一個(gè)工具網(wǎng)站中完成，沒(méi)有借助任何其他工具，而且資源和設(shè)計(jì)一體化所帶來(lái)的優(yōu)秀體驗(yàn)和效率提升，絕對(duì)要遠(yuǎn)比你想象的更大！

可能有朋友又會(huì)問(wèn)了，這一整套看下來(lái)好是好，但是好像只能用它里面提供的資源啊，那萬(wàn)一我要用的沒(méi)有，豈不是很尷尬？

其實(shí)我一開(kāi)始也有和你同樣的顧慮，但是在我發(fā)現(xiàn)下面這個(gè)功能后，問(wèn)題就全都被解決了。

3. 通過(guò)個(gè)人資源庫(kù)實(shí)現(xiàn)資源復(fù)用

這是即時(shí)設(shè)計(jì)中最獨(dú)特的功能之一，它的入口很淺，和引用的資源庫(kù)放在一起，很容易被忽略，但是這個(gè)功能它有多好用呢，你可以把它當(dāng)成是在線(xiàn)版本的 Eagle……

當(dāng)然，目前還沒(méi)有 Eagle 那么強(qiáng)大，但是在線(xiàn)的優(yōu)勢(shì)，以及和工具高度集成的特性，都讓它的實(shí)用價(jià)值得到了極大的提升。

它可以將所有你想用但是資源廣場(chǎng)里沒(méi)有的資源，比如設(shè)計(jì)時(shí)導(dǎo)入的素材，甚至是你創(chuàng)作的任何引用組件、變體、圖標(biāo)等等所有的內(nèi)容，通通上傳到「?jìng)€(gè)人資源庫(kù)」，精準(zhǔn)地整理出獨(dú)屬于你的設(shè)計(jì)規(guī)范、組件庫(kù)，或者是素材庫(kù)。

而且這同樣是云端的功能，和在線(xiàn)資源的性質(zhì)幾乎完全一樣，不會(huì)占用本地空間，打開(kāi)瀏覽器就能拖拽使用，無(wú)需重新設(shè)計(jì)、篩選，真正實(shí)現(xiàn)了將每次設(shè)計(jì)過(guò)程中的資產(chǎn)最大程度地歸納復(fù)用！

4. 延伸：獨(dú)有的在線(xiàn)字體庫(kù)

還沒(méi)完哦~ 在這套完美閉環(huán)的一體化在線(xiàn)資源設(shè)計(jì)流程之外，還有更大的驚喜，因?yàn)樽煮w也是一種設(shè)計(jì)資源，所以如果能把字體也加入到這套在線(xiàn)資源用法中，是不是會(huì)更容易地感受到用在線(xiàn)工具做設(shè)計(jì)的優(yōu)勢(shì)呢？

即時(shí)設(shè)計(jì)還真實(shí)現(xiàn)了，它支持了將字體導(dǎo)入云端，讓你可以搭建一個(gè)在線(xiàn)的字體庫(kù)，和其他資源一樣直接線(xiàn)上使用，總之既保留了本地字體的便利，又完美地解決了本地字體重復(fù)分享、下載、安裝這些繁瑣問(wèn)題，多了一種其他工具所無(wú)法提供的全新體驗(yàn)！

官方對(duì)比圖

總結(jié)

以上就是使用即時(shí)設(shè)計(jì)這段時(shí)間里，我總結(jié)出的在線(xiàn)資源設(shè)計(jì)方法了，整體并不復(fù)雜，看完文章后上手應(yīng)該沒(méi)有任何問(wèn)題，可能你也已經(jīng)迫不及待地想要親自感受一下了，那就別等啦，未來(lái)一定是云端工具的天下，試著從現(xiàn)在開(kāi)始就養(yǎng)成在線(xiàn)使用資源的習(xí)慣吧！

「即時(shí)設(shè)計(jì)」官網(wǎng)地址：https://js.design

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」