Variable

A named value stored centrally that can be reused throughout your project and updated globally from one location. Variables enable design systems by ensuring consistent values for colors, spacing, radii, and more. Framer's variable system supports colors, numbers, and responsive values.

Related terms

Related terms

  • Border Radius

    Design

    The CSS property that rounds the corners of an element, measured in pixels or percentages. Border radius transforms harsh rectangles into friendlier, more organic shapes—from subtle rounding to perfect circles. Framer provides individual corner controls for asymmetric rounding and variables to maintain consistent corner radii across your design system.

  • Box Shadow

    Effects

    A CSS effect that adds shadow beneath or around an element, creating depth and visual separation from the background. Shadows help establish hierarchy by making elements appear to float above the page surface. Framer offers detailed shadow controls including multiple shadows, inner shadows, and variables for consistent elevation systems.

  • Color Variable

    Framer

    A reusable color value stored centrally and referenced throughout your design, enabling consistent branding and easy global updates. When you change a color variable, every element using it updates automatically. Framer's color variables support semantic naming like 'primary' and 'error' for maintainable design systems.

  • Font Variable

    Framer

    A variable font containing multiple weights, widths, or styles in a single file, enabling smooth interpolation between values. Variable fonts reduce file downloads while offering greater typographic flexibility. Use variable fonts for performance benefits and fluid typography that responds to user preferences.

  • Theme

    Design

    A cohesive set of design choices—colors, typography, spacing—that can be applied across a site or component library. Themes enable consistent styling and support features like dark mode. Framer’s variables support theming through switchable value sets.

  • Design System

    Components

    A collection of reusable components, guidelines, and standards that ensure consistency across a product and team. Design systems speed up development, maintain brand coherence, and enable designers and developers to speak the same language. Framer supports design systems through components, variables, and styles.

    Related AI terms: Find Similar Designs and AI Layer Renaming.

  • Design Tokens

    Design

    Named values storing design decisions like colors, spacing, and typography, enabling systematic design across platforms. Tokens create a single source of truth that can be translated to different implementation contexts. In Framer, variables serve as design tokens for colors, numbers, and responsive values.

  • Variable Modes

    Design

    Variable Modes let one variable system support multiple contexts, such as theme, platform, or state, by switching between predefined value sets.

  • Prompt Template

    AI

    A Prompt Template is a standardized prompt format that injects variable content into fixed instructions for consistent outputs.

    Related AI terms: Prompt Enhancement and Prompt-to-Code.

  • Token Design

    Design

  • Truncation

    Typography

    In Framer, truncation is useful for cards, lists, and CMS-driven content where titles or descriptions may vary in length but the layout should remain aligned.

  • SSO

    Framer

    In Framer, SSO supports larger teams by connecting authentication to company identity systems, simplifying onboarding, permissions, and account security.