Framer 快速上手課程– 設計、產生程式碼與協同作業

Contents

還記得精實創業這本書講的 MVP 概念？想要先建構一個 App 原型而且可以精確的描述 App 互動功能與 UI 流程體驗，Framer 在這個領域是一個功能強大的輔助設計工具，它可以匯入 Sketch 檔案，設計擬真的 App 原型與 UI 互動流程，並可以使用真實的資料 ( 例如地圖資訊 ) ，花時間設計一個接近實際運作功能的原型，可以幫你在與客戶需求討論階段節省下不少時間，更可以增進與工程師實作之前溝通的效率，全世界許多知名的公司如 Dropbox 、Google 、Facebook、Disney 、和 Uber 都有在使用
想要學習 Framer ? 這堂課的講師風格很活潑，讓你快速上手這個功能強大的原型設計工具

我會學到些什麼呢？

學生將學習Framer的基礎知識，這是一個驚嘆的設計和原型設計工具
介面設計，展現原本想表現的方法。
用易於學習的程式碼活靈活現出設計。
使用進階的手勢和互動創建漂亮的原型
將設計從靜態轉換為動態，真的很快。
在本地設備上分享你的設計和預覽。

需求

你將需要安裝最新版本的Framer。有一個15天的試用版，你可以在他們的網站上下載。
你需要一台Mac電腦
其他設計工具（如Sketch）的一些基本知識將有幫助，但不是必需的
本課程有基本的程式設計。任何初學者都可學會。

說明

2017年7月4日更新

發佈關於在專案中添加聲音的講座，以及如何通過事件和動畫來觸發它們。
在第三部分添加了一個測驗。測試你的知識！

讓我們來學Framer吧!

Framer是一個可繪製、原型製作、寫程式、和跨團隊共享專案的工具。它將視覺編輯的熟悉程度與程式碼的靈活性相結合。它讓你在一個智能界面中運作整體的設計工作流程。

使用Framer，你可以提供端到端的體驗。在將作品交給工程師之前，Framer可以讓你完善和驗證互動、動畫和流程。

Framer彌合了設計和開發之間的斷層，使其成為全球產品團隊的首選工具，如Dropbox、Facebook、Google、Disney 和 Uber。

界面設計，以驚人的方式。

使用Framer設計，你耍點花招就可獲得熟悉且最喜愛的圖形工具。 Framer直觀的自動佈局和智能分組算法使響應式設計變得輕而易舉。在特定設備的螢幕上繪製像素完美的精度，然後打開動畫的定位。 Framer是一種設計工具，製作互動作品。

你可以插入畫板、繪製圖層、添加文字和圖像。添加到畫布中的每個新圖層都會響應它周圍的環境。它的反應是如此的好，感覺像變魔術。這裡介紹一些讓你用 Framer 做出特別且有趣的設計：

自動排序與畫板。
插入和操作形狀。
高級的文本工具
自動化層次嵌套
適用於所有設備的畫布
圖標管理面板。
圖層裁剪

互動設計，快捷且容易

即使你是初學者，Framer也可以輕鬆上手寫程式碼。你只需要一鍵插入帶有自動代碼的動畫。通過簡單的滑塊控件和直接操作做進一步客製化。你可以使用組件添加預製本機互動和應用程式的多螢幕流程。這是所見即所得，很簡單，由程式碼啟動支持。

自動產生程式碼使你的設計生活只需插入動畫或事件那麼簡單。風格則採用滑塊控件或直接在畫布中進行編輯。無論你想要做什麼，Framer始終保持你的程式碼完好無損。以下是你可以輕鬆實踐的一些事情：

插入圖層、動畫、事件和片段。
全功能程式碼編輯器。
智能自動完成
應用程式內的文檔。
錯誤檢查員。
直接在畫布上放置圖層。
視覺化屬性編輯。
設備選擇器
可拆卸帆布
實時畫布同步。

Framer使設計和原型製作變得容易。

使用Framer，你可以更智能的方式設計，你可以使用簡單的程式設計讓螢幕活起來，你可以無縫與你的團隊或客戶無縫分享與協作。

目標受眾

想要使用高級原型設計工具的設計師
開發人員希望運用他們既有的 JavaScript 技巧在技術上增添可用的設計工具
正在尋找一體化設計工作流程的設計師
想要創建響應式佈局和令人驚嘆的互動的設計師

關於講師

Pablo Stanley 產品設計師

你好，我是Pablo Stanley。我是舊金山的產品設計師。我是舊金山Carbon Health這家醫療保健創業公司的設計師和共同創始人。我喜歡解決設計難題、製作看起來傻傻的插圖、編怪胎的音樂、創作豐富多彩的動畫GIF、嚼素食漢堡和寫小說漫畫。

教學輔導是我新發現的激情之一。我想盡可能地學習和教學，Udemy是最好的平台。

我也創作一個名為“設計團隊”的漫畫系列。

點選這個✨優惠連結✨ 課程特價 | Udemy 永久擁有課程 NT330 起( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現