Drivers connect properties to each other using keyframes. Drivers work similarly to an animation timeline, but they animate based on a changing property instead of time. This is actually what differentiates drivers from animated transitions, which happen between artboards. Use drivers to create animations within one artboardĭrivers help you create sophisticated draggable or scrollable animations inside artboards. Also, consider that you can apply drivers to several highlighted or grouped objects at once, which makes prototyping much simpler. If you group objects at later stages, you’ll probably run into problems. Why? Quite simply because an object placed into a group can move both with the group and in relation to the group. That’s why it’s important to name and group all related objects right when you create them. Like any decent tool, Principle loves order. Importing bitmap assets affects your further work with the prototype and puts limits on:Īpplying changes to the prototype’s logic It’s not much, but you still shouldn’t disregard vector objects. You can change fill colors and strokes and can round corners. There’s one caveat to vector graphics in Principle, however: you’re limited to creating rectangles. They also improve the quality of the final image. They save time while prototyping and editing. Use vector objects and textsĮverything is quite simple when it comes to using texts and vector graphics. If you don’t take these parameters into account, enlarging or reducing the resolution of your project afterwards will be problematic. This way, your Dribbble prototypes won’t downsample and will look good on a high-DPI device. Make sure the size of your Principle document matches the rules of the platform you will demonstrate it on.įor example, if you’re uploading your prototype to Dribbble, you should make it in or (HD video). This will allow you to avoid logical inconsistencies. Planning the flow will help you understand in advance which elements should be clickable. These screens can also include all interim states like scrolling, movement, and translucency.
First, make a blueprint of the prototype on paper (or as a flowchart), then design it in Sketch or Figma, showing all transitions between screens. To avoid such situations and save yourself a lot of time and nerves, you should always thoroughly plan the whole prototype flow. This usually leads to numerous edits in the source file, and that’s never a pleasant thing. However, while trying to make that one animation perfect, they often neglect other elements and eventually find the prototype to be inconsistent and unfinished. When designers want to bring to life their ideas, they tend to focus on one cool animation that they consider the heart and soul of their prototype. Here’s an example where we’ve applied Principle’s circular motion feature to create an animation: So, to set a circular motion for an object, we first need to include this object into a group, move it to the side relative to the content area on the initial animation screen, and then set the rotation angle on the final animation screen, then you can loop animation and play with the speed and easings of the animation so that it is looked amazing.
Then I came across a prototype made in Principle that featured an object moving in a circular trajectory!Īs it turns out, Principle has a hidden feature never mentioned in the official guides: you can apply a circular motion to an object if they’re grouped together. I used to think that Principle could move objects only in a straight line, and I felt somehow limited by that. Now we’re going to dig into Principle’s possibilities and share some hacks and hidden capabilities we’ve discovered while working with this tool.
Over the years, our Yalantis design team has worked with many prototyping tools including Flinto and Pixate.
0 kommentar(er)
