Organize and Version Design Assets

Start with a clear hierarchy. Two common approaches

### Type-Based Structure

``` brand-assets/ ├── logos/ │ ├── horizontal/ │ ├── stacked/ │ ├── icon/ │ └── archive/ ├── colors/ │ ├── palette.pdf │ └── tokens.json ├── typography/ │ ├── fonts/ │ └── specimens/ ├── icons/ ├── photography/ ├── templates/ │ ├── presentations/ │ ├── social-media/ │ └── print/ └── guidelines/ └── brand-guide-v3.pdf ```

Pros: Easy to find all logos, colors, or icons in one place.

Cons: Hard to see all assets for a specific project or campaign.

### Project-Based Structure

``` brand-assets/ ├── brand-identity-2024/ │ ├── logos/ │ ├── colors/ │ ├── typography/ │ └── deliverables/ ├── website-redesign/ │ ├── mockups/ │ ├── components/ │ └── assets/ ├── q1-campaign/ │ ├── social/ │ ├── print/ │ └── email/ └── core-assets/ ├── logos/ ├── colors/ └── fonts/ ```

Pros: All assets for a project are together.

Cons: Core assets (logos, colors) may duplicate across folders.

Recommendation: Hybrid. Use type-based for core brand assets (logos, colors, fonts), project-based for campaigns and temporary work.

Inconsistent naming creates chaos. Establish rules before creating 500 files

### File Naming Schema

``` [asset-type]-[descriptor]-[variant]-[version].[format]

Examples

logo-horizontal-color-v2.svg logo-icon-mono-black-v2.png button-primary-hover-default.svg icon-home-24-regular.svg photo-hero-landing-page-2024-q1.jpg ```

### Rules

1. Lowercase with hyphens: No spaces, underscores, or camelCase. `logo-horizontal.svg`, not `Logo Horizontal.svg` or `logo_horizontal.svg`.
2. Descriptive, not generic: `button-primary-hover.svg`, not `button1.svg`.
3. Version suffix: `-v1`, `-v2`, `-v3`. Never `_final`, `_FINAL2`, `_final_REAL`.
4. Date for time-sensitive assets: `hero-photo-2024-11.jpg` for assets that expire or get replaced seasonally.
5. Size/scale in filename for raster: `icon-home-24.png`, `icon-home-48@2x.png`.

### Figma Layer Naming

Same rules apply in Figma

• Components: `button/primary`, `icon/home`, `logo/horizontal`
• Variants: `size=24|state=default`, `theme=light|state=hover`
• Frames: `home-hero-desktop-1920`, `dashboard-mobile-375`

Consistent naming makes exports automatic (Export as SVG uses layer name).

Design files need version control just like code.

### For Figma

Figma has built-in version history (File > Show Version History). Use it

1. Save versions after major changes: "Logo finalized", "Color palette updated", "Website redesign complete".
2. Restore old versions: Click a version to restore or duplicate it.
3. Branching: Create a branch (File > Save as branch) for experimental work. Merge back when approved.

### For Files (Logos, PDFs, Fonts)

Use Git or cloud storage with versioning

#### Git (for developers and technical teams)

```bash # Initialize repo git init git add logos/ git commit -m "Add logo variants v2"

# Tag releases git tag v2.0 git push origin v2.0 ```

Pros: Full history, branching, collaboration.

Cons: Non-designers find Git intimidating.

#### Cloud Storage (Dropbox, Google Drive)

Enable version history

• Google Drive: Right-click > Manage versions. Upload new versions, restore old ones.
• Dropbox: File history keeps 30-day (free) or unlimited (paid) history.

Pros: Easy for non-technical teams.

Cons: No branching, limited comparison tools.

Keep brand assets accessible across teams.

### Figma Libraries

Publish components and styles as a library

1. Create a Brand Library file: Components for logos, buttons, icons, colors, typography.
2. Publish as library: Assets > Publish library.
3. Enable in team files: Any file in your team can now use components from the library.

When you update the library, Figma prompts designers to accept updates in their files. This keeps everyone on the latest logos/colors without manual copying.

### Cloud-Based Asset Management

For non-Figma assets (photos, fonts, videos)

• Notion: Embed files, organize by category, add metadata (license, usage notes).
• Google Drive: Shared folders with clear structure. Use Drive File Stream for local sync.
• Dropbox: Similar to Drive. Better for large files (video, high-res photos).
• Abstract (paid): Version control for Sketch and Adobe XD. Git-like branching for designers.

Design files are irreplaceable. Backup everything

1. Cloud sync: All files in Google Drive, Dropbox, or similar. Auto-syncs from local.
2. Figma auto-saves: Figma files live in the cloud. Export critical files as `.fig` backups monthly.
3. External drive: Quarterly backup of entire `brand-assets/` folder to external SSD.

If Figma, Drive, or Dropbox fails (rare but possible), you have offline copies.

Not everyone needs edit access. Set permissions

• View-only: Marketing, external partners. Can view and download, can't edit.
• Edit: Designers, brand managers. Can modify files.
• Admin: Creative director. Can delete, change permissions, manage libraries.

In Figma: Share > Set permissions (View, Edit, Admin).

In Drive/Dropbox: Share > Viewer, Commenter, Editor.

Don't delete old assets—archive them. Create an `archive/` folder for superseded logos, outdated colors, or deprecated designs.

Example

``` logos/ ├── current/ │ ├── logo-horizontal-v3.svg │ └── logo-icon-v3.svg └── archive/ ├── logo-horizontal-v1.svg ├── logo-horizontal-v2.svg └── old-brand-2019/ ```

When someone asks "what did the old logo look like?", you have it.