Interactive Prototyping with React + Framer - Jorge Ferreiro at Eventbrite Spain

I gave an introduction to Interactive Prototyping with React and Framer for the design team in Eventbrite Spain. We covered how to create your first prototypes using Framer, as well as the main concepts of the tool:
- Frame: UI element (Image, Button, Avatar…)
- Graphic: Perfect for creating icons or vectors
- Stack: Group multiple frames Properties (spacing, direction…)
- Interactive scroll

We also covered important patterns:
- Design components: In order to re-use designs over the prototypes.
- Code components: So you can write React in your prototypes.

Any questions? Reach out to me on Twitter (@jgferreiro) or on my website: https://jorgeferreiro.com/contact

- - -

Subscribe: https://jorgeferreiro.com/newsletter

on https://www.twitter.com/jgferreiro
on https://www.linkedin.com/in/jgferreiro/
on https://www.youtube.com/c/jgferreiro/

Transcript

1. @JGFERREIRO @JGFERREIRO
2. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS How many of you have written a line of code?
3. @JGFERREIRO Frontend @Eventbrite Backend @Amazon Blogger, DJ, fan of musicals Jorge Ferreiro
4. @JGFERREIRO @JGFERREIRO #CODEMOTIONPWA youtube.com/jgferreiro My youtube show:
5. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS Index 1. Framer concepts 2. Framer Interactive prototypes 3. React and programming 4. React in Framer
6. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS Goals 1. Learn Framer 2. Intro to React 3. Build your first prototypes
7. @JGFERREIRO @JGFERREIRO Hi Framer! Basic concepts 1.
8. @JGFERREIRO @JGFERREIRO Framer is a tool for creating Interactive prototypes
9. @JGFERREIRO @JGFERREIRO
10. @JGFERREIRO @JGFERREIRO Adding the header Avatar (Frame) [F] Follow button (Round frame) [U] Options button (Round frame) [U] Dots (Graphic) [G] Dot (Round) Dot (Round) Dot (Round)
11. @JGFERREIRo Frame [F] UI element (Image, Button, Avatar…)
12. @JGFERREIRo Graphic [G] Perfect for creating icons or vectors
13. @JGFERREIRo Zoom shortcut Z
14. @JGFERREIRo Zoom to selection CMD + 2
15. @JGFERREIRo Zoom out CMD + 0
16. @JGFERREIRO @JGFERREIRO Biography User (Text) [T] Description (Text) [T]
17. @JGFERREIRo Text [T] Allows you to introduce descriptions, buttons legends, etc…
18. @JGFERREIRo Duplicate texts CMD + D
19. @JGFERREIRO @JGFERREIRO Adding stats Stats (Stack) [S] StatsItem (Frame) [F] Counter (Text) [T] Legend (Text) [T] StatsItem (Frame) [F] Counter (Text) [T] Legend (Text) [T] StatsItem (Frame) [F] Counter (Text) [T] Legend (Text) [T]
20. @JGFERREIRo Stack [S] Group multiple frames Properties (spacing, direction…) It’s smart!
21. @JGFERREIRo Duplicate frames CMD + D
22. @JGFERREIRO @JGFERREIRO Adding interactive scroll Images (Stack) [S] Image (Frame) [F] Image (Frame) [F] Image (Frame) [F] Image (Frame) [F] Interactive Scroll
23. @JGFERREIRo Interactive Scroll Native apps scroll. It let’s you point to a stack, Frame…
24. @JGFERREIRo Key concepts (Summary) Frame [F]: UI element Graphic (G): Vector designs. Text [T]: Descriptions, bios, etc Stack [S]: Grouping frames together Interactive Scrolls
25. @JGFERREIRo Useful commands CMD + 0 Zoom CMD + 2 Zoom to element CMD + D Duplicate
26. @JGFERREIRo BONUS!
27. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS Using packages!
28. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS Importing sketch!
29. @JGFERREIRO @JGFERREIRO Interactive prototypes Framer 2.
30. @JGFERREIRO Amazing prototyping! Transitions Groups Animations
31. @JGFERREIRo Groups [S] It’s like a Stack, but with effects, animations and more!
32. @JGFERREIRO Design components Reusable designs Perfect for a design system) Types: Master Instance(s)
34. @JGFERREIRo Design components Allows you to re-use logic and designs. Same as you have on Sketch with EDS
35. @JGFERREIRO #REACTDESIGNERS Design components avoid repetitions
36. @JGFERREIRO @JGFERREIRO Programming & React 3.
37. @JGFERREIRO @JGFERREIRO What is programming?
38. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS ☕ Programming is…
39. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS Programming languages?
40. @JGFERREIRO @JGFERREIRO Frontend languages?
41. @JGFERREIRO @JGFERREIR HTML5?
42. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS
43. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS
44. @JGFERREIRO @JGFERREIR CSS3?
45. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS
46. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS
47. @JGFERREIRO @JGFERREIR JAVASCRIPT?
48. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS
49. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS
51. @JGFERREIRO @JGFERREIRO You all can learn to code. No excuses!
52. @JGFERREIRO @JGFERREIRO React?
53. @JGFERREIRO React is a framework to build web apps
54. @JGFERREIRO @JGFERREIRO React in the industry
55. @JGFERREIRO @JGFERREIRO React components?
56. @JGFERREIRO @JGFERREIRO “Components let you split the UI into independent, reusable pieces, and think about each piece in isolation” https://reactjs.org/docs/components-and-props.html
57. @JGFERREIRO @JGFERREIRO function MyButton() { return <button>Hi there. I am a button!!!</button> } Your first component
58. @JGFERREIRO @JGFERREIRO 1. Go to bit.ly/first-component 2. Change the button text to be “My name is…{your name}” Quick activity!
59. @JGFERREIRO Components in real life
60. @JGFERREIRO @JGFERREIRO
61. @JGFERREIRO @JGFERREIRO
62. @JGFERREIRO @JGFERREIRO
63. @JGFERREIRO @JGFERREIRO
64. @JGFERREIRO @JGFERREIRO We can go deeper…!
65. @JGFERREIRO @JGFERREIRO Avatar Content (text, media) Header Actions ButtonWithText Button
66. @JGFERREIRO @JGFERREIRO 1. Go to bit.ly/hi-react 2. Follow with me how to create a more advanced component Quick activity!
67. @JGFERREIRO @JGFERREIRO React in Framer! 4.
68. @JGFERREIRO @JGFERREIRO Code components
69. @JGFERREIRO @JGFERREIRO #REACTDESIGNERS
70. @JGFERREIRO @JGFERREIRO #CODEMOTIONPWA 1. Re-read this presentation 2. Create your first interactive prototype in Framer 3. Create your first Code Components Action plan
71. @JGFERREIRO @JGFERREIRO #CODEMOTIONPWA 1. Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes 2. Using Conditions in Framer to Replicate Instagram’s Pagination Dots 3. Flexyboxes - Learning flexbox 4. Framer tutorial Resources
72. @JGFERREIRO - jorge@ferreiro.me Q&A!
73. @JGFERREIRO One more thing for Jose…
74. @JGFERREIRO @JGFERREIRO
75. @JGFERREIRO Start learning to code today! No excuses.
76. @jgferreiro jorge@ferreiro.me Thanks Designers!