Assets for Contractors: Exact Export Presets, File Names & Folder Structure Designers Must Deliver to Developers

When designers deliver assets without explicit export scales, consistent names, or a predictable folder layout, developers spend time guessing what to import, rename, or recreate. That friction multiplies across screens and releases: a single blurred image, mismatched icon, or unknown naming scheme can cascade into staging bugs, layout regressions, and scope creep.

This guide rejects vague rules like “export retina versions” and replaces them with explicit presets, file name templates, and a folder tree developers can script against. Treat the design-to-dev handoff as an API: clear inputs (assets) + immutable contracts (names and layout) = predictable outputs (working UI).

Set export presets for each atomic asset type and add them to the component or frame before handing off. Use these as a baseline you can copy into a project plugin or library: Icons → SVG @1x (no raster), UI bitmaps (buttons, photos) → JPG or PNG at 1x, 2x, 3x depending on target density, Logos → SVG + PNG @1x and @2x for legacy places that require raster.

Concrete presets (apply to Figma export panel or set in Sketch exportable): Icons — Format: SVG; Size: 1x; Suffix: none. UI graphics (non-photographic) — Format: PNG; Sizes: 1x, 2x, 3x; Suffixes: , @2x, @3x. Photographic hero images — Format: JPG; Sizes: 1x, 2x; Quality: 80. Logos & illustrations — SVG + PNG @1x and @2x as fallback.

Notes: prefer SVG for icons and logos so engineers can manipulate them in code. Reserve PNG/JPG exports only when raster is required (complex illustrations with effects or photos). Use Figma’s color profile/document settings for consistent color; add export preset metadata in the file README page so contractors don’t have to ask.

Lock a single, simple naming convention for every file. Use kebab-case (lowercase, hyphens) or snake_case and avoid spaces or special characters. Include three pieces of structured information in the file name: component or asset key, purpose/variant, and scale suffix. Example pattern: component-purpose--variant@scale.format.

Practical examples: icon-search--filled@1x.svg, icon-search--filled@2x.png, hero-home--desktop@2x.jpg, logo-company--primary.svg. For stateful assets add the state token: button-primary--hover@1x.png. This deterministic pattern lets developers write build scripts that map assets to code names without manual renaming.

Deliver assets in a flat, predictable tree inside a feature folder. Top-level folders should be: /images, /icons, /logos, /illustrations, /fonts, /raw. Under each, keep feature subfolders (for example: /icons/auth, /images/home-hero). Avoid deeply nested trees; two levels is ideal and script-friendly.

Example tree (feature 'checkout'): checkout/assets/icons/, checkout/assets/images/, checkout/assets/logos/. Each file should follow the naming convention above so the build pipeline or a small node script can copy and rename assets into the app’s static assets folder automatically.

Include a one‑page checklist inside the delivered zip and as the first page in Figma/Sketch. The checklist is binary (Yes/No) for each item; the contractor signs and dates it. Key items: All export presets applied? Files exported for required scales? Naming convention followed? Folder layout matched template? SVGs validated and optimized? README included with color/profile/token links?

Enforce the checklist as part of acceptance criteria in the contract—deliverables that fail the checklist are returned for a single revision. This small contractual step cuts review cycles and gives product teams a clear pass/fail gate for assets.