Examining the examples of prototypes below, you will gain an understanding of the potential of Framer to create attractive, animated prototypes. Upon completion of this course, you will be proficient in utilising Framer to design your own prototypes.
The introduction of Framer’s latest release a week ago has revolutionised the prototyping industry. Framer has long been known for its accuracy and limitless prototyping capabilities, however, the learning curve was quite daunting. This is no longer the case, as Framer now offers Design + Code + Collaborate capabilities, allowing users to create a fully functioning prototype without the need for any external tools or coding skills, all within Framer itself.
In this article, we will explore how to use Framer code to create dynamic and interactive prototypes without any prior programming experience. By combining the design and coding features of Framer, we can unlock the potential of our prototypes and create engaging experiences for users. We will start by learning how to utilise various code snippets to bring our prototypes to life, so let’s get started!
A Primer on the Framers
It is possible to try out a complimentary demonstration of FrameMaker without any risk for a period of two weeks. The software has full functionality and provides an excellent opportunity to evaluate the product prior to making a purchase. To start the demonstration, please visit the website.
After setup is complete, you may learn from and experiment with the provided examples. When you’re ready, go on to the prototype phase.
In this guide, we will discuss how to create prototypes using Framer.js. It is also important to note that there are alternative methods for prototyping with Framer, such as opening and editing Sketch files. We will address this process in a separate article.
New and Improved Framer: Layout Mode
In this post, we will quickly and easily develop three prototypes: components for basic user interaction, scrolling, and page display
The most recent version of Framer now includes an exciting new function, “Design Mode”, which closely mirrors the workflow of widely-used design programs such as Sketch and Figma. Users are now able to create and customise Vector, Picture, and Text layers, allowing for the rapid creation of prototypes without the need to access supplementary software.
COME ON, LET’S MAKE AN APP-STYLE LAYOUT
We’ll start by establishing a test environment for our Framer prototype. We’ll be making an app-style layout using vector, picture, and text layers.
Step 1: Design a basic button and backdrop.
By selecting the “Design” option, you can enter the program’s design mode and create an artboard, which is the first step in using Sketch. For this lesson, I have chosen the artboard size that is appropriate for an iPhone 7 mockup. Additionally, I have filled in the backdrop with a blue colour.
Then, use the rectangle tool and make a basic button shape.
Step 2: Include a picture card.
The drag-and-drop feature is a convenient alternative method for adding layers in Framer. It is possible to simply drag and drop any image file into the Framer environment, where it can then be customised using the panel located on the right-hand side of the screen. As an example, I was able to create a customised greeting card using a basic image.
Step 3: Add the app’s name.
It is possible to add a text layer in Framer, which gives users complete control over the styling of the text. Similar to most graphic editors, users can customise the typeface, size, placement, and letter spacing of the text layer to create the desired appearance.
Step 4: Tell Framer which layers contain the interactive elements.
Before we can roll out our Framer prototype, there is one final task to complete. We need to indicate which layers should be clickable in Framer. To select a layer from the layer panel, simply click on the dot beside the layer’s name. It may be beneficial for future projects to name each layer descriptively; both the layer card and the layer button should have a name.
Step 5: Defining your global colours (extra) step.
It is strongly advised to establish global prototype variables at the outset, such as specifying the size, basic form, and colour palette to be used. Doing so will help to prevent any time wastage during the later stages of the project.
It is possible to set colours in the code editor by assigning them names and then entering their corresponding HEX, RGB, or RGBa values following an “=” sign. For the purpose of good coding practices, it is recommended to always declare variables at the start of the code.
Step 6 (Bonus): Relative Position.
It is quite simple to keep your prototype responsive using the new Framer. You may establish relative locations from the design mode.
It is essential to be aware of the various in-code attributes that can be employed to adjust the alignment of layers and define their exact coordinates. Calculating the exact location of each layer manually is necessary if you intend to incorporate interactions into your prototype at a later stage and ensure its responsiveness.
You’re all set up; let’s get to work on our project.
Finally! We’ve reached the end of the dull section. Interaction design is now in order.
MAKING A BUTTON-RESPONSE INTERACTION
In order for any interaction we create to be successful, we must ensure that a trigger is present. This could be anything from a user tapping the screen, to an animation or image loading completely. It is essential that these triggers are in place so that the interaction works properly.Step 1: An interaction event has to be created.
We want to keep things straightforward. Use this command to create a button that displays a message when it is tapped:
Framer has just provided you with the preceding line of code. That layer is a button, and when you touch it, something will happen.
Step 2: We’ll animate the event.
Upon triggering this event, an animation will be initiated. To begin, simply right-click the button layer in the layers panel and select the option for adding an animation; this will cause Framer to transition to animation editing mode. From there, the user may modify any layer parameter, including resizing, repositioning, and rotation.
A couple additional lines of code were added by Framer. (Don’t panic; the animation panel will still allow you to make changes to your animation.)
Congratulations! You have successfully completed your first interaction! While it may only be functional one time, we are looking to make improvements so that this is not the case. As it stands, after the animation has been played once, nothing will occur. To ensure that all settings are returned to their original values, we must reset them after the first animation is finished.
Step 3: We will restart the animation from scratch.
When the button layer’s animation is complete, we can next apply the animation that will reset its properties:
Well, that settles it. Our button’s click-through feedback is now functional.
We must add an additional instance of an event that is virtually identical to the prior one. The chief difference is that, after the animation finishes, we need to detect a specific occurrence.
MAKING VARIABLE CARD-LAYER STATES FOR INTERACTIONS
It is now possible to create an animated sequence and set it into motion. A frequent necessity in design is to generate multiple layer states, where a single layer can have a range of diverse looks by adjusting its position, dimensions, and transparency.
Step 1: Create a layer of cards and give them individual states.
In order to include a state on a card, the card layer must first be selected by clicking on the dot associated with it. Once the card layer is selected, you will be in state-editing mode and you will be able to create your state in whatever way you desire.
Pay close attention to how the code is indented. Ideally, the very first row would be the starting point.
Step 2: Including Occurrences
The last piece is already in place. There must be an event made in order to alter these conditions.
This code accomplishes to smoothly change all the layer’s conditions when each action is taken. Every time we press the button layer, we will move into the card state. To create a more diverse set of states and to implement them accurately, the following code snippet is recommended:
This code snippet is helpful for triggering a certain layer state.
Modifying the transition animation speed and curve between states was the last tweak I made to my prototype.
With the knowledge you have now, you can easily create a wide variety of events. The comprehensive documentation available ensures that you can get the most out of your event-planning experience, as it is among the most well-written and comprehensive guides I have ever encountered.
How to Save Time with Framer by Using Its Parts
Now is the moment to include time-saving tools. Get this prototype now and use it to its full potential for the rest of the lesson.
THE FIRST PARTICULARITY: SCROLLING
After making a few adjustments to our prototype, a list has been included; however, it is too long to fit on the screen. To ensure that the entire list is visible in the prototype, we will need to implement scrolling capabilities.
Step 1: Establishing layers and assembling parts.
Firstly, we will create a layer which is taller than the display size. We shall refer to this interactive layer as ‘List’. Now, we will switch to the coding mode and will not be taking advantage of the useful left sidebar. To make the entire display scrollable, we will proceed accordingly.
This code generates a blank region that is the exact width and height of the user’s screen.
Step 2: Tell Framer which layers you want to scroll.
As of yet, no action has been taken. The Framer framework must be informed which layers are able to be scrolled. To achieve this, we are expanding the scroll component to include a layer that holds our list.
Step 3: Locking the vertical scroll bar.
The scrolling has been enabled, but it occurs in every direction. We must restrict scrolling in the vertical plane:
Wow! With just five lines of code, you were able to implement an in-app scroll.
THE PAGE ELEMENT: NAVIGATING FROM ONE SCREEN TO ANOTHER
Swiping is a commonly utilised interface for transitioning between displays and is conceptually similar to scrolling. A demonstration of the function can be obtained by downloading it from this page.
Step 1: Install the part.
As a first step, let’s create a “box” in the code editor where all the action will take place:
Now that you have a comprehensive understanding of all the code demonstrated, it is time to proceed to the next step of the process, which is establishing the component and its space in the most straightforward way possible. Following this, the construction of some swipeable layers is necessary.
At the outset, we will need to double the width of the artboard. This can be achieved by utilising the artboard properties panel and increasing the width measurement by twofold. Once this is done, the cards should be sorted and arranged in the right order. Once the desired arrangement is achieved, they should be activated via the use of a blue dot. Finally, they should be provided with descriptive and distinct names such as ‘Card1’ and ‘Card2’.
Making a design prototype of a framer
Step 3: Adding layers to the page element
To finish up our code in the editor, we need to include:
This signifies that we are extending the component by including these levels.
The part of the page that displays content is now finished and may be used!
The Closing Statement
We hope that this Framer guide has been a useful resource for you as you become familiar with the industry’s leading prototyping tool. If you are on Facebook, you may also want to consider joining the Framer community. This supportive community is always willing to lend a helping hand to newcomers. Thank you for taking the time to read this guide and we wish you all the best.
Reading the Framer documentation will allow you to go even deeper into the framework.
