值得收藏！一套你從沒見過的在線資源使用方法

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

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

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

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

沒錯，F(xiàn)igma 做不到，Sketch 也做不到，盡管它們在某些程度上可以有類似的效果，但體驗(yàn)差異非常大，如果想看看它到底有什么不一樣的話，不妨我一起了解下吧，大綱如下：

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

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

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

1. 要什么有什么

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

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

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

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

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

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

? 種類豐富的其他資源

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

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

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

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

2. 想怎么用怎么用

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

? 快速「使用」整個文件

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

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

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

? 一鍵「引用」資源庫

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

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

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

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

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

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

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

? 自帶 iconfont 插件

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

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

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

可能有朋友又會問了，這一整套看下來好是好，但是好像只能用它里面提供的資源啊，那萬一我要用的沒有，豈不是很尷尬？

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

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

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

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

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

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

4. 延伸：獨(dú)有的在線字體庫

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

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

官方對比圖

總結(jié)

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

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

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