Module -06: Design File Organization — Design & Code Foundations

01

File Naming Conventions

A file name is metadata. Good names tell you what's inside, when it was made, and what version it is — without opening the file.

ACTUAL FILES FOUND IN THE WILD:

homepage_final.psd
homepage_final_v2.psd
homepage_final_v2_FINAL.psd
homepage_final_v2_FINAL_revised.psd
homepage_final_v2_FINAL_revised_USETHISONE.psd
Copy of homepage_final (1).psd

Which one is actually final? Nobody knows.

What Bad Naming Looks Like

Without conventions, files become unmanageable. "Final" loses meaning. Dates and versions get lost. Collaborators create copies. Future you has no idea which file to use.

Common chaos: "Final" should only appear once, ever.

STRUCTURED NAMING PATTERN:

[project]-[type]-[name]-[version].[ext]

acme-web-homepage-v1.fig
acme-web-homepage-v2.fig
acme-web-homepage-v3.fig
acme-logo-primary-v1.svg
acme-icon-arrow-v1.svg

Sortable, searchable, self-documenting.

Structured File Names

Good names follow a pattern: project, type, specific name, version. They sort alphabetically in useful order. No spaces (use hyphens). No special characters. Always lowercase.

Best practice: project-type-name-version.ext = universal pattern

BAD DATE FORMATS

12-5-24, 5/12/24, Dec5, december-5

Ambiguous, doesn't sort correctly

GOOD DATE FORMAT (ISO 8601)

2024-12-05

YYYY-MM-DD — sorts chronologically, unambiguous globally

meeting-notes-2024-12-05.md
backup-2024-12-05-database.sql

When to Use Dates

Use YYYY-MM-DD (ISO 8601) for dates. It sorts chronologically and is unambiguous internationally (12/5 vs 5/12). Put dates at the end or beginning depending on sort priority.

ISO 8601: YYYY-MM-DD is the only date format that sorts correctly

Simple: v1, v2, v3

Good for design files. Clear, simple, sortable.

Semantic: v1.0.0, v1.1.0, v2.0.0

Major.Minor.Patch — used in software. Major = breaking changes.

Draft stages: draft, review, approved, final

For approval workflows. Only one file per stage.

Rule: Pick one system and use it consistently across the project.

Version Numbering Systems

Version numbers should increment, never reset. v1, v2, v3 is simple and works. Avoid words like "final" — use the highest version number instead.

Simple rule: Highest number = latest version. No "final" needed.

02

Folder Structure

Folder structure is information architecture. It should reflect how people think about the project, not how files were created.

project/
├── design/
│   ├── homepage.fig
│   ├── about.fig
│   └── components.fig
├── images/
│   ├── hero.webp
│   ├── team-photo.webp
│   └── icons/
├── documents/
│   ├── brief.pdf
│   └── requirements.md
└── exports/
    └── 2024-12-05/

Organizing by File Type

Organizing by type (design, images, documents) works well for small projects. Everyone knows where to find images vs. design files. Simple mental model.

Simple approach: By type = good for small teams, simple projects

project/
├── homepage/
│   ├── design.fig
│   ├── hero.webp
│   └── copy.md
├── about/
│   ├── design.fig
│   ├── team-photos/
│   └── copy.md
├── contact/
│   ├── design.fig
│   └── copy.md
└── shared/
    ├── components.fig
    └── brand-assets/

Organizing by Feature/Page

Organizing by feature keeps related files together. Working on the About page? Everything you need is in one folder. Better for larger projects with multiple features.

Scalable approach: By feature = good for larger projects, focused work

my-website/
├── index.html
├── css/ or styles/
│   └── main.css
├── js/ or scripts/
│   └── main.js
├── images/ or assets/
│   ├── logo.svg
│   └── hero.webp
├── fonts/
│   └── inter.woff2
└── README.md

Standard Web Project Structure

Web projects typically separate HTML, CSS, JS, and assets. This matches how browsers request files and how build tools process them. Follow this convention for predictability.

Web standard: Web convention: index.html + css/ + js/ + images/

GOOD: 2-3 levels deep

project/images/icons/arrow.svg

BAD: 5+ levels deep

project/design/v2/pages/homepage/sections/hero/images/background.png

Rule of thumb: If the path is longer than the filename, restructure.

