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.