Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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 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/

Jorge Ferreiro

December 04, 2019
Tweet

More Decks by Jorge Ferreiro

Other Decks in Design

Transcript

  1. @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)
  2. @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]
  3. @JGFERREIRO @JGFERREIRO Adding interactive scroll Images (Stack) [S] Image (Frame)

    [F] Image (Frame) [F] Image (Frame) [F] Image (Frame) [F] Interactive Scroll
  4. @JGFERREIRo Key concepts (Summary) Frame [F]: UI element Graphic (G):

    Vector designs. Text [T]: Descriptions, bios, etc Stack [S]: Grouping frames together Interactive Scrolls
  5. @JGFERREIRo Useful commands CMD + 0 Zoom CMD + 2

    Zoom to element CMD + D Duplicate
  6. @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
  7. @JGFERREIRO @JGFERREIRO 1. Go to bit.ly/first-component 2. Change the button

    text to be “My name is…{your name}” Quick activity!
  8. @JGFERREIRO @JGFERREIRO 1. Go to bit.ly/hi-react 2. Follow with me

    how to create a more advanced component Quick activity!
  9. @JGFERREIRO @JGFERREIRO #CODEMOTIONPWA 1. Re-read this presentation 2. Create your

    first interactive prototype in Framer 3. Create your first Code Components Action plan
  10. @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