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

523f2560aefa80575be1aff88ec240dd?s=47 Jorge Ferreiro
December 04, 2019

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 in my website: https://www.ferreiro.me/contact

- - -

Subscribe: https://www.ferreiro.me/newsletter

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

523f2560aefa80575be1aff88ec240dd?s=128

Jorge Ferreiro

December 04, 2019
Tweet

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)
  33. None
  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

  50. None
  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!