figma下载_Figma和ProtoPie中的原型制作，比较
figma下載
第1部分 (Part 1)
Prototyping has never had such a high profile with a whole host of tools that now give you varying ability to realize your designs beyond their static UI and into a working usable thing. It’s fair to say that prototyping within tools has been a bit of a battlefield, with some UI tools offering basic prototyping on top of their established drawing features and others offering a more advanced but specialized set of prototyping features to enable designers to build more realistic experiences.
原型開(kāi)發(fā)從未具有如此高的知名度，它擁有大量的工具，這些工具現(xiàn)在使您能夠從靜態(tài)UI到可使用的東西來(lái)實(shí)現(xiàn)您的設(shè)計(jì)。 可以說(shuō)，工具內(nèi)的原型制作一直是一個(gè)戰(zhàn)場(chǎng)，有些UI工具在其既定的繪圖功能之上提供基本的原型制作，而其他UI工具則提供了一套更高級(jí)但更專(zhuān)業(yè)的原型制作功能，以使設(shè)計(jì)師能夠構(gòu)建更逼真的體驗(yàn)。
Today I want to look at Figma and ProtoPie who offer on the surface an overlap of features but with differences in their capabilities and approach to prototyping.
今天，我想看看Figma和ProtoPie，它們表面上提供了重疊的功能，但是在功能和原型制作方法上卻有所不同。
Figma is a fully-fledged UI creation tool that has some prototyping capabilities. Its prototyping features allow you to do basic clickthroughs with some nice simple motion design capabilities.
Figma是功能完善的UI創(chuàng)建工具，具有一些原型設(shè)計(jì)功能。 它的原型功能使您可以通過(guò)一些不錯(cuò)的簡(jiǎn)單運(yùn)動(dòng)設(shè)計(jì)功能來(lái)進(jìn)行基本的點(diǎn)擊操作。
ProtoPie, on the other hand, is not a UI creation tool per se, its focus is on interaction design and prototyping relying on tools such as Figma for UI creation. With ProtoPie you can build everything from basic clickthroughs all the way up to high fidelity prototypes — to the point where you would be hard-pressed to differentiate them from real apps.
另一方面， ProtoPie本身并不是UI創(chuàng)建工具，它的重點(diǎn)是交互設(shè)計(jì)和原型設(shè)計(jì)，該工具依賴(lài)于諸如Figma之類(lèi)的工具來(lái)創(chuàng)建UI。 借助ProtoPie，您可以構(gòu)建所有內(nèi)容，從基本的點(diǎn)擊一直到高逼真度的原型，直至難以將它們與真實(shí)應(yīng)用程序區(qū)分開(kāi)的地步。
This tutorial will hopefully give a good overview of what each tool is capable of doing, how they work individually but also how they can work together to complete your prototyping arsenal.
希望本教程能夠很好地概述每種工具的功能，它們各自的工作方式，以及它們?nèi)绾慰梢怨餐瓿稍驮O(shè)計(jì)庫(kù)。
我們會(huì)做什么 (What we’ll be doing)
To explore these tools we’ll be prototyping a fairly simple but common app login journey. I have already designed the screens and UI in Figma so that we can concentrate on Prototyping.
為了探索這些工具，我們將對(duì)一個(gè)相當(dāng)簡(jiǎn)單但通用的應(yīng)用程序登錄過(guò)程進(jìn)行原型設(shè)計(jì)。 我已經(jīng)在Figma中設(shè)計(jì)了屏幕和UI，以便我們可以專(zhuān)注于原型設(shè)計(jì)。
用戶(hù)體驗(yàn) (The user experience)
Before we get stuck in let’s review the experience we are looking to build.
在陷入困境之前，讓我們回顧一下我們正在尋求的經(jīng)驗(yàn)。
The login prototype has three views
登錄原型具有三個(gè)視圖
01應(yīng)用負(fù)荷 (01 Application load)
I want to start by loading the application animating its brand logo. I want to animate this to the top of the screen and then reveal the username and password text fields underneath. Because its a login screen and the primary action is to input the username first, I want to give focus to the username text field.
我想首先加載動(dòng)畫(huà)其品牌徽標(biāo)的應(yīng)用程序。 我想將此動(dòng)畫(huà)設(shè)置為屏幕頂部，然后在下面顯示用戶(hù)名和密碼文本字段。 因?yàn)樗且粋€(gè)登錄屏幕，并且主要的操作是首先輸入用戶(hù)名，所以我想重點(diǎn)介紹用戶(hù)名文本字段。
02登錄 (02 Login)
Once the user has typed their username I want to autofocus on the Password field. If the user types the correct password they will successfully log into the app’s home screen; if not then I want to show them that an error has occurred.
用戶(hù)鍵入用戶(hù)名后，我要在“ 密碼”字段上自動(dòng)對(duì)焦。 如果用戶(hù)輸入正確的密碼，他們將成功登錄到應(yīng)用程序的主屏幕； 如果不是，那么我想向他們顯示發(fā)生了錯(cuò)誤。
The user will then need to find and correct the error.
然后，用戶(hù)將需要查找并糾正錯(cuò)誤。
03首頁(yè) (03 Home)
Once the login credentials are correct the user will be logged in to the home screen. I want to also show a personalized message at the top of the home.
登錄憑據(jù)正確后，用戶(hù)將登錄到主屏幕。 我還想在家庭頂部顯示個(gè)性化消息。
In part 1 of this tutorial, we’ll be focussing on the application load.
在本教程的第1部分中，我們將專(zhuān)注于應(yīng)用程序負(fù)載。
在Figma中原型化應(yīng)用程序負(fù)載 (Prototyping application load in Figma)
Figma works by linking screens together, You define a start and end state, and then an animation type to define what happens in between.
Figma的工??作方式是將屏幕鏈接在一起，定義開(kāi)始和結(jié)束狀態(tài)，然后定義一種動(dòng)畫(huà)類(lèi)型以定義之間的關(guān)系。
To create the app load transition I’ve created these screens ( if you’re new to Figma these are called frames).
為了創(chuàng)建應(yīng)用程序加載過(guò)渡，我創(chuàng)建了這些屏幕(如果您不熟悉Figma，這些屏幕稱(chēng)為框架)。
Figma artboards for the app load transition用于應(yīng)用程序加載過(guò)渡的Figma美工板To prototype in Figma, you have to select the Prototype tab located in the right-hand contextual panel.
要在Figma中進(jìn)行原型制作 ，您必須選擇位于右側(cè)上下文面板中的Prototype標(biāo)簽。
Prototyping mode reveals little circular nodes on each frame (and nested frame). These nodes are what you use to connect frames together to allow you to create the interactions in between.
原型制作模式在每個(gè)框架(和嵌套框架)上顯示出很少的圓形節(jié)點(diǎn)。 這些節(jié)點(diǎn)是用于將框架連接在一起以允許您在它們之間創(chuàng)建交互的對(duì)象。
Figma has a special After Delay interaction which allows you to trigger animations automatically when the frame loads rather than by a user-generated interaction such as a button tap. This is useful as it allows me to ‘daisy-chain’ many frames together to achieve a seamless animation.
Figma具有特殊的After After交互作用，該交互作用使您可以在框架加載時(shí)自動(dòng)觸發(fā)動(dòng)畫(huà)，而無(wú)需通過(guò)用戶(hù)生成的交互作用(如按鈕點(diǎn)擊)觸發(fā)動(dòng)畫(huà)。 這很有用，因?yàn)樗试S我將許多幀“菊花鏈”在一起以實(shí)現(xiàn)無(wú)縫動(dòng)畫(huà)。
To connect two frames together I can click and drag the frame node from the first frame to the second or choose the destination frame in the Interaction sub-panel within the Prototype.
要將兩個(gè)框架連接在一起，我可以單擊框架節(jié)點(diǎn)并將其從第一個(gè)框架拖到第二個(gè)框架，或者在Prototype的Interaction子面板中選擇目標(biāo)框架。
In the case of my prototype, I want my first screen to animate automatically so I’m using the After Delay option. Because I want my logo to animate first before I show the login form I need a logo end-state frame.
對(duì)于我的原型，我希望我的第一個(gè)屏幕能夠自動(dòng)設(shè)置動(dòng)畫(huà)，因此我使用了After Delay選項(xiàng)。 因?yàn)槲蚁Ｍ陲@示登錄表單之前先對(duì)徽標(biāo)進(jìn)行動(dòng)畫(huà)處理，所以我需要一個(gè)徽標(biāo)結(jié)束狀態(tài)框。
Here I want to animate multiple object properties, namely position, and scale so I’ll use the Smart Animate option. Smart Animate works by figuring out individual property transformations between two states. Setting the Animation type to this gives me my first animation of the logo moving and scaling into position.
在這里，我想為多個(gè)對(duì)象屬性(即位置和比例)設(shè)置動(dòng)畫(huà)，因此我將使用“ 智能動(dòng)畫(huà)”選項(xiàng)。 Smart Animate通過(guò)找出兩個(gè)狀態(tài)之間的單個(gè)屬性轉(zhuǎn)換來(lái)工作。 設(shè)置動(dòng)畫(huà)類(lèi)型為此，我得到徽標(biāo)移動(dòng)和縮放到位置的第一個(gè)動(dòng)畫(huà)。
The second part of the animation is to show the login text fields. I simply want these to fade in so I set another After Delay between frames 2 and 3 and change the Animation preset this time to Dissolve.
動(dòng)畫(huà)的第二部分是顯示登錄文本字段。 我只是想讓它們淡入，所以我在第2幀和第3幀之間設(shè)置了另一個(gè)After Delay ，并將這次的Animation預(yù)設(shè)更改為Dissolve。
The final part of the app load animation is to give focus to the username text field and show the keyboard.
應(yīng)用程序加載動(dòng)畫(huà)的最后一部分是將焦點(diǎn)放在用戶(hù)名文本字段并顯示鍵盤(pán)。
Again I’m using After Delay for this. This time though I need to animate the keyboard up. To do this I’m using Smart Animate to move a fake keyboard into position. This means I need the keyboard on my previous frame but off-screen.
我再次為此使用After Delay 。 這次雖然我需要為鍵盤(pán)設(shè)置動(dòng)畫(huà)。 為此，我使用Smart Animate將假鍵盤(pán)移動(dòng)到適當(dāng)位置。 這意味著我需要鍵盤(pán)在上一幀但不在屏幕上。
In a real app, the user knows which text field has focus because of the flashing cursor. Because Figma doesn’t have a real keyboard I need to fake it, the best I can do is to add a static cursor in the text field. a cursor
在真實(shí)的應(yīng)用程序中，由于光標(biāo)閃爍，用戶(hù)知道哪個(gè)文本字段具有焦點(diǎn)。 因?yàn)镕igma沒(méi)有真正的鍵盤(pán)，所以我需要偽造它，所以我能做的最好的就是在文本字段中添加一個(gè)靜態(tài)光標(biāo)。 光標(biāo)
Below you can view the Figma prototype animation:
您可以在下面查看Figma原型動(dòng)畫(huà)：
ProtoPie中的原型應(yīng)用程序負(fù)載 (prototyping application load in ProtoPie)
Now let’s look at how we can achieve the same thing and more in ProtoPie
現(xiàn)在讓我們看看如何在ProtoPie中實(shí)現(xiàn)相同的目標(biāo)
To prototype my login in ProtoPie I need to import assets from Figma. The first thing I need to do before I import anything is to optimize my Figma file.
為了使登錄ProtoPie原型化，我需要從Figma導(dǎo)入資產(chǎn)。 導(dǎo)入任何內(nèi)容之前，我需要做的第一件事就是優(yōu)化Figma文件。
Because I’m doing all of the interaction inside of ProtoPie all I need from Figma are the assets. All of my assets for the login are covered by these three screens.
因?yàn)槲艺赑rotoPie內(nèi)部進(jìn)行所有交互，所以我從Figma中需要的就是資產(chǎn)。 這三個(gè)屏幕涵蓋了我所有的登錄資產(chǎn)。
First off I want my logo to be a single vector object. It was drawn using multiple paths which I don’t need access to in ProtoPie as I’ll only be animating the logo as a single object. To do this I can use the Flatten command to reduce the logo to a single vector object (CMD+E or Object Menu > Flatten Selection).
首先，我希望徽標(biāo)是單個(gè)矢量對(duì)象。 它是使用多個(gè)路徑繪制的，在ProtoPie中我不需要訪(fǎng)問(wèn)這些路徑，因?yàn)槲抑粫?huì)將徽標(biāo)作為單個(gè)對(duì)象進(jìn)行動(dòng)畫(huà)處理。 為此，我可以使用“展平”命令將徽標(biāo)縮小為單個(gè)矢量對(duì)象(CMD + E或“對(duì)象菜單”>“展平選擇”)。
The smaller logo on the second screen will just be used as a reference which I’ll delete later so it doesn’t need flattening but you can do so if you wish.
第二個(gè)屏幕上較小的徽標(biāo)將用作參考，稍后我將刪除它，因此它不需要展平，但是您可以根據(jù)需要這樣做。
I’ve made sure that I haven’t used components for anything, as a component when imported will be turned into a flattened graphic.
我已經(jīng)確保沒(méi)有使用任何組件，因?yàn)閷?dǎo)入時(shí)組件將變成平坦的圖形。
For the list on Home, I’m going to use the component flattening feature to my advantage. I’ve made each card a component. This means it will be flattened on import but as its still a component in Figma, I‘ll have access to its elements if I need to make any edits in the future. Nested frames map to ProtoPie containers so I can leave the cards grouping as is.
對(duì)于Home上的列表，我將利用組件展平功能來(lái)發(fā)揮自己的優(yōu)勢(shì)。 我已經(jīng)將每張卡都制成了組件。 這意味著它將在導(dǎo)入時(shí)變平，但由于它仍然是Figma中的一個(gè)組成部分，如果將??來(lái)需要進(jìn)行任何編輯，我將可以訪(fǎng)問(wèn)其元素。 嵌套框架映射到ProtoPie容器，因此我可以將卡片分組保持原樣。
With that, all done my assets are prepped and ready for when I need to import them into ProtoPie.
這樣，當(dāng)我需要將所有資產(chǎn)導(dǎo)入ProtoPie時(shí)，我的資產(chǎn)就做好了準(zhǔn)備。
設(shè)置我的ProtoPie文件 (Setting up my ProtoPie file)
Before I import anything I need to set up my pie.
在導(dǎo)入任何東西之前，我需要先設(shè)置好餡餅。
By default, a new pie will default to an iPhone 11 Pro/X which is what I want but you can choose from many presets by tapping the device name in the toolbar just below the file name.
默認(rèn)情況下，新的餅圖將默認(rèn)為我想要的iPhone 11 Pro / X，但是您可以通過(guò)點(diǎn)擊文件名下方工具欄中的設(shè)備名稱(chēng)，從許多預(yù)設(shè)中進(jìn)行選擇。
ProtoPie has a dedicated Figma importer which allows me to easily import my assets, so the first thing I’ll do is tap Import and choose Figma.
ProtoPie具有專(zhuān)用的Figma導(dǎo)入器，它使我可以輕松導(dǎo)入我的資產(chǎn)，因此我要做的第一件事是點(diǎn)擊Import并選擇Figma 。
I’ve already logged into Figma from ProtoPie, once done ProtoPie will automatically read the file I have open in Figma in the background. in the importer, I can see a list of my frames in the same order that they appear in my Figma file. The first screen I want to import is Start. A thing to note; to the right of the frames list is an Import Size list. ProtoPie currently only supports pixel-based graphics via import; for the most part, this is fine for our needs. All I need to make sure is that the screen density in the box matches the screen density of my pie, which in this case for iPhone 11 is @3x (Note: There are SVG import capabilities outside of the Figma import).
我已經(jīng)從ProtoPie登錄到Figma，一旦完成，ProtoPie將自動(dòng)在后臺(tái)讀取我在Figma中打開(kāi)的文件。 在導(dǎo)入程序中，我可以按照與我的Figma文件中出現(xiàn)的順序相同的順序查看框架列表。 我要導(dǎo)入的第一個(gè)屏幕是Start 。 要注意的事情； 框架列表右側(cè)的是“ 導(dǎo)入大小”列表。 ProtoPie當(dāng)前僅通過(guò)導(dǎo)入支持基于像素的圖形。 在大多數(shù)情況下，這可以滿(mǎn)足我們的需求。 我只需要確保框中的屏幕密度與我的餡餅的屏幕密度匹配即可，在這種情況下，iPhone 11的屏幕密度為@ 3x(注意：在Figma導(dǎo)入之外，還有SVG導(dǎo)入功能)。
I’m going to leave the rest of the dialog settings at their defaults and press Import.
我將其余的對(duì)話(huà)框設(shè)置保留為默認(rèn)值，然后按Import 。
I now have my start screen imported. In the layers panel on the left, I can see a single logo graphic.
現(xiàn)在，我的啟動(dòng)屏幕已導(dǎo)入。 在左側(cè)的圖層面板中，我可以看到一個(gè)徽標(biāo)圖形。
ProtoPie has the concept of multiple pages like Figma does but in ProtoPie these are called scenes. We are going to use scenes to build our prototype but they work a bit differently to Figma pages.
ProtoPie具有類(lèi)似于Figma的多個(gè)頁(yè)面的概念，但是在ProtoPie中，這些稱(chēng)為場(chǎng)景。 我們將使用場(chǎng)景來(lái)構(gòu)建我們的原型，但是它們的工作方式與Figma頁(yè)面略有不同。
動(dòng)畫(huà)模型 (The Animation model)
Unlike Figma, ProtoPie doesn’t have a Smart Animate feature. Scenes are merely a way of breaking up the complexity of your prototype. Scenes do, however, have a similar set of page transitions to Figma which are detailed below:
與Figma不同，ProtoPie沒(méi)有Smart Animate功能。 場(chǎng)景僅僅是打破原型復(fù)雜性的一種方式。 但是，場(chǎng)景確實(shí)具有與Figma類(lèi)似的一組頁(yè)面過(guò)渡，下面將對(duì)此進(jìn)行詳細(xì)介紹：
ProtoPie transition| Figma transition
原型過(guò)渡 | Figma過(guò)渡
None | Instant
無(wú) | 瞬間
Fade | Dissolve
淡入淡出 溶解
Pop | No comparison, Pop is a scaling animation
流行音樂(lè) | 沒(méi)有可比性，Pop是縮放動(dòng)畫(huà)
Slide In | Slide In
滑入 滑入
Slide Out | Slide Out
滑出 滑出
N/A | Move In ( Can be created as a custom transition)
N / A | 移入(可以創(chuàng)建為自定義過(guò)渡)
N/A | Move Out ( Can be created as a custom transition)
N / A | 移出(可以創(chuàng)建為自定義過(guò)渡)
N/A | Push ( Can be created as a custom transition)
N / A | 推送(可以創(chuàng)建為自定義過(guò)渡)
For our prototype, we are going to use scenes but instead of thinking of scenes representing every state like Figma, we are going to think of scenes as representing app views.
對(duì)于我們的原型，我們將使用場(chǎng)景，而不是考慮將場(chǎng)景表示為每個(gè)狀態(tài)(例如Figma)，而是將場(chǎng)景視為表示應(yīng)用程序視圖。
Our first scene will be our Login View and will start with the logo animation and end with the login form. Our second scene will be our Logged-In View.
我們的第一個(gè)場(chǎng)景是“ 登錄視圖” ，它將以徽標(biāo)動(dòng)畫(huà)開(kāi)始，并以登錄表單結(jié)束。 我們的第二個(gè)場(chǎng)景是登錄視圖 。
Let’s grab the other graphics we need for our login view by going back to the Figma import and this time choosing the Login frame.
返回到Figma導(dǎo)入，這次選擇“ 登錄”框架，以獲取登錄視圖所需的其他圖形。
Importing the Login frame導(dǎo)入登錄框架We need to do some tidying up so I’m going to change the name of Scene 1 to Login. Scenes can be accessed by tapping the Scenes icon just under Import.
我們需要進(jìn)行一些整理，因此我將場(chǎng)景1的名稱(chēng)更改為Login 。 可以通過(guò)點(diǎn)擊Import下方的Scenes圖標(biāo)來(lái)訪(fǎng)問(wèn)場(chǎng)景。
Like Figma all objects in ProtoPie have properties that you can change such as position and opacity and can be located in the right-hand context panel; I want my view to represent the starting state so I’m going to set the opacity of my title, text fields and authentication message to 0. So now all I have visible is the two logos.
像Figma一樣，ProtoPie中的所有對(duì)象都具有可以更改的屬性，例如位置和不透明度，并且可以位于右側(cè)上下文面板中。 我希望我的視圖代表開(kāi)始狀態(tài)，因此我將標(biāo)題，文本字段和身份驗(yàn)證消息的不透明度設(shè)置為0。所以現(xiàn)在我看到的是這兩個(gè)徽標(biāo)。
In ProtoPie we don’t animate between a start and end state but instead change properties over time. This is a more classic way of animating and will be familiar to you if you’ve used tools such as After Effects. For our logo, we want to animate its position and size over time. We also want this to happen as soon as the view loads.
在ProtoPie中，我們不在開(kāi)始狀態(tài)和結(jié)束狀態(tài)之間進(jìn)行動(dòng)畫(huà)處理，而是隨時(shí)間更改屬性。 這是一種更經(jīng)典的動(dòng)畫(huà)制作方式，如果您使用過(guò)After Effects之類(lèi)的工具，將會(huì)很熟悉。 對(duì)于我們的徽標(biāo)，我們希望隨時(shí)間變化其位置和大小。 我們還希望這種情況在視圖加載后立即發(fā)生。
Both tools share the interaction model:
這兩個(gè)工具共享交互模型：
Object > Trigger > Response
對(duì)象>觸發(fā)器>響應(yīng)
Our object, in this case, is our logo; with it selected I’m going to add a Start response in the trigger panel.
在這種情況下，我們的對(duì)象是我們的徽標(biāo)； 選擇它后，我將在觸發(fā)面板中添加一個(gè)開(kāi)始響應(yīng)。
Now I’ve added the Trigger (Start) I can add a response. I’m going to add two responses by tapping the + icon under Start, Scale and Move.
現(xiàn)在，我已經(jīng)添加了觸發(fā)器(開(kāi)始)，可以添加響應(yīng)。 我將通過(guò)點(diǎn)擊“ 開(kāi)始”，“縮放”和“ 移動(dòng)”下的+圖標(biāo)來(lái)添加兩個(gè)響應(yīng)。
I know where I want my logo to end up as I have the reference image (the small logo) already in my scene so I’m just going to read off the values. This is an easy way to mimic the smart move approach in Figma and should take some of the sting out of a different way of doing things until you get used to it. One more thing I want to do before I set the values is to change the Origin point of both logo graphics which by default are set to the top left, to the center. The origin point is where the animation will pivot from, I want mine to animate from the center.
我知道我希望徽標(biāo)結(jié)束的位置，因?yàn)槲业膱?chǎng)景中已經(jīng)有參考圖像(小徽標(biāo))，因此我將讀取這些值。 這是模仿Figma中的智能移動(dòng)方法的簡(jiǎn)便方法，并且應(yīng)該從一些不同的處理方式中脫穎而出，直到您習(xí)慣了。 在設(shè)置值之前，我還想做的一件事是將兩個(gè)徽標(biāo)圖形的“ 原點(diǎn)”更改為默認(rèn)設(shè)置為左上角至中間。 原始點(diǎn)是動(dòng)畫(huà)旋轉(zhuǎn)的起點(diǎn)，我希望我的動(dòng)畫(huà)從中心開(kāi)始。
Going back to my responses I’m going to first read of the end width and height of my small logo and add them to the Scale response values which are both 96.
回到我的回答中，我將首先閱讀小徽標(biāo)的末端寬度和高度，并將它們添加到Scale響應(yīng)值中，它們均為96 。
Next, I want to tweak the animation timings. In Figma, we used the After Delay interaction with duration, and then we set another duration in the Animate section. In ProtoPie we do this by adding values to Start Delay and Duration which you can see in the image below. ProtoPie’s values are in seconds as opposed to Figma using milliseconds so 200ms would be 0.2.
接下來(lái)，我想調(diào)整動(dòng)畫(huà)時(shí)間。 在Figma中，我們使用了After Delay交互作用與持續(xù)時(shí)間， 然后我們?cè)O(shè)置另一個(gè) 動(dòng)畫(huà)部分中的持續(xù)時(shí)間。 在ProtoPie中，我們通過(guò)在“ 開(kāi)始延遲”和“ 持續(xù)時(shí)間”中添加值來(lái)做到這一點(diǎn)，您可以在下圖中看到。 ProtoPie的值以秒為單位，而Figma使用毫秒，因此200ms為0.2。
Unlike Figma, we have more control over the individual properties which means I can set my move trigger to different values. I want to do this as I want a sort of swooping animation. You can see here I’ve changed the values slightly to create this animation effect. I can also now remove my reference logo image as its no longer needed.
與Figma不同，我們可以更好地控制各個(gè)屬性，這意味著我可以將移動(dòng)觸發(fā)器設(shè)置為不同的值。 我想要這樣做，因?yàn)槲蚁胍环N撲朔迷離的動(dòng)畫(huà)。 您可以在此處看到我稍微更改了值以創(chuàng)建此動(dòng)畫(huà)效果。 現(xiàn)在，我也可以刪除不再需要的參考徽標(biāo)圖像。
ProtoPie allows me to play with all object properties separately and it even has a basic timeline that you can access to the right of the interaction stack. This allows me to visually control delay and duration and is especially useful when choreographing complex motion.
ProtoPie允許我分別處理所有對(duì)象屬性，它甚至具有一個(gè)基本的時(shí)間軸，您可以訪(fǎng)問(wèn)交互堆棧的右側(cè)。 這使我可以從視覺(jué)上控制延遲和持續(xù)時(shí)間，在編排復(fù)雜動(dòng)作時(shí)特別有用。
動(dòng)畫(huà)形式 (Animating the form)
In the final part of my load animation, I want to fade in the title and form elements and give focus to the first text field.
在加載動(dòng)畫(huà)的最后一部分中，我要淡入標(biāo)題和表單元素，并將焦點(diǎn)放在第一個(gè)文本字段上。
One of the cool features of ProtoPie is that it has a real keyboard. To add this feature we need to edit our text field graphics to include a special input element.
ProtoPie的很酷的功能之一是它具有真實(shí)的鍵盤(pán)。 要添加此功能，我們需要編輯文本字段圖形以包括特殊的輸入元素。
I’m going to increase the opacity of my text fields so I can edit them and then add inputs from the text toolbar menu.
我將增加文本字段的不透明度，以便可以對(duì)其進(jìn)行編輯，然后從文本工具欄菜單中添加輸入。
The input element has a broad range of features and customization but I’m going to focus on restyling the field to match my design. I can completely replace my graphic field for username by changing the Placeholder Text and the input’s visual appearance using Radius to round the corners and Fill to change the color.
輸入元素具有廣泛的功能和自定義功能，但我將重點(diǎn)介紹如何重新設(shè)計(jì)字段以使其與我的設(shè)計(jì)相匹配。 我可以通過(guò)使用Radius圓角和Fill更改顏色來(lái)更改占位符文本和輸入的視覺(jué)外觀，從而完全替換用戶(hù)名的圖形字段。
You can control the type of keyboard for each input in Keypad options. For this one seeing as its a standard text field, I’m going to leave it at the defaults.
您可以在“ 鍵盤(pán)”選項(xiàng)中控制每個(gè)輸入的鍵盤(pán)類(lèi)型。 對(duì)于這個(gè)將其視為標(biāo)準(zhǔn)文本字段的人，我將其保留為默認(rèn)值。
I’ll then duplicate this field to use it for the password field. I can change the keyboard type for this to Text Password which will give the native password masking dots.
然后，我將復(fù)制該字段以將其用作密碼字段。 我可以將其鍵盤(pán)類(lèi)型更改為“ 文本密碼” ，以提供本機(jī)密碼屏蔽點(diǎn)。
I can now remove the graphic text field groups and animate the two text fields in by just fading them after the logo has moved into place. Because I want to apply the same fade animation to both text fields I’ll group them and apply the fade to the group container instead.
我現(xiàn)在可以刪除圖形文本字段組，并通過(guò)在徽標(biāo)移動(dòng)到位后將它們淡化來(lái)設(shè)置兩個(gè)文本字段的動(dòng)畫(huà)。 因?yàn)槲蚁雽?duì)兩個(gè)文本字段應(yīng)用相同的淡入淡出動(dòng)畫(huà)，所以將它們分組，然后將淡入淡出應(yīng)用于組容器。
I’ll set the Opacity of the group to 0 in the properties panel to set the default state and then with the group selected I’ll add an Opacity response to the Start trigger. I’ll set the Duration to 0.2 and the Start Delay to 0.6
我將在屬性面板中將該組的“ 不透明度 ”設(shè)置為0以設(shè)置默認(rèn)狀態(tài)，然后在選擇該組的情況下，將“ 不透明度”響應(yīng)添加到“ 開(kāi)始”觸發(fā)器。 我將“ 持續(xù)時(shí)間”設(shè)置為0.2 ，“ 啟動(dòng)延遲”設(shè)置為0.6
The final thing I want to do for the login view animation is to have the keyboard pop up by default and give focus to the username field.
我要為登錄視圖動(dòng)畫(huà)做的最后一件事是默認(rèn)情況下彈出鍵盤(pán)，并將焦點(diǎn)放在用戶(hù)名字段上。
To do this I’ll add a Focus response to the Start trigger and choose my username text field. I’ll then set the Focus In Start Delay to 0.6.
為此，我將Focus響應(yīng)添加到Start觸發(fā)器，然后選擇我的用戶(hù)名文本字段。 然后，我將“ 開(kāi)始聚焦延遲”設(shè)置為0.6 。
That’s it! the first part of my prototype is complete.
而已！ 我的原型的第一部分完成了。
Here is the ProtoPie prototype animation:
這是ProtoPie原型動(dòng)畫(huà)：
This completes part of 1 of comparing Figma prototyping to ProtoPie. You can already see some of the advanced features ProtoPie gives you as well as how easy it is to start to think in terms of basic interaction and motion with Figma.
這樣就完成了將Figma原型制作與ProtoPie進(jìn)行比較的部分1。 您已經(jīng)可以看到ProtoPie提供的一些高級(jí)功能，以及開(kāi)始思考與Figma的基本交互和運(yùn)動(dòng)方面的難度。
Both have their pros and cons but hopefully, this gives you some insight into both to help you choose when and where you should use them.
兩者都有其優(yōu)點(diǎn)和缺點(diǎn)，但有希望的是，這可以使您對(duì)兩者都有一定的了解，以幫助您選擇何時(shí)何地使用它們。
下周第二部分！ (Coming up in part 2 next week!)
In part 2 I’ll be continuing to build out our login prototype and showing you how you can use both tools to prototype failed and successful journeys.
在第2部分中，我將繼續(xù)構(gòu)建我們的登錄原型，并向您展示如何使用這兩種工具對(duì)失敗和成功的旅程進(jìn)行原型設(shè)計(jì)。
See you in part 2!
在第二部分見(jiàn)！
翻譯自: https://uxdesign.cc/prototyping-in-figma-and-protopie-a-comparison-part-1-7313004f6b3
figma下載
總結(jié)
以上是生活随笔為你收集整理的figma下载_Figma和ProtoPie中的原型制作，比较的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java rwd_面向任务的设计-不仅限
- 下一篇： [html] 你有使用过html5的r