React for Designers

With React's component-driven architecture, UI designers can make use of this quality and integrate React in their workflow to bridge the gap between design/prototyping tool and what actually goes on the web in production

Transcript

1. ⚛ ✨ REACT FOR DESIGNERS
2. Ananya Neogi ★ Frontend developer ★ I also do CSS for fun ➡ codepen.io/ananyaneogi
3. SHOULD DESIGNERS CODE?
4. Only if they want to DESIGNERS SHOULD CODE
6. Developer & Designer
7. Lack of effective communication because we don’t understand each other’s language.
8. UI designers and frontend developers are ONE cohesive entity who are building the face of the internet. ✨
9. WHAT CURRENT DESIGN TOOLS LACK?
10. Less control over uid design
12. Lack of gesture based interactive options
13. Measuring micro-interactions
14. Interfaces based on auditory or haptic senses
16. There should be better tools for collaboration
17. WHY REACT?
18. UI Designers already have the mental model!
19. TOOLS
20. BuilderX
21. FEATURES ★ No extra development setup needed ★ Export React or React Native code ★ Import Sketch le ★ Access your project from anywhere
23. builderx.io
24. FramerX
25. FEATURES ★ Responsive layouts, prototypes, all from one app ★ Scroll behaviours, links and page transitions ★ Community powered framer store ★ Team features to access shared component library
26. FRAMER MOTION ★ Design uid animations for the web, across desktop and mobile ★ Server-side rendering ★ CSS variable support ★ Unmount animations
27. bit.ly/react-framer Built with React Framer & Framer Motion ⬇
28. framer.com/learn framer.com/motion
30. git clone https://github.com/airbnb/react-sketchapp.git cd react-sketchapp/examples/basic-setup && npm install npm run render
32. ★ Built by AirBnb for their design system ★ Pull in real data ★ Build custom tools on top of Sketch
33. airbnb.io/react-sketchapp
34. HOW THESE TOOLS HELP IN CREATING ROBUST DESIGNS?
35. ✅ Fluid design
36. ✅ Stress test designs with real data
38. ✅ Enables constant feedback loop
39. ✅ Designing close to the " nal" medium
40. Yeah, but we don't use React in production Prototyping FTW!
41. HOW CAN WE HELP?
42. ★ Share this talk! ★ Take responsibility to help ★ Empathise
44. ARE WE THERE YET?
46. PRODUCT ENGINEERING
47. ARE THEY COMING FOR OUR JOBS?
49. PEOPLE > TECH
50. No matter what your choice of tool is!
51. Be kind and build things intentionally! Thank you! [github, codepen, dev.to]/ananyaneogi twitter: @_ananyaneogi