Figma is a popular tool for brainstorming and wireframing. It is a whiteboard application that allows us to collaboratively brainstorm ideas. It also lets us create interactive prototypes of a software system without coding, allowing us to create and iterate on design ideas quickly. To work on design activities in class and for your assignments, you need to create an account for Figma.
The Editor is your workspace where all design creation and editing occurs. When you first open Figma, you'll see the interface divided into distinct panes that work together to create a design environment. The canvas in the middle is where you place and arrange your design elements. On the canvas, there is a toolbar, which provides quick access to essential tools such as selection, frame creation, shapes, text, and the pen tool. The left panel displays the layers hierarchy, showing the structure of all elements in your file, while the right panel contains properties where you can modify the characteristics of selected elements.
Frames are the foundation of any Figma design, serving as containers that define the boundaries of your work. To create a frame, simply click the frame button on the toolbar and select from preset device dimensions in the right panel. These presets include options for various phones, tablets, desktop screens, and more.
Frames have unique properties that make them essential for organized design work. They clip content by default, meaning any elements extending beyond the frame's boundaries won't be visible unless you specifically change this setting.
Within a frame, you create elements. These elements can include shapes, text, images, and other design components that make up your interface. To add elements, simply select the appropriate tool from the toolbar (such as rectangle, ellipse, or text tool) and draw on your frame. Elements inherit organizational properties from their parent frame, making it easier to maintain consistency across your design. You can adjust properties like size, position, color, and effects for each element through the properties panel on the right.
The layers panel shows all elements in a hierarchical structure that determines both their visual stacking order and organizational relationships. Elements at the top of the panel appear in front of those below, similar to stacked papers on a desk. You can change this stacking order by simply dragging layers up or down within the panel.
Groups and frames function as containers in the hierarchy, with child elements nested below them. This parent-child structure is crucial for organizing files, allowing you to collapse unused sections, move related elements as a unit, and apply properties or effects to entire groups at once. Good hierarchy management depends on clear layer naming, logical element grouping, and consistent organization throughout your file.
Fill and stroke properties control the visual appearance of your design elements. Fill defines the interior look of shapes and can be configured in several ways. Solid colors are the simplest option, but Figma also supports linear, radial, angular, and diamond gradients for creating sophisticated effects. You can even use images as fills—particularly useful for masked images or textured backgrounds. A powerful Figma feature is applying multiple fills to a single object with different blend modes and opacity settings, allowing you to create complex visual compositions without needing separate layers.
Strokes define the borders or outlines of objects and offer powerful customization options. You can adjust not only color and thickness (weight) but also position strokes inside, center, or outside the shape's boundaries—this affects how the stroke interacts with the object's dimensions. Line caps control how the ends of open paths appear, while joins determine how corners are rendered. For more varied designs, you can create dashed strokes with custom dash and gap values, perfect for creating styles ranging from subtle dots to bold dashes.
Creating effective visual designs requires precise alignment and consistent typography, both easily managed in Figma. When you select multiple elements, the right panel displays alignment options that let you position objects along their left, center, or right edges horizontally, or their top, middle, or bottom edges vertically. For even spacing between multiple elements, use the distribute options in both horizontal and vertical directions—a crucial feature for developing cohesive, professional layouts.