Figma Design Basics

  • Figma
  • Figma Design
  • Design

Just some notes from rolling through the Figma Design for beginners YouTube course. While I'm pretty familiar with Figma's Dev Mode, I thought it would be valuable to have some experience in the Figma Design side of the product. This course was awesome: really nice instructional design, a good blend of guidance and hands-on work. I particularly enjoyed using the shapes and boolean operations to spin up some fun SVG icons. I want to keep digging into Figma designs and prototypes, so I'm hoping these notes prove useful!

Design files are live and up-to-date, meaning multiple people can work on a design file at once

  • Design files are also auto-saved

There are four main areas of the Figma Design Editor:

  1. Toolbar
  2. Left sidebar or navigation panel
  3. Right sidebar or properties panel
  4. Canvas

Toolbar

Found in the bottom center, the Toolbar contains tools for moving around the canvas, creating frames, shapes, custom vector paths, add text, and leave comments

The Left sidebar or navigation panel provides access to layers, pages, and assets, as well as the main menu and file menu

  • File tab: Provides access to pages and layers in your file
  • Assets tab: Provides access to components

The right sidebar or properties panel provides access to information about your design

  • Design tab: Lets you view, add, or remove object properties in your design
  • Prototype tab: Where you add prototype connection when you're ready to make your designs interactive

Canvas

The canvas is where you create, refine, and organize your designs Move tool: (shortcut: v) lets you select and move objects on the canvas

  • To move your view around the canvas, hold space and click and drag
  • To zoom in and out, cmd + scroll

Pages: Help keep things organized

Pages help keep things organized. Each page has its own canvas.

Use pages to:

  • Track each stage of the design process
  • Explore different layouts
  • Organize components
  • Keep ideas for inspiration
  • Archive older designs

Layers: Shapes, Text, and Frames

Layers

Layers are the building blocks of a design. A few fundamental layers in Figma are Text, Shapes, and Frames

  • Each layer represents a piece of your design, allowing you to separate the background, the objects, and the individual details, enabling you to refine how these objects look and interact with one another
  • You can see every layer in your canvas in the Layers portion of the left sidebar. You can also see (and adjust) the hierarchy of layers here

Shapes

There are 6 shape tools in Figma Design:

  1. Rectangle
  2. Line
  3. Arrow
  4. Ellipse
  5. Polygon
  6. Star

Creating a shape

  • When we create a shape on the canvas, we are actually creating an outline of that shape, also called a vector path
  • By default, Figma will give a shape a gray Fill
  • You can adjust the Fill type of a shape to give it a solid color, gradient background fill, add an image, or add a video
  • Layers can also have multiple Fills, like placing gradients over an image

To add an image, select the shape you want the image to assume. For a circle, choose an Ellipse

  • Click on the swatch to open the color picker, choose the image icon, then select the image you want to fill
  • With the shape layer selected, you can crop, reposition, and resize the image

Text

You can find type-specific properties in the Typography section of the right side bar, like font selection, size, weight, and more

Adding text

  • Select the Text tool on the toolbar (shortcut t) to begin adding text to the canvas

Text resizing property

  • You can single click text to to make an auto width resizing property text layer
  • You can also click and drag a text box to make a fixed size resizing property text layer
  • Auto height allows only the height of the text layer to grow and shrink based on the height of the text
  • You can adjust the resizing property in the Layout section of the right sidebar or by adjusting the text layer's bounding box

The Position section of the right sidebar to adjust the alignment, positioning, and constraints of your text layer

  • You can also adjust positioning using Nudge and Big Nudge
    • Nudge: select a layer, then press any arrow key to move that layer in that direction by 1
    • Big Nudge: select a layer, then hold shift and any arrow key to move that layer in that direction by a greater value. The default value is 10, but can be customized in Preferences > Nudge Amount

Frames

Frames act as containers for other layers, allowing you to organize them into cohesive designs

You can use frames to create:

  • individual assets, like assets or buttons
  • segments of your design, like a navigation bar
  • an entire screen or layout, like a mobile screen or webpage

You can nest frames within frames

  • any frame that acts as a container is a parent
  • any frame within a container is a child

Frames that live directly in the canvas are referred to as top-level frames

Similar to other layer types, frames support properties like Dimensions, Fills, and Effects

  • But frames also give us access to more powerful features, like clip content, auto layout, or constraints
  • Frames also give us the power to turn our designs into interactive designs

Creating frames

  • Select the Frame icon in the toolbar (shortcut f) and click anywhere on the canvas
  • Alternatively, click and drag a frame around the elements you want to be children of that frame
    • You can click and drag layers into or out of your frame
  • You can also right-click an existing element, like a text layer, and select Frame selection. This will place that layer within a new frame
    • From there, you can add an image fill and resize the frame's bounding box
Frame presets
  • Frame presets are a collection of ready-made sizes that allow you to quickly create frames for popular dimensions, such as different iPhone models or common browser viewport sizes
  • Select the Frame tool, then look at the right sidebar for various frame presets for different devices, screen sizes, and others

Constraints

