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

Paint Shop Pro

Sketch

Photoshop

Figma

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

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

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

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.

View case studies See design samples