Design Rationale

The design of our platform was heavily influenced by Figma (hence the name Figma Lite) in its layout of a navigation bar where the user can select the mode (rectangle, ellipse, line, text, and present), a layers palette on the left hand side, and a command palette where the user can customize objects (layers) based on the mode they are in. In contrast to Figma, we opted for a collapsible layers/frames palette and command palette and a moveable command palette because those were features we had found useful in other design tools such as Adobe Photoshop, XD, and Indesign. We wanted our users to be able to somewhat customize their layout and limit their cognitive load by being able to collapse the palettes and move the command palette around the screen.

We admired how Figma by default considered each object on its own layer, so we implemented that design pattern in our layers palette and allowed for reordering and renaming similar to the way Figma allows it for its layers. Figma also has the notion of frames, which are foundational elements that are composed of objects/layers. While Figma allows for these frames to all display simultaneously in one workspace, we opted to mimic Powerpoint in our implementation of frames – making them individual containers that a user can switch between. We made this design choice because it was much more straightforward to implement and would allow us to dedicate more time on allowing users to customize the objects that composed their frames rather than the frames themselves. That said, similar to Figma we decided to support reordering and renaming of frames. Additionally while Figma does not have explicit undo, redo, and delete buttons, we opted to include these buttons to limit the gulf of execution and make it more explicit to the user that they can perform these actions.

Figma also supports prototyping, allowing for users to add interactions to different objects in frames that navigate them to other frames. While Figma’s implementation of this feature is far more advanced than ours, enabling users to create and drag arrows between frames to set an interaction, we wanted to add this prototyping feature and specifically allow users to create onclick interactions. In our implementation, we decided to add a section to the command palette when an object is selected that allows them to specify which frame the onclick would navigate them to in presentation mode.