2014 年可謂「原型工具元年」，從這一年開始，各種原型工具層出不窮：Pixate、Form、Origami、InVision、Framer…相比之前的工具的匱乏，設計師有了眼花繚亂的選擇。當然不同的設計工具有著不同的設計思路，相對應也有著不同的學習門檻。對於原型而言，最重要的是能幫助設計師們梳理思路和表達設計意圖，尤其是可以幫助設計師理解工程是如何實現某個交互方式的，從這樣的出發點來看，Framer 表現的最好，尤其是在幫助設計師理解工程實現上的作用極大。

也正因 Framer 的「工程化」，很多沒有工程背景的設計師學習難度很大（當然他們也在努力的讓學習門檻降低），因此我們打算舉辦一場 Framer Meetup，幫助在北京並且對 Framer 有興趣的設計師更快的理解和上手。於是我們聯繫了 Framer 官方看看他們對此有什麼想法，他們表示很開心並且發來一批資料，都是其他國家和地區舉辦 Framer Meetup 的 Keynote，從這些東西來看其實我們經常提到的「Framer 學習曲線陡峭」在全世界都一樣，並不是他們就更厲害什麼的。

得到官方支持之後（T 恤、stickers）就可以名正言順的開搞了，我們計劃用一整個下午幫助大家從入門到精（放）通（棄），強度會很大，因此希望你在來之前就已經對 Framer 有些許了解，並且掌握了基本的代碼知識（比如了解什麼是「變數」、什麼是「賦值」…），這樣可以更好的跟上進度，下面是詳細計劃：

日程

時間

12 月 3 號（下周六） 下午 2:00 ~ 5:30

地點

知乎辦公室

人數

20（空間有限 QAQ）

報名

https://nvite.com/FramerBeijing/f5da（因人數過多場地有限，參與名單以微信群成員為準~）

小獎品

T 恤、Stickers

需要你準備的

• 裝好 Framer 的筆記本電腦

• 了解最基本的代碼知識（比如什麼是「賦值」、什麼是「變數」）

課程

Framer Basic @陳加新

1. How Code Works?
1. What is Variable?
2. What is Object?
3. What is Event?
2. How to Use Them Build an Interactive Prototype?
3. How to Improve Productivity?
1. How State Works?
2. How For Loop Works?
3. How Class Works?

Framer Advanced @ Ray

1. Prototyping with Read Data

2. Undocumented APIs

3. Framer + NPM

4. Framer CSS Tricks

5. Let』s make a Dribbble client (Live)

6. Wrap your prototype to an real app (Optional)

以上就是此次 Framer Meetup 的全部計劃，帶上電腦來和我們一起度過一個愉快的周六吧！

可愛的贊助商

推薦閱讀：