asset pack برای UI و motion
icon set، pattern، texture و export motion-ready برای handoff به تیم dev و motion.
قدم اول: spec و grid سیستم icon
asset pack با spec شروع میشود. icon system پایه ۲۴×۲۴ px — artboard ۲۴ در Figma یا Illustrator. stroke ۲px، corner radius ۲px consistent در کل set.
optical padding: icon مربع ۲px فاصله از edge؛ icon دایره visually به edge نزدیکتر. keyline template: circle، square، cross guides مشترک — همه icon از یک template.
states: default (outline) و active (filled) — dual variant. naming: ic_home_24_default.svg. export SVG با stroke expanded یا outline font converted.
scale system: ۱۶، ۲۴، ۳۲، ۴۸ px — هر size جدا optimize شود؛ scale خودکار از ۲۴ به ۱۶ blur ایجاد میکند.
Design token alignment: stroke width، corner radius و color باید با design system product match شود. spec document را با frontend lead review کنید قبل از production ۲۰ icon.
قدم دوم: core icon set
minimum ۲۰ icon navigation: home، search، profile، settings، add، close، back، chevron، check، alert، menu، share، favorite، notification. priority بر اساس app flow.
design principle: metaphor universal — culture-specific obscure avoid. accessibility: recognizable at ۱۶px. test export در browser ۱۰۰٪ zoom — sharp باشد.
pixel snap at ۲۴px در Illustrator/Figma — half-pixel stroke blur. even-odd fill rule برای compound path. SVG optimize با SVGO قبل از handoff.
dark mode variant: stroke/fill color token — نه duplicate manual. design system variable linked.
Icon audit checklist: metaphor clear، stroke consistent، padding optical، states complete، naming convention، export formats ready. QA هر icon قبل از merge به library.
قدم سوم: patterns، textures و spot illustration
seamless pattern brand subtle: ۴۰۰×۴۰۰ tile. repeat define در Illustrator Pattern یا Figma. export PNG transparent + SVG pattern fill for CSS background.
grain overlay ۵٪ multiply — asset library برای video editor و UI background. texture PNG tileable ۵۱۲×۵۱۲.
spot illustration empty state: ۲۰۰×۲۰۰ simple character scene — consistent با character illustration course. limited palette ۳ تا ۵ color.
documentation: pattern usage — max scale، background color allowed، don't stretch.
Illustration style lock: line weight و color palette spot illustration باید با icon و character match شود. یک master style sheet visual reference برای team.
قدم چهارم: motion-ready assets
PSD layered: icon parts جدا برای animate independent — مثلاً loading spinner arrow + circle. AE import composition organized.
Lottie export: Bodymovin plugin After Effects → JSON. dev embed web/app. test LottieFiles preview. file size زیر ۵۰KB برای micro-interaction.
sprite sheet: loading ۱۲ frame، ۵۱۲ width strip. CSS animation steps() یا game engine. fps ۳۰، duration ۰.۵ تا ۱ second loop.
safe zone motion: ۱۰٪ margin — crop در aspect ratio مختلف. vector source برای scale animation بدون blur.
Easing documentation: motion spec باید duration، delay و easing (ease-in-out، spring) را برای هر animation note کند. dev و motion designer از یک source of truth استفاده کنند.
قدم پنجم: organization و documentation
folder structure: /icons/svg، /icons/png@1x @2x @3x، /patterns، /illustrations، /motion/lottie، /motion/sprites.
README.md: license (internal/client/exclusive)، color palette JSON، typography if applicable، version semver v1.0.0.
preview sheet: single PNG grid همه icon — inventory visual. changelog per release.
Figma library publish — team enable. component variant default/active/size.
Semantic versioning: breaking change (stroke 2→3) = major bump. icon جدید = minor. bugfix export = patch. changelog entry برای هر release الزامی.
قدم ششم: handoff dev و motion team
Dev Mode Figma: inspect spacing، export SVG. motion handoff: AE project comps labeled، duration، fps ۳۰، easing noted.
QA checklist: all icon present، naming consistent، no stray points in SVG، retina test @2x @3x، dark mode contrast WCAG AA.
iterate از dev feedback — stroke weight ممکن در code متفاوت render شود. motion team timing adjust — asset flexible باشد.
contract: license exclusive vs royalty-free. pack README default Nova Lab education internal — client project terms جدا.
Post-handoff support: یک sprint کوتاه برای fix export bug و answer dev question. asset pack living document است — v1.1 از production feedback میآید.
سوالات متداول
SVG یا PNG برای icon؟
SVG برای web scale infinite — preferred. PNG @2x @3x fallback legacy و email. pack هر دو را شامل شود. icon font alternative برای webfont load.
Filled vs outline — کدام system؟
یک primary style + optional active variant. iOS HIG outline/fill pair. Material Design similar. consistency مهمتر از trend.
Lottie الزامی است؟
برای micro-interaction app nice-to-have. static SVG کافی many products. scope با motion team و dev capacity تعیین شود.
License asset به client چطور است؟
contract specify: exclusive buyout vs limited license. pack README internal default. commercial use terms written — avoid ambiguity.