Constraints are used on child layers to determine how they respond when their parent frame is resized

  • especially useful when designing for different devices to make sure designs respond and adapt to different screens
  • you can
    • make sure a sidebar always spans the height of an interface
    • make sure a button always stays anchored to the bottom right of a screen
  • Constraints can be applied to any child layer as long as its parent frame doesn't have auto layout applied
  • select the child layer and find its constraints in the Position setting of the right sidebar

Smart selection

Select the top-level frame and hit enter to select all of the elements within the frame

  • You can then select Alignment > center to center the elements to one another
  • You can also now select the More actions option in the Position section of the right sidebar and select Distribute vertical spacing
    • This distributes all of the frame's children evenly along the vertical axis, which allows us to use Smart selection to quickly rearrange our elements

When a collection of elements is spaced evenly apart on both or either axis, you get access to smart select, which allows you to quickly rearrange spacing between the two elements in a less-manual manner

  • Use pink handles to experiment quickly

Auto Layout

Auto layout allows you to create designs that automatically adjust as you make changes, saving you time and making your designs responsive and adaptable.

You can apply auto layout to frames to turn them into flexible containers that allow you to organize design elements, adjust spacing between them, and quickly insert content to your designs

Auto layout properties:

  • Resizing properties: control how the frame's height and width respond when its child layers change
  • Direction property: determines which way the child layers will flow inside the frame
  • Gap property: lets you specify the spacing between child layers
  • Alignment property: lets you determine how those child layers are aligned within the frame
  • Padding property: controls the space between the frame's boundaries and its child layers

Components

Components are reusable design elements, saving you from having to recreate the same element multiple times

There are two main aspects of components:

  1. Main Component
  2. Component instances

Main components

You can create main components from any collection of layers.

To create a main component, select the layers you want to use and click Create component. You can identify main components by their purple bounding box and the four diamond icon in the Layers section

Component instances

A component instance is a copy of the main component that you can copy to your designs.

To create a component instance, duplicate the main component on the canvas or select the main component from the Assets tab in the left sidebar and drag it onto the canvas

You can identify component instances by their purple bounding box and the outline diamond icon in the Layers section.

Instances are connected to their main components. Changes on the main component are automatically applied to every instance of that main component in the same file

  • This saves time and and ensures consistency

Certain aspects of a component instance can be changed without affecting the main component, such as the text, fill, size, and stroke of a button component

  • You can always reset changes by selecting the Reset all changes button
  • You can always push changes from the instance to the main component

However, other aspects of a component cannot be changed for a component instance. For example, you cannot add or reorder layers or change constraints on a component instance.

  • If you need to do this but still want to use the main component as a starting point, you can detach your component
  • Detaching enables you to change everything about that detached component. However, it also means that that detached component will no longer receive any updates from the main component it originated from

Vectors

Figma Design is a vector-based design tool that can be used to create scalable assets, like icons, illustrations, and user interface elements.

A vector is a digital image that consists of points, lines, and curves; all defined by mathematical formulas. Unlike raster images (like a typical JPG or PNG), vectors can be resized infinitely without losing quality.

Boolean operations

You can select multiple shapes and combine them using a union boolean operation. Select all of the shapes, then in the top of the right sidebar, do Boolean > Union.

Boolean operations let you combine multiple layers into a single object with shared properties, called a boolean group. You can use boolean operations to create icons, logos, illustrations, and much more. You can apply boolean operations to shape layers, vector paths, and text layers. You can't apply boolean operations to container elements like sections or frames.

There are four boolean operations:

  1. Union: combines the selected layers. If the layers overlap, the new object's outer path is created by merging the outer edges of all the layers. Sort of the opposite of subtract.
  2. Subtract: removes the overlapping area of a layer from the layer below it. It's like a cookie cutter. Layers at the top of the selection cut out the bottom ones. Sort of the opposite of union.
  3. Intersect: creates a new object from where the original layers overlap. Anything outside of the overlapping area is removed. Sort of the opposite of exclude.
  4. Exclude: creates a new object by removing the overlapping area. Sort of the opposite of intersect.

Unions are non-destructive actions.

Prototypes

Prototyping brings static screens to life. Prototyping is a set of features, settings, and properties that define how parts of your designs behave when people interact with them.

Prototyping terminology:

  • Flow: A flow is a collection of connected frames that make up a single prototype experience. These flows describe journeys that users can take throughout screens, like a sign-up flow or checkout flow.
  • Interactions: Rules set for how prototypes respond to user inputs. An interaction is made up of a trigger, an action, and an animation.
  • Trigger: What causes an interaction to begin
    • ex: A cursor hovering over something, clicks or taps on elements, keys pressed on a keyboard/gamepad, after a specific duration of time passes
  • Action: The result of a trigger
    • ex: Opening an external link in a browser, opening an overlay, scrolling to an area of a page, showing or hiding elements of your designs
  • Animation: How things move over time
    • ex: How a page or menu pushes in or out, opacity changes while hovering, how a page scrolls down or up over time
  • Connections: are used to string together frames and assets into a logical navigation flow for your prototype