Design System

What is a Design System?

A design system is a collection of reusable colors, fonts, spacing values, and components that ensure consistency across your entire project. Before designing any layouts, we need to establish these foundational building blocks in Figma.

Creating Your Figma File

Open Figma and create a brand new file. Rename it to "Portfolio Design System". This file will serve as the single source of truth for every visual decision in the project.

Defining Your Color Palette

Choose a primary brand color that represents your personality or brand. Then pick a secondary accent color for highlights and call-to-action elements. Finally, define a neutral palette with at least three shades for text (dark, medium, light) and backgrounds. Save all of these as Local Styles in Figma so you can reuse them with a single click.

Choosing Typography

Select a clean, modern font from Google Fonts. Popular choices include Inter, Roboto, Outfit, or Space Grotesk. Define clear text styles for every heading level (H1 through H4) and body paragraph text. Each style should specify the font family, font weight, font size, and line height.

Spacing and Sizing Rules

Establish a consistent spacing scale. A common approach is to use multiples of 4 or 8 pixels. For example: 4px, 8px, 16px, 24px, 32px, 48px, 64px. Apply these values for all padding, margins, and gaps throughout the entire design.

Designing Reusable Components

Create your first component: a button. Draw a rectangle with rounded corners, add centered text inside it, and apply your primary color as the background. Then select both layers and use Ctrl+Alt+K (or Cmd+Option+K on Mac) to convert it into a reusable Figma component. Create variants for different states like hover, active, and disabled.