#PROTOPIE PRICE CODE#
Sure you’ll have to learn a few code like concepts but everyone I’ve seen learn formulas have picked them up pretty quickly.
#PROTOPIE PRICE PATCH#
You will also find the learning curve to pick up formulas so much easier than learning to code in Framer or getting to grips with the patch panels of Origami Studio.
Using formulas allows us to reach a whole new level of interactive prototyping that you simply can’t achieve in Tools like Figma, Sketch or Adobe XD. Here is an example function that takes a text value and turns it into uppercase text: upperCase(“Hello World”) In summary ProtoPie comes with many types of functions categorised into text, math, colour, relative coordinates, layers and type conversion. You enter values into them, and they return some kind of result. You can think of functions as little computer programs. `input1`.text + firstNameVarĪs you can see, we can mix different formula building blocks together as long as we stick to the formula grammar rules. In this example we have a variable called firstNameVar. ProtoPie comes with three types of variables Number, Text and Color. You can think of a variable as a container for a value. This can then be used in a message or other piece of UI. The above example will stick the two different values from two input fields in a single text snippet. We can add and manipulate text in formulas such as outputting text messages based on particular user interactions or even using text that has been inputted by the user, for example: `input1`.text + `input2`.text Unlike the math you did at school, the symbols for some of the symbols are different. We can use arithmetic operators in our formulas such as plus, minus, divide, multiply and modulo, for example: `Red Rectangle`.x + `Blue Rectangle`.width The list is a great time saver and an excellent way to see what’s available as not all objects have the same properties. Typing a full-stop initiates the layer properties dropdown list. We add properties by appending them to a layer name separated by a full-stop like this: `Red Rectangle`.x Layers consist of many properties such as width, height and opacity. In formulas, layer names are written wrapped in back tick marks like this: `Red Rectangle` Layer properties Each object we add into a scene has a corresponding layer name. We use layer names to reference objects in the scene that we want to manipulate. There are several building blocks that we can use in formulas, let’s discuss each one in turn. Having this capability gives us a lot of power to create some really cool advanced interactions. They are single-line instructions that we use to manipulate our prototypes dynamically. I like to think of formulas in ProtoPie as being similar to formulas in Excel or expressions in After Effects.
#PROTOPIE PRICE SERIES#
This article series will introduce you to all of the building blocks of formulas explaining the concepts without jargon and in a way that even your Grandma can understand!
I’ve found in my own experience that most designers who work in digital tend to be aware of some programming concepts and if that isn’t the case, well thats where I come in. Most things can be chosen from a list and you’ll rarely have to type much in. Think of formulas as code snippets on stabilsers. You’ll rarely find yourself using more than a line at a time to get or apply a dynamic value such as moving a graphic to a calculated position for example. Now I know what you’re probably thinking, that sounds a lot like coding isn’t Protopie meant to be a no-code prototyping tool? It’s true that the concepts around formulas sounds very code like and that is because ultimately everything we build in digital has code under the hood but while ProtoPie hasn’t completely hidden it’s code underpinnings it does endeavour to make these code snippets as I call them as easy to use as possible. Functions in particular give you an unprecedented amount of control with over 50 functions available to play with. In addition to layer properties formulas work together with other building blocks such as variables and functions. Values such as the X and Y position or opacity to name just a few. They allow us to tap into many properties of the graphics we import in and allow us to manipulate them. Formulas are a part of ProtoPie that enable us to create even richer and realistic prototypes.
0 kommentar(er)