Folder Depth Guidelines

Deep nesting makes files hard to find and paths annoying to type. Aim for 2-3 levels maximum. If you need more, consider flattening with better naming instead.

Guideline: 3 levels max. Deep nesting = lost files.

03

Asset Naming for Handoff

When designers hand assets to developers, naming becomes critical. Good names reduce questions, errors, and back-and-forth.

HERO/BANNER IMAGES

hero-homepage.webp
banner-sale-summer.webp
hero-about-team.webp

THUMBNAILS / CARDS

thumb-product-shoe-01.webp
card-blog-featured.webp
avatar-user-default.webp

SIZE VARIANTS

hero-homepage-1920.webp
hero-homepage-1280.webp
hero-homepage-640.webp

Image Naming Patterns

Name images by purpose (hero, thumb, avatar), context (homepage, product), and optionally size. Developers can then use predictable patterns: hero-{page}.webp.

Handoff pattern: purpose-context-variant.ext = predictable for devs

icon-[name].svg

icon-arrow-right.svg
icon-menu.svg
icon-close.svg
icon-search.svg

With variants:

icon-arrow-right.svg
icon-arrow-left.svg
icon-arrow-up.svg
icon-arrow-down.svg

Tip: Use same names as your icon library (Heroicons, Lucide) for easy reference.

Icon Naming Systems

Icons should follow a consistent prefix (icon-) and use descriptive names. Match naming to popular icon libraries when possible — developers will recognize them.

Convention: icon-name.svg — prefix makes icons searchable

logos/
├── logo-primary.svg ← main logo
├── logo-white.svg ← for dark backgrounds
├── logo-black.svg ← for light backgrounds
├── logo-icon.svg ← symbol only
├── logo-horizontal.svg
├── logo-stacked.svg
└── favicon/
    ├── favicon.ico
    ├── favicon-32.png
    ├── favicon-180.png ← Apple touch
    └── favicon.svg

Logo File Organization

Logos need multiple variants: color versions, orientations, and favicon sizes. Keep them in a dedicated folder. SVG for web, PNG for contexts requiring raster.

Completeness: logo-variant.svg — provide all versions developers need

FIGMA EXPORT SETTINGS:

Layer name → File name

Name layers properly = exports are named properly

Suffix for size variants:

[email protected], [email protected], [email protected]

Prefix for organization:

icons/arrow, images/hero

Clean layers = Clean exports. Name things right the first time.

Export Naming in Design Tools

Design tools export using layer names. If your layer is named "Frame 847", your export will be too. Name layers properly from the start — it saves renaming later.

Workflow tip: Layer names become file names. Name layers properly.

04

Version Control & Backups

"Final" is never final. Good systems track changes automatically so you can always go back, compare, and recover.

MANUAL VERSIONING

homepage-v1.fig
homepage-v2.fig
homepage-v3.fig
homepage-v4-johns-feedback.fig

You manage versions. Easy to mess up.

GIT VERSION CONTROL

homepage.fig
← one file, infinite history

git log shows all changes
git diff shows what changed

System manages versions. Can't mess up.

Manual Versioning vs Git

Manual versioning (v1, v2, v3) works but requires discipline. Git tracks every change automatically — you keep one file but have complete history. For code, always use git.

Comparison: Git = automatic history. Manual = human error.

F

Figma

Auto-saves, version history, named versions

Sk

Sketch

Local auto-save, Sketch Cloud for history

Ps

Adobe Creative Cloud

Cloud Documents have version history

Built-in Version History

Modern design tools have built-in version history. Figma auto-saves and lets you name versions. Use these features — they're free and automatic.

Use the tools: Use built-in version history. Name important versions.

3

copies of your data

2

different storage types (local + cloud)

1

copy offsite (different location)

Example: Local SSD + Google Drive + GitHub = 3 copies, 2 types, 1 offsite

The 3-2-1 Backup Rule

The 3-2-1 rule protects against hardware failure, theft, and disasters. Cloud storage (Google Drive, Dropbox) plus git remote (GitHub) plus local gives you coverage.

Industry standard: 3 copies, 2 storage types, 1 offsite. Non-negotiable.

Design File Organization

Core Concepts

File Naming Conventions

Folder Structure

Asset Naming for Handoff

Version Control & Backups

Key Takeaways