Tell me if this story sounds familiar to you. You just wrapped up a design in Sketch -a design that took you hours, and now you want to bring it to life. Sketch’s built-in prototyping tool doesn’t allow you to create all the interactions you want and when you import your design in other prototyping tools your beautiful masterpiece is far from beautiful.

告訴我您是否熟悉這個故事。 您只是用Sketch封裝了一個設計-一個花了您幾個小時的設計，現在您想將其變為現實。 Sketch的內置原型制作工具不允許您創建所需的所有交互，并且在其他原型制作工具中導入設計時，您的精美杰作遠非精美。

You already refined your design in Sketch and the thought of having to redo/edit the work in another tool makes you cringe (or want to cry). You work fast, so slowing down to redo work is not an option. You know if a static design is worth 1,000 words, a prototype is worth 1,000,000 (or 1,000 meetings). So you don’t want to give up on prototyping.

您已經在Sketch中完善了您的設計，而必須在另一個工具中重做/編輯工作的想法讓您畏縮(或想哭)。 您的工作速度很快，因此減慢重做工作的速度是不可行的。 您知道靜態設計是否值1,000個字，原型是否值1,000,000(或1,000次會議 )。 因此，您不想放棄原型設計。

What if I told you there was a tool where you could import your designs from Sketch (Figma and Adobe XD too) without anything changing? On top of keeping your design 100, you have so much control over the prototype’s interactions that if you put it in front of users, they wouldn’t be able to tell that what they are using is, in fact, a prototype.

如果我告訴您，有沒有一種工具可以直接從Sketch導入設計(也包括Figma和Adobe XD)，該怎么辦？ 除了保持設計100之外，您還擁有對原型交互的太多控制權，如果將其置于用戶面前，他們將無法說出他們使用的實際上是原型。

Would you be interested in something like that?

您會對類似的東西感興趣嗎？

If the answer is yes, let me serve you up a hot plate of ProtoPie.

如果答案是肯定的，請允許我為您提供ProtoPie的熱菜 。

優化之旅 (Journey to Optimization)

The story above gives me PTSD. In the past my main prototyping tool was Axure. I love Axure and it will always have a special place in my heart. It gives me the control I need over my prototypes, but every time I import my Sketch file using the Axure plugin, my design changes. The same thing happens with Adobe XD, Figma, and Invision Studio.

上面的故事給了我PTSD。 過去，我的主要原型制作工具是Axure。 我愛Axure，它將在我心中永遠占有特殊的位置。 它為我提供了控制原型所需的控制權，但是每次使用Axure插件導入Sketch文件時，我的設計都會改變。 Adobe XD，Figma和Invision Studio也會發生相同的情況。

The question I hear most often is, “Why don’t you just switch to a design tool that has prototyping capabilities?” That is definitely a viable solution but, at this time, those tools don’t give me the control I want when prototyping.

我最常聽到的問題是：“為什么不切換到具有原型功能的設計工具？” 這絕對是一個可行的解決方案，但是目前，這些工具無法提供原型設計時所需的控制權。

I spend most of my time helping users of enterprise systems figure out ways to operationalize their workflows. I do the same with my own workflow, and this import problem was driving me mad. I spent weeks researching tools that integrated with Sketch and gave me the control I wanted. Right when I was about to give up I came across a little slice of heaven: ProtoPie.

我大部分時間都在幫助企業系統的用戶找出使工作流運作的方法。 我對自己的工作流程也是如此，并且這個導入問題使我發瘋。 我花了數周的時間研究與Sketch集成的工具，并為我提供了所需的控件。 就在我要放棄的時候，我遇到了一片天堂：ProtoPie。

這個怎么運作 (How it Works)

ProtoPie streamlines the process of importing your design as a bitmap with one important caveat. It imports your layers and puts them together into groups exactly like they are in your Sketch file. It does all of this in about three seconds. You can drill down into each layer and remove or add elements as needed.

ProtoPie帶有一個重要的警告，簡化了將設計作為位圖導入的過程。 它將導入您的圖層并將它們放在一起，就像它們在您的Sketch文件中一樣。 大約三秒鐘即可完成所有這些操作。 您可以深入到每一層，并根據需要刪除或添加元素。

It also gives you the ability to create additional elements as needed with various tools including images, videos, audio, shapes, text (any text on the bitmap can be converted so you can edit it), and various containers. So if you need to make an edit on the fly and do not want to pause to go back to your Sketch file, you don’t have to.

它還使您能夠使用各種工具根據需要創建其他元素，包括圖像，視頻，音頻，形狀，文本(位圖上的任何文本都可以轉換，因此您可以對其進行編輯)和各種容器。 因此，如果您需要即時進行編輯并且不想暫停以返回到Sketch文件，則不必這樣做。

介面 (The Interface)

ProtoPie’s interface is fairly intuitive. I’m going to give a quick breakdown and if you want to dive in a bit more I highly recommend checking out their website. They have a ton of documentation and tutorials.

ProtoPie的界面非常直觀。 我將快速進行分解，如果您想進一步學習，我強烈建議您訪問他們的網站 。 他們有大量的文檔和教程。

In the top-left, we have a toolbar where users can import their designs as well as add all the elements they offer.

在左上角，我們有一個工具欄，用戶可以在其中導入他們的設計以及添加他們提供的所有元素。

