Framer Studio for mac

Framer Studio for mac是Mac平臺(tái)上的一款原型交互設(shè)計(jì)工具，Framer Studio for mac出現(xiàn)新版本更加適合設(shè)計(jì)師們，完全可以不寫任何代碼就能做出簡(jiǎn)單效果。不過(guò)在不斷地代碼練習(xí)中也能實(shí)現(xiàn)更加復(fù)雜的交互原型設(shè)計(jì)。當(dāng)然，軟件永遠(yuǎn)在不斷的更新不斷的進(jìn)步，也希望用戶一如既往的支持。

軟件特色

Framer.js 的創(chuàng)始人 Koen Bok 和 Jorn van Dijk 分別是之前 Mac 平臺(tái)著名的軟件開(kāi)發(fā)公司 Sofa 的創(chuàng)始人和設(shè)計(jì)總監(jiān)，隨著 Sofa 幾年前被 Facebook 收購(gòu)，他們也都加入到 Facebook 做起了產(chǎn)品設(shè)計(jì)，但最近兩人離職后創(chuàng)立了 Podium，專注于打造小而美的生產(chǎn)力工具，當(dāng)然目前還只是針對(duì) Mac 平臺(tái)，可以說(shuō)是建立了第二個(gè) Sofa 吧。

其實(shí) Framer.js 很早就推出并且開(kāi)源了，隨著最近 3.0 的發(fā)布，底層代碼已經(jīng)重新全寫了，功能和動(dòng)畫效果也更加完善了，官網(wǎng)上的教程和例子也很豐富，可以看到利用它可以創(chuàng)造出和 Carousel，Google Now 這些 app 一樣的復(fù)雜交互。另外它還提供了一個(gè) The Framer Generator，可以方便的讓設(shè)計(jì)師把 photoshop 或 Sketch 里的設(shè)計(jì)圖導(dǎo)入到 Framer.js 里面，而這次 Framer Studio 的發(fā)布，讓這一創(chuàng)作過(guò)程更加簡(jiǎn)便了，極大了方便了設(shè)計(jì)師，并且之前內(nèi)測(cè)時(shí)也得到了包括 Facebook，Dropbox 等公司的頂級(jí)設(shè)計(jì)師們的一致好評(píng)。

功能特點(diǎn)

1、新增圖形化設(shè)計(jì)方式

在圖形化的交互設(shè)計(jì)工具扎堆出現(xiàn)時(shí)，F(xiàn)ramer獨(dú)辟蹊徑鼓勵(lì)設(shè)計(jì)師用代碼進(jìn)行創(chuàng)作，但是由于編程門檻較高，一直以來(lái)很少有設(shè)計(jì)師愿意去嘗試使用。這一次估計(jì)Framer團(tuán)隊(duì)也意識(shí)到了這個(gè)問(wèn)題，將改版后的Framer加入了可視化設(shè)計(jì)。

2、設(shè)計(jì)圖與代碼同步

Framer界面很清晰地被分成左右兩邊，左邊是代碼書寫區(qū)，右邊是圖形設(shè)計(jì)區(qū)?？雌饋?lái)好像有點(diǎn)分裂，但其實(shí)不然。當(dāng)你在右側(cè)進(jìn)行圖形設(shè)計(jì)時(shí)，左邊對(duì)應(yīng)的代碼也會(huì)跟著改變；當(dāng)你在左側(cè)編寫代碼時(shí)，也能實(shí)時(shí)看見(jiàn)右側(cè)的圖形跟著變化。

3、支持圖片文件拖入

以前在進(jìn)行設(shè)計(jì)時(shí)如果需要圖片，除了直接導(dǎo)入sketch和ps設(shè)計(jì)文件，就只能把圖片放進(jìn)對(duì)應(yīng)文件目錄下。但這一次你可以使用一種更加簡(jiǎn)單的方式——直接將圖片拖進(jìn)編輯區(qū)——Framer會(huì)自動(dòng)將圖片轉(zhuǎn)化成代碼。

4、不只能插入圖層，交互動(dòng)作也能插入

我們不僅僅可以通過(guò)直接插入的方式添加一些圖層，還可以插入狀態(tài)和事件，來(lái)實(shí)現(xiàn)可交互的效果。

同類軟件