UI Collective
A guide to the best practices for handing off @Figma designs to developers is finally here! Today we're exploring the correct way to annotate your design files, organize your design tokens and Figma variables, and build mobile optimized components for your design system! GENERAL LINKS NEW - Purchase our official design system: https://collectivekit.co/ Ask the community and build a profile: https://uicollective.co/ We build design systems! Work with me: https://designsystemlabs.co/ Connect with me on LinkedIn: https://www.linkedin.com/in/kirk-mcneill-km/ All Resources: https://uicollective.co/designer-tools-and-resources OTHER LINKS Build a Design System Episode 1: https://youtu.be/HNJmWKndUA4 Web Accessibility Annotation Kit: https://www.figma.com/community/file/1311421011482282592/web-accessibility-annotation-kit Design System Tracker: https://www.figma.com/community/plugin/1301974711562028600/design-system-tracker Contrast Checker: https://www.figma.com/community/plugin/748533339900865323/contrast 0:00 An Introduction 0:18 Design Annotations 28:05 Mobile Optimized Components 31:59 Design Token & Figma Variable Organization 49:05 Developer Handoff Checklist #uxdesign #uidesign #figma
Complete understanding of the topic
Hands-on practical knowledge
Real-world examples and use cases
Industry best practices
Take your learning to the next level with premium features