You can add four different media types: video, audio, camera, and Lottie. On top of that, you can also add gifs. You might be asking yourself, what is “camera?”. If you are creating a mobile prototype you can set up a trigger that launches a user’s rear or front camera.

您可以添加四種不同的媒體類型：視頻，音頻，照相機和Lottie。 最重要的是，您還可以添加gif。 您可能會問自己，什么是“相機”？ 如果要創建移動原型，則可以設置觸發器以啟動用戶的后置或前置攝像頭。

Shape and text are pretty self-explanatory. The container elements are awesome. You have a standard container (creates a group), scroll container, and paging container. The scroll container is my favorite and it does something I’ve only seen in Axure, it allows you to set up multiple independent scrolls on a page. This pattern is prevalent in a lot of enterprise systems — having access to this is a life-saver.

形狀和文字很不言自明。 容器元素很棒。 您有一個標準容器(創建組)，滾動容器和分頁容器。 滾動容器是我最喜歡的容器，它具有我在Axure中僅見過的功能，它允許您在頁面上設置多個獨立的滾動。 這種模式在許多企業系統中都很普遍-訪問它可以挽救生命。

You have the ability to choose various devices or create custom ones when creating your prototype. You can then import your designs at various pixel densities.

創建原型時，您可以選擇各種設備或創建自定義設備。 然后，您可以導入各種像素密度的設計。

In the upper right, we have the ability to preview our prototype, run it directly on a device using ProtoPie’s iOS/Android app, go to your cloud space, or upload your project. Their mobile app has been the best companion app I’ve tried so far. It makes it easy to install fonts on your device and you can save the project offline.

在右上方，我們可以預覽我們的原型，使用ProtoPie的iOS / Android應用直接在設備上運行它，進入您的云空間，或上傳您的項目。 他們的移動應用程序是迄今為止我嘗試過的最好的伴侶應用程序。 它使您可以輕松地在設備上安裝字體，并且可以離線保存項目。

Now to the bigger areas. On the far left, we have a Components section and Scenes section. ProtoPie gives you the ability to create reusable components (really great for menus, anything you are going to be using over and over again). The scenes panel would be the equivalent of separate artboards that you can link together.

現在到更大的區域。 在最左側，我們有一個Components部分和Scenes部分。 ProtoPie使您能夠創建可重用的組件(對于菜單，以及一遍又一遍地要使用的任何東西，都非常有用)。 場景面板相當于可以鏈接在一起的單獨畫板。

In the middle, we have our canvas and to the left of that, we have our layers menu.

在中間，我們有我們的畫布，在它的左側，有我們的圖層菜單。

On the right, we have the really fun stuff, the interaction/animation panel (more on that in a bit), and a panel where you can edit elements.

在右邊，我們有非常有趣的東西，交互/動畫面板(稍后會詳細介紹)以及一個您可以在其中編輯元素的面板。

觸發器和響應以及美味的動畫，我的天哪！ (Triggers and Responses and Yummy Animations, Oh My!)

Alright friends time for that tasty dessert you all came here for, the prototyping capabilities. There are so many that you will definitely walk away from this table with a full belly.

好了，朋友們花點時間來品嘗大家都來這里的美味甜點，以及原型制作功能。 有這么多的東西，您肯定會以飽滿的肚子離開這張桌子。

It all starts with a trigger. Choose an element within your design and click the add trigger button. They are broken up into six different groups: Touch, Conditional, Mouse, Key, Input, and Sensor. Yes, you read that right, Sensor. If you are creating a mobile prototype you can control various sensors within the device. Pies are supposed to be sweet but this is getting spicy.

這一切都始于觸發器。 在設計中選擇一個元素，然后單擊添加觸發器按鈕。 它們分為六個不同的組： 觸摸，條件，鼠標，鍵，輸入和傳感器。 是的，您沒看錯， Sensor。 如果要創建移動原型，則可以控制設備中的各種傳感器。 餡餅應該是甜的，但是越來越辣。

After creating a trigger you are given access to 24 different responses. Grandma’s Thanksgiving pie varieties have nothing on what ProtoPie is serving.

創建觸發器后，您可以訪問24種不同的響應。 ProtoPie提供的服務與祖母的感恩節派品種無關。

You can then customize your interactions to your heart’s content. You have complete control over animations and timing. I just scratched the surface here, so if you really want to dive into the full capabilities drop me a line — I would be happy to chat. Like I said earlier a prototype is worth 1,000,000 words so check out this prototype made exclusively in ProtoPie.

然后，您可以根據自己的內心需求自定義交互。 您可以完全控制動畫和時序。 我只是在這里打了水漂，所以，如果您真的想充分利用所有功能，請給我打個電話-我很樂意聊天。 就像我之前說的那樣，一個原型價值一百萬個單詞，因此請查看該原型完全由ProtoPie制造。

ProtoPie is available on macOS and Windows. Here is a link to their site https://www.protopie.io/ and to their tutorials https://www.protopie.io/learn/

ProtoPie在macOS和Windows上可用。 這是指向他們的網站https://www.protopie.io/及其教程https://www.protopie.io/learn/的鏈接

If you want to discuss ProtoPie or other UX topics add me on Linkedin here: https://www.linkedin.com/in/jamessoldinger/

如果您想討論ProtoPie或其他UX主題，請在Linkedin上添加我： https ://www.linkedin.com/in/jamessoldinger/