Asset Pack for UI and Motion
Prepare, organize, and deliver illustration assets for product UI and animation pipelines.
Step 1: Define Deliverable Scope
List what downstream teams need: icon set, empty states, onboarding illustrations, Lottie-ready layers, or sprite sheets. Format and naming conventions should match dev and motion tools before you paint.
Agree on sizes — 24, 32, 48 px icons; 800 px wide empty states — color space sRGB, and file types PNG, SVG, or JSON for Lottie. Scope prevents rework when handoff assumptions differ.
Step 2: Consistent Visual Language
Apply one stroke weight, corner radius, and palette across all assets. Mixed styles in one pack look unprofessional in the same app screen.
Create a reference sheet with approved colors, line rules, and spacing grid. Pin it in the Figma or repo readme so designers and engineers align.
Step 3: Export Icons and UI Graphics
Design icons on a pixel grid at 24x24 or 32x32 base, then export SVG for web and PNG at 1x and 2x. Remove hidden layers and merge shapes in SVG when file size matters.
Name files semantically: icon/search.svg, illustration/empty-inbox.png. Avoid spaces and special characters in paths for cross-platform build scripts.
Step 4: Prepare Motion-Ready Assets
Separate moving parts on layers or symbols — character body, arm, prop — for After Effects or Lottie export. Avoid merged flattening if animators need independent motion.
Export sprite sheets with uniform frame size and document fps and frame count in a manifest JSON or README table developers can parse.
Step 5: Folder Structure and Documentation
Organize deliverables: /icons, /illustrations, /motion, /source. Include LICENSE or usage notes if assets are shared across products.
Write a one-page handoff: what each folder contains, recommended import settings in Unity or Figma, and contact for questions. Good documentation reduces Slack ping volume.
Step 6: QA Before Handoff
Check transparency halos, alignment on grid, and dark mode variants if required. Open every PNG in target app — browser, Figma, Unity — not only in the painting tool.
Run a quick performance check: total bundle size under agreed budget, SVGs optimized with SVGO, no 4K PNGs used where 512 px suffices. Professional packs ship once and rarely need emergency fixes.
FAQ
PNG or SVG for UI icons?
SVG scales cleanly for web and supports theming with CSS in simple icons. PNG is safer for multicolor illustrations and environments without SVG support. Many products use SVG for icons and PNG for rich illustrations.
Should I include source files?
Yes for internal teams — PSD, Figma, or Animate sources let others iterate. For external clients, clarify license and whether source is in scope.
How do I version an asset pack?
Use semver or date stamps in folder names — assets-v1.2.0. Log changes in CHANGELOG.md when icons are renamed or removed so engineers update imports deliberately.