Tammy Hart

Frontend Engineer & Designer

How one app made me a better designer and a more prepared developer

Paint Shop Pro

Sketch

Photoshop

Figma

1

Design with the build in mind

As a proud designer-developer hybrid, I have always coded designs in my head as I work on them. With Figma, it’s almost literally happening anyway.

Auto Layouts work almost identically to CSS’s flex-box. They let you easily manage padding, gap, alignment, and more. Every element I work with in a Figma design is in an auto layout so that it can interact dynamically with it’s parent, sibling, and child elements.

With components, I can create recurring elements that allow for maintaining design rules and decisions from a single source of truth. This is the same benefit you get from using frontend libraries like React or templating engines that CMS’s provide. The Don’t Repeat Yourself principle lives in the design world now.

Auto Layout

Automatic Resizing and Alignment

  • Responsive Design: Automatically adjusts the size and position of components based on their content and the size of the parent frame

  • Dynamic Resizing: Elements can resize dynamically to accommodate different content sizes, making it easy to create flexible layouts

Padding and Spacing

  • Padding: Define padding around the content within a frame to maintain consistent spacing

  • Spacing Between Items: Set fixed or variable spacing between items within an auto layout frame, ensuring even distribution

Direction Control

  • Horizontal or Vertical Layouts: Choose the direction in which items are arranged, either horizontally or vertically

  • Reverse Order: Reverse the order of items within the auto layout frame with a single click

Alignment Options

  • Alignment Controls: Align items to the left, right, center, top, bottom, or stretch them to fill the container

  • Distribution: Distribute items evenly within the auto layout frame

Components

Reusable Elements

  • Single Source of Truth: Create a component once and reuse it throughout your design, ensuring consistency

  • Instance Syncing: Any changes made to the master component automatically propagate to all instances, keeping designs synchronized

Overrides

  • Customizable Instances: Modify properties of individual instances (such as text, colors, or images) without affecting the master component

  • Retain Changes: Overrides remain intact even when the master component is updated, preserving customizations

Variants

  • Component States: Define different states or variations of a component (such as default, hover, active) within a single component set

  • Interactive Components: Easily switch between variants to represent different states and interactions in your design

Interactive Components

  • Prototyping: Use interactive components to create clickable prototypes that simulate real user interactions

  • Variants in Prototypes: Switch between component variants in prototypes to show different states and interactions

Component Libraries

  • Team Libraries: Share components across a team or organization by publishing them to a shared library

  • Updates and Versioning: Manage updates to shared components, ensuring everyone has access to the latest versions

2

Manage a library of decisions used throughout the design

Designing a website or product involves making decisions that are maintained across every element and view for the sake of consistency and visual relationships. With Figma, trying out changes and then making them a global update, is a breeze.

Essential values like colors, dimensions, and text strings, can be stored as variables. Practically every feature in Figma that allows you to customize a value, supports the use of variables. There have been times I’ve been 50% or more through a project and decided I wanted to change the name of a thing. All I have to do is change the text string variable and my update takes effect everywhere.

Another developer-friendly feature is saving styles, which are like a group of decisions. Text styles are great for setting fonts, font sizes, font styles, line heights, and such. Color styles allow you to save complex fill and stroke styles. Effects let you easily apply the same drop shadows and more to any element you so choose.

Each of these terrific features have the ability to be grouped into folders and sub-folders. It’s an organizer’s dream!

Variables

Centralized Value Management

  • Global Values: Define variables that can be used throughout the entire design project, ensuring consistency and easy updates

  • Local Variables: Create variables scoped to specific components or frames for more granular control

Types of Variables

  • Colors: Store color values as variables, allowing for consistent color usage and easy updates

  • Text Styles: Define typography settings (font, size, weight, etc.) as variables for consistent text styling

  • Spacing: Manage spacing values (margins, padding, gaps) with variables to maintain consistent layout proportions

  • Dimensions: Use variables to set fixed sizes or responsive dimensions for elements

  • Numbers: Store numeric values that can be reused for any purpose, such as border radius, opacity, or other properties

Easy Updates

  • Single Source of Truth: Update a variable once, and all instances where it's used are automatically updated

  • Efficient Iterations: Quickly experiment with different values by changing variables without manually updating each instance

Theming and Styles

  • Theme Management: Define variables for different themes (e.g., light and dark modes) and switch between them effortlessly

  • Style Consistency: Ensure design consistency by using variables for common styles and themes

Styles

Centralized Management

  • Global Styles: Create styles that can be used across an entire project, ensuring consistency in design elements

  • Shared Libraries: Publish styles to team libraries so they can be reused across multiple projects and by different team members

