@Sophia的玲瓏閣 ：前段時間Framer改版，讓這個軟件大熱，分出了設計和代碼兩種模式。我喜歡嘗試新鮮事物的性格，這下子也是躍躍欲試。這一周，終于靜下心來去嘗試做了一個demo。通過做這個demo，來說說設計師到底有沒有必要學習代碼。

Framer簡介

先來說說我對Framer的理解。

Framer是一個用來做動效的軟件，用來將咱們二維平面軟件設計出來的方案做成可以在手機上可以進行真實模擬操作交互的原型出來。市面上有很多種這樣的軟件，每個軟件的原理可能不太一樣，比方說Flinto，Principle，Origami等等。

絕大部分都是在視覺基礎上進行一些手勢的串聯，設計師只需要設置出類似流程線的東西，設置好一些參數（不需要寫代碼），軟件就會幫忙進行計算，然后渲染出demo，即咱們所說的原型。

Framer的不同之處，它是真的是讓設計師去寫代碼呀，通過代碼實現出原型，當然Framer它自己也做了很多的類似于效果包的代碼庫，設計師只需要調出來進行使用就可以。意思就是，不是每行代碼設計師都要敲，Framer是簡化后的代碼模式軟件。還有就是它支持Sketch等文件的導入，也就是說咱們可以在sketch上畫好了，再到Framer進行動態效果的呈現，不需要將每個圖層都在Framer進行代碼實現。（后來驗證，畫圖還是在Framer自己的設計模式進行畫實現才比較方便）

怎樣學習

入手Framer的時候，我先從它全英文的手冊開始看，跳過設計模式（粗略看了一下覺得跟sketch的用法很像），直接從代碼模式進行查看。知道了原來它是基于CoffeeScript語言進行demo開發的。當然，手冊網上也可以找到部分的中文翻譯，但更新不完全，我也下了一番功夫，將最新的Framer的代碼手冊翻譯成了中文，整理好了之后會給分享給大家。

CoffeeScript我也不會，于是又從網上去找相應的官方手冊，發現太難了，一點也不想看（原諒我也是個萌妹紙，偶爾也會任性）。

于是，我一不做二不休，直接從Framer官方網站的簡易版手冊和部分教學視頻開始學習。然后畫好了sketch文件，導入到Framer進行敲代碼了。當然也是不完全會的，先在官網上看手冊，然后加入一些學習小組的群在群里進行討論。

然后遇到都不懂的問題（畢竟咱們都是設計師），我就在下班后拿去請教公司的開發GG們，當然也不能太多，可以分開進行問幾個人，這樣每個人都比較輕松。

就這樣糾結了好幾天，一個雛形的demo算是做出來了。

我現在說的是很輕松，每一步實施起來都是困難重重，因為不懂所以會遇到很多問題，然后自己再耐心一個個解決。

學習中的收獲

這一個禮拜的收獲除了自己入門的Framer，還有幾點比較重要。

一是驗證了我一直強調的學習方法，即實踐總是讓自己學習最快的流程，沒有之一。

二是最為交互設計師，領悟到了之前開發GG們一直強調的一句話“設計師的方案是會影響到開發代碼實現的邏輯的”。設計師在做方案的過程中不要突發奇想去想一些很創新的idea，往往這些idea可以解決當前的交互問題，可能卻不知道影響了哪些地方的操作和邏輯的統一性?？紤]問題的時候不單單從一個小的點進行思考，如果可以，盡量從大局，即所有的功能點都進行一些思考。操作越統一，代碼越簡單，邏輯越清晰，實現起來也越方便。

設計師到底要不要學代碼

如果從大的方向來思考一下，設計師到底需不需要學習代碼？隨著我工作經驗的豐富，我從現階段的理解來跟大家聊聊。

主要可以分為兩個階段，如果是新手，也就是想換行到互聯網領域的設計師，或者說從業大概1~2年以內的設計師（求職的時候會給會代碼的設計師加分但不是主要的判斷依據），這個階段我建議暫時不需要將精力放在學代碼上面，這個階段主要是設計基本功的扎實，顏色、字體、排版的功底在這個階段更重要。

度過新手期，處于上升期或者穩定期的設計師，也就是工作2~3年以上的設計師，可以開始這方面的著手了，但依個人精力來進行一個判定，不強求。學了代碼自己思維訓練又多了一個維度，跟開發交流起來更加方便。不學的話自己主攻視覺UI這一層也很不錯。

總的來說，學了更好，不學影響也不是很大，術業有專攻，這只是一件錦上添花的事情。個人愚見，只限于同行進行交流。

會代碼的設計師會讓人看起來很酷，但不代表著職場核心競爭力會變強，人最核心的競爭力還是尋找問題核心的分析力以及解決問題的執行力。

作者簡介：Sophia的玲瓏閣，一枚愛折騰，愛健身的交互設計妹紙。

職場設計技能，更多教程搶先看，請關注作者的微信公眾號：「Sophia的玲瓏閣」

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com