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

還記得精實創業這本書講的 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是最好的平台。

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

🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境？LN+ for Web 已經針對 ChatGPT 的整合做最佳化

---

🙌 讓 Notion AI 成為你線上學習的得力助手，詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結

---

• 點選這個✨優惠連結 ，課程最低價 NT390 起( 登入後將看到 ）
• 辦公室生產力課程特價連結 
• Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
• 手機上點選優惠連結看到的價格比電腦上看到的貴
• ＄代表當地貨幣, 如在台灣為 NT
• 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現

---

報名參加課程

Sponsored by Udemy

---

也許你會有興趣

• 更多UI/UX線上課程
• 歡迎加入 Framer Taiwan 社群
• 什麼是 MVP ?
• 一天內從產品概念到完成 MVP
• 成為產品經理
• Soft & Share 團購和特價線上課程  加入這個社團追蹤我們的團購訊息與 特價線上課程
• 追蹤這個   Twitter  ，獲得特價線上課程訊息

使用 e-mail 追蹤 Soft & Share 網站