Types of Styles

  • Color Styles: Define and reuse color palettes for fills, strokes, and effects, maintaining a consistent color scheme

  • Text Styles: Set and reuse typography settings, including font family, size, weight, line height, and letter spacing

  • Effects Styles: Manage effects such as shadows, blurs, and glows, applying them consistently across components

  • Grid Styles: Define grid and layout systems for frames and components to ensure consistent spacing and alignment

Efficiency and Consistency

  • Reusable Elements: Apply the same styles to multiple elements, ensuring design consistency and saving time

  • Batch Updates: Update a style once, and all instances where it’s applied are automatically updated

Easy Application and Overrides

  • Quick Application: Easily apply styles to elements through the properties panel or by using keyboard shortcuts

  • Overrides: Override styles on individual elements when needed without breaking the link to the base style, allowing for flexibility within a consistent framework

3

Test the experience early to weed out buggy or less than ideal behavior

Design has often been referred to as the “look and feel” of a project. With prototyping, you can truly feel before you go to code.

As someone that has built countless designs that I and others have made, I know that there are design decisions that often don’t happen until you begin to experience the design in a browser. This can be anything from hover states and transitions, to how views feel and interact as you click between them.

The Figma prototyping tools are advanced enough to give you an almost real experience as if the project were built. For designers, this means practicing things out to aid in your decision making. For developers, this means less wondering and inventing on your own.

I’ve also found two striking uses for modes in variables: responsive layout versions, and light/dark mode

In a variable collection, I can set modes for palm (mobile) and desk (desktop). Widths, font sizes, etc., can all change depending on what mode you’re in.

The same is true for theming, often used for light and dark modes. In my color variable collection, I add modes for light and dark, then declare the color values to be used in each mode. Then in my prototype, I can create a click interaction to switch modes. Switch to dark mode, and every color variable on the page automatically swaps values!

Prototypes

Interactive Links and Hotspots

  • Clickable Areas: Create hotspots on your design elements that link to other frames or components, enabling navigation between screens

  • Flow Connections: Draw connections between frames to define the user flow and interactions

Interactive Components

  • Component States: Use variants to create different states (e.g., default, hover, active) and switch between them based on user interactions

  • Interactive Variants: Define interactions within components to simulate real-world behavior, such as buttons changing state when clicked

Transitions and Animations

  • Smart Animate: Automatically animate changes between frames, creating smooth transitions based on layer properties like position, size, opacity, and rotation

Overlays

  • Modal Overlays: Create overlay effects for modals, dropdowns, tooltips, and other UI elements that appear above the main content

  • Positioning Options: Define where overlays appear relative to the trigger element or frame

Interactions and Triggers

  • Click and Tap: Define actions that occur on click or tap, simulating common user interactions

  • Hover and Mouse Enter/Leave: Set up hover states to provide visual feedback when users move their cursor over interactive elements

Responsive

Define Size Variables

  • Breakpoints: Create variables for different breakpoints (e.g., mobile, tablet, desktop) to handle layout changes across various screen sizes

  • Spacing and Dimensions: Use variables to define spacing, margins, and dimensions that can adapt to different screen sizes

Adaptive Layouts

  • Auto Layout: Combine auto layout with variable modes to create designs that adjust automatically based on the screen size

  • Conditional Resizing: Use variables to control how elements resize and reposition based on the active variable mode

Media Queries Simulation

  • Screen Size Modes: Define variable modes that simulate different screen sizes. Switch between these modes to see how your design responds to changes in viewport size

  • Responsive Components: Design components that change their layout or appearance based on the active size variable

Dark Mode

Color Variables

  • Theme Colors: Define color variables for both dark and light themes. Create variables for background colors, text colors, and other UI elements that need to change

  • Switchable Color Modes: Use variable modes to switch between dark and light color palettes

4

Organize the workspace and keep things tidy

From all the years I spent working within the basic features of early design tools, I struggled at first to grasp the idea of art boards and pages within the same design file. Now I can’t imagine a life without them.

There are lots of ways Figma pages can be used, especially for projects that have a longer lifecycle. For me, I keep it real simple: one for views, and one for components.

When creating prototype interactions, you can only interact with elements on the same page. For this reason, I keep all of my views on one page, each within their own sections, so that you can navigate between them in the prototype. I keep my main components on a page so that I can reference and organize them view-agnostic.

There are so many other little ways Figma keeps me tidy and organized. This level of detail makes my designs more robust and consistent, which makes me a better designer and developer.

And yes… I do manually name all my layers.

Case Studies