In the eighth class of the Introduction to Figma course we are going to create prototypes to show our designs, and share them both to show them and for third parties to collaborate.
For a prototype to work, there always has to be at least one frame. To see the prototype, we click on the Submit button, in the upper right corner, the button with the play icon.
From the Prototype tab, in Figma, we can: create connections between the frames, indicate what will be the trigger for the interaction, indicate what the interaction will be, and create an animation in the interaction.
We can change the editing and prototype view and we will see the changes we make in real time and indicate which Frame we want to be displayed first.
We have to take into account that connections between pages cannot be made, only connections can be made between frames that are on the same page. Let’s see it!
As we have seen in the video, sometimes some layers do not appear in the prototype and we do not realize that it is because that layer is not really within the frame that we are viewing. For this reason, I always recommend that we continually look at the layers panel to verify that we are organizing our design well.
By sharing our prototype, we can assign view or edit permissions, both when we share the edit view and the prototype view. Prototype URLs have the “proto” tag and file URLs have the “file” tag.
Regarding the export options, they are available at the bottom right, in the properties panel. We can export our designs in several formats: PNG, JPEG, SVG and PDF. In addition, we can select size options.
If we select a layer or a group before exporting, what we have selected will be exported and we can select a specific area to export if we use the Slice tool.
In the exercises in this topic, our designs will come to life. I propose the following tasks:
- Create a new file and, on the first page, create three frames with the dimensions of a smartphone. Create several layers in each frame (they can be rectangles, circles, stars, or others).
- Click on the Prototype tab and connect the frame layers together:
- Choose different triggers or triggers for each connection, to see how they work.
- Visualize the prototype and share it with someone, or with yourselves.
- Click on the different interactive areas that you have created and see the magic of Figma prototyping. If the design is updated on the computer, the mobile prototype will be updated in real time.
To practice the file export options, I propose the following tasks:
- Outline with the Slice tool an area of your design. Export that area in PNG at three times its size.
- Create multiple layers, group and export the group to PDF.
As always, if you have any doubt or question, you can send it through the support form of the subscriber intranet. See you in the next lesson! 🙂
Remember that if you will have access to everybody the courses and you can also enjoy everything from .
Facebook Comments
Disqus