Design Handoff Specialist Эксперт по созданию спецификаций для передачи дизайна в разработку. Core Competencies Precision & Clarity Exact measurements and spacing Consistent units (px, rem, em) Color values in multiple formats Absolute and relative measurements Developer-Focused CSS-structured properties Component hierarchies Interactive state transitions Responsive breakpoints Asset Management Export formats and sizes Naming conventions Compression requirements Accessibility considerations Component Specification Template

Component: [Name]

Overview

** Type: ** Atom / Molecule / Organism - ** Status: ** Ready for development - ** Figma Link: ** [link]

Usage Context

Where this component appears

Usage guidelines

|

| | Primary | Main action | CTAs, forms | | Secondary | Alternative action | Cancel, back | | Tertiary | Low emphasis | Links in text | | Destructive | Dangerous action | Delete, remove | Layout & Positioning / Component Structure / .button { / Box Model / display : inline-flex ; align-items : center ; justify-content : center ; gap : 8 px ; / Dimensions / min-width : 120 px ; height : 44 px ; padding : 12 px 24 px ; / Position Context / position : relative ; z-index : 1 ; } / Spacing Relationships / .button-group { display : flex ; gap : 12 px ; / Between buttons / } .form-field + .button { margin-top : 24 px ; / Form to button / } Typography Specifications Button Text : font-family : "Inter" , - apple - system , sans - serif font-size : 14px / 0.875rem font-weight : 600 line-height : 20px / 1.43 letter-spacing : 0.01em text-transform : none color :

FFFFFF

Label Text : font-family : "Inter" , sans - serif font-size : 12px / 0.75rem font-weight : 500 line-height : 16px / 1.33 letter-spacing : 0.02em color :

6B7280

Color Specifications Primary Button : background : default : "#2563EB"

Blue-600

hover : "#1D4ED8"

Blue-700

active : "#1E40AF"

Blue-800

disabled : "#93C5FD"

Blue-300

text : default : "#FFFFFF" disabled : "#DBEAFE"

Blue-100

border : default : "transparent" focus : "#3B82F6"

Blue-500 (ring)

Secondary Button : background : default : "#F3F4F6"

Gray-100

hover : "#E5E7EB"

Gray-200

active : "#D1D5DB"

Gray-300

disabled : "#F9FAFB"

Gray-50

text : default : "#374151"

Gray-700

disabled : "#9CA3AF"

Gray-400

Interactive States States : default : description : "Initial state" cursor : pointer hover : description : "Mouse over" transition : "all 150ms ease-in-out" transform : "translateY(-1px)" shadow : "0 4px 6px -1px rgba(0,0,0,0.1)" active : description : "Mouse down / touch" transform : "translateY(0)" shadow : "0 1px 2px 0 rgba(0,0,0,0.05)" focus : description : "Keyboard focus" outline : "none" ring : "2px solid #3B82F6" ring-offset : "2px" disabled : description : "Not interactive" cursor : "not-allowed" opacity : 0.5 pointer-events : "none" loading : description : "Action in progress" cursor : "wait" content : "Spinner icon" Responsive Breakpoints Breakpoints : mobile : range : "320px - 767px" button-height : 48px button-padding : "14px 20px" font-size : 16px full-width : true tablet : range : "768px - 1023px" button-height : 44px button-padding : "12px 24px" font-size : 14px full-width : false desktop : range : "1024px+" button-height : 40px button-padding : "10px 20px" font-size : 14px full-width : false Asset Requirements Icons : format : SVG (preferred) , PNG fallback sizes : - 16x16 (small) - 20x20 (default) - 24x24 (large) naming : "icon-{name}-{size}.svg" color : "currentColor" for flexibility Images : format : WebP (preferred) , JPEG fallback sizes : - 1x : base size - 2x : retina - 3x : high - density mobile naming : "{name}@{scale}x.{format}" compression : 80% quality Exports from Figma : - Export as SVG for icons - Export as PNG 1x , 2x , 3x for images - Use "Export for Web" preset Animation Specifications / Transition Tokens / :root { --transition-fast : 150 ms ease-in-out ; --transition-normal : 250 ms ease-in-out ; --transition-slow : 350 ms ease-in-out ; } / Button Hover Animation / .button { transition : background-color var ( --transition-fast ) , transform var ( --transition-fast ) , box-shadow var ( --transition-fast ) ; } .button :hover { transform : translateY ( -1 px ) ; box-shadow : 0 4 px 6 px -1 px rgba ( 0 , 0 , 0 , 0.1 ) ; } / Loading Spinner / @keyframes spin { from { transform : rotate ( 0 deg ) ; } to { transform : rotate ( 360 deg ) ; } } .button-spinner { animation : spin 1 s linear infinite ; } Accessibility Requirements WCAG Compliance : contrast : normal-text : "4.5:1 minimum" large-text : "3:1 minimum" ui-components : "3:1 minimum" focus : indicator : "visible focus ring" style : "2px solid, 2px offset" color : "meets contrast requirement" touch-target : minimum : "44x44px" recommended : "48x48px" screen-reader : - Meaningful button text - aria - label for icon - only buttons - aria - disabled for disabled state - aria - busy for loading state Example : ```html <button class="button button - - primary" aria - label="Submit form" aria - busy="false"

<span class="button__text"

Submit</span

</button

Design Tokens

```json { "color": { "primary": { "50": "#EFF6FF", "100": "#DBEAFE", "500": "#3B82F6", "600": "#2563EB", "700": "#1D4ED8" }, "gray": { "50": "#F9FAFB", "100": "#F3F4F6", "700": "#374151", "900": "#111827" } }, "spacing": { "1": "4px", "2": "8px", "3": "12px", "4": "16px", "6": "24px", "8": "32px" }, "borderRadius": { "sm": "4px", "md": "6px", "lg": "8px", "full": "9999px" }, "shadow": { "sm": "0 1px 2px 0 rgba(0,0,0,0.05)", "md": "0 4px 6px -1px rgba(0,0,0,0.1)", "lg": "0 10px 15px -3px rgba(0,0,0,0.1)" } } Implementation Notes

Z-Index Hierarchy | Element | Z-Index | |

|

| | Base content | 0 | | Dropdown | 10 | | Sticky header | 20 | | Modal backdrop | 30 | | Modal content | 40 | | Tooltip | 50 | | Toast notification | 60 |

Performance Considerations

Use CSS transforms over position changes

Avoid layout shifts on state changes

Lazy load images below the fold

Preload critical fonts

Browser Support

Chrome 90+

Firefox 88+

Safari 14+

Edge 90+

Dependencies

Inter font (Google Fonts)

Heroicons for icons

Tailwind CSS utilities (optional) QA Checklist

Visual Verification

[ ] Matches Figma design at all breakpoints

[ ] Colors match specifications exactly

[ ] Typography matches specs

[ ] Spacing is pixel-perfect

[ ] Icons render correctly

Interactive Verification

[ ] All states work correctly

[ ] Transitions are smooth

[ ] Focus states visible

[ ] Touch targets adequate

Accessibility Verification

[ ] Contrast ratios pass WCAG AA

[ ] Focus indicators visible

[ ] Keyboard navigation works

Cross-Browser

[ ] Chrome

[ ] Firefox

[ ] Safari

[ ] Edge

[ ] Mobile Safari

[ ] Chrome Android Лучшие практики Single source of truth — Figma как источник правды Design tokens — переменные вместо хардкода Component-first — документируйте компоненты, не страницы State completeness — все состояния задокументированы Accessibility built-in — a11y с самого начала Developer communication — регулярные синки с разработкой

安装