Overview

This prototype was completed for a final project for Prototyping II at Kennesaw State University. It was completed in a four week time period from October 31st, 2023 to December 7th, 2023. This projected was ideated and completed solely by me. We were assigned to complete a prototype over any topic we wanted. Being as I have always had an interest in houseplants, but have not been the greatest at caring for them and losing a lot of them, this idea came very quickly to me as it is something I, myself would need developed. The requirements of the project were to incorporate several of the new features added within the recent Figma updates, as well as other features that have already existed, such as auto-layout, component variables, and Boolean properties. Through this process page, I will explain how I incorporated these new tools/features, and how they made the project possible.

A link to the prototype has been provided under the "Project Summary" section.

How It Was Built - Use of Figma's new tools

In the creation of this protype, I utilized the new features added within Figma's toolbelt. One of the features involved is the ability to create local variables for number counters as well as color palettes including different modes. Another key feature that made this prototype possible was the addition of conditional logic and expression features. Down below I will explain each and provide supplemental imagery as to how these features work.

Local Variables

Similar to the previous feature within Figma known as local styles, local variables allow you to store colors within a Figma file. However, what is new with variables, is the capability of adding modes. With the new mode feature, you can select a frame individually and choose which mode of a variable collection it is currently using. This allows for quick changes between different palettes, allowing for implementing ideas like "Light and Dark Mode." In this project I decided to incorporate this, as many users enjoy the capability of being able to switch, and this brings this option to life in the prototype. Another huge feature of local variables is the ability to have text and number properties. For this project I incorporated the number properties in order to track the amount of plants the user has, as well as the amount of tasks completed. This comes into play with the conditional logic and expression features.

Figure 2: Color Pallete

Figure 3: Number Counter

Figure 4: Counter Component

Figure 5: Condition Logic

Conditional Logic and Expression Features

The new addition of condition logic and expression made this prototype possible within Figma. Whenever a user adds, or modifies the amount of plants that they have in their garden, the component running the "Daily Task List" will check to verify the counts. Whenever it detects that a plant is above or below a "0" count, the list will either add or remove that plant from the list. This cross-referencing allows me to build this into the component, rather than making different flows or frames to allow for the changes. This also allows the user to visually see what they have to do each day based on the plants they have added to their garden.

On the left, I have provided images from the prototype showing how this was done. Figure 4 showing the component of the snake plant, when a user clicks "Edit Plant," it brings them to the card that is asking them if they want to change the quantity. If they press the minus button, it reduces the count in the local variables by one, and can be pressed until it hits "0". The plus sign will add one to the count, and goes to however many the user would like to input. The remove button deletes the count for that plant in its entirety. The "Apply" button confirms the user's choice to change the quantity and brings them back to the original card. Figure 5 next to it shows one instance of the "Daily Task List" component. It is uses conditional logic to check which plants have a count higher than 0. Whichever plants the user has higher than 0, will appear on the "Daily Task List", by changing the component to the correct variable. These principles are also applied to the "Plants" tab, in which the user can alter the quantity of plants, and add new ones. If the user does not already have a quantity of "1", for any of the plants, they will auto-populate in the add a new plant page, and vice versa. This allows for a seamless experience without any redundancies of duplicate options appearing for the user.

Reflection

Upon completion of this project, I feel as though I have a much better understanding of the capabilities of conditional logic, as well as the new local variables. They are incredibly useful and allow for much more developed prototypes to be made. Looking back, I wish I had spent more time focusing on the logical side of the prototype as I would have liked to have added some other features to the prototype. Given more time, I would have liked to include the calendar to have conditional logic as well, and have the different dates populated with the change in plants in the users garden. I would have also liked to include the "Tips and Tricks" tab where they were specifically curated to the plants the user had selected. Overall, I am happy with the way the project turned out. I was capable of creating a functional daily task list that updates with the users choices. I gained a lot of knowledge and how to incorporate these new features and I look forward to testing to what extent they can be used in the future.