What Are Hardcoded Values in Design?
Hardcoded values are raw design values—like specific hex colors (#3B82F6), pixel measurements (16px), or font sizes—used directly in designs instead of referencing design tokens or variables.
The Problem with Hardcoding
When a designer uses #3B82F6 directly instead of referencing a 'primary-blue' token, that value becomes disconnected from the design system. If the brand updates its primary blue, that hardcoded instance won't change. Multiply this across hundreds of elements and dozens of files, and updates become impossible to manage.
How Hardcoding Happens
Hardcoding often happens unintentionally: copying values from design specs, using the color picker instead of token swatches, or working in files without proper token setup. Sometimes it's intentional—a designer needs a value that doesn't exist as a token and hardcodes rather than requesting a new token.
Detecting Hardcoded Values
Manually finding hardcoded values requires inspecting every element and comparing against token definitions—impractical at scale. Automated tools can scan designs, compare used values against token libraries, and flag violations with their exact location. This turns compliance from a manual audit into continuous monitoring.
Prevention Strategies
Reduce hardcoding by making tokens easily accessible (well-organized style libraries, clear documentation), comprehensive (tokens for every legitimate use case), and enforced (design reviews that catch violations, automated checks before handoff). When designers need values that don't exist, create the token rather than allowing hardcoding.
Automate Your Design System Audits
ComponentQA automatically detects issues like this across your Figma files. Get actionable insights with deep links to fix issues where they live.