Framer X - Chat UI

Exploring a design workflow with Framer X

Project files

Click here to download

Key points

  • It’s mostly about my workflow turning a static graphic design into an interactive prototype in Framer X.
  • We can use “Copy CSS” and “Copy SVG” to migrate graphic assets into code components.
  • We can keep design assets and prototypes in-sync by including design components in code components.
  • We can add property controls as needed to allow designers who are less code-savvy to work on the project, but it’d be great to inspire them to directly work on the code, since it’s a lot more flexible!
  • There are a lot of limitations of design components at this point. The Framer team hinted about great improvement this year — I’m looking forward to that and will probably do another webinar a bit later.
  • Forgot to mention at the webinar: We can use “App.tsx” and code overrides to glue different components on the canvas. This is how components communicate in a FX prototype. There’s a reason why that file is called “App”.
  • Text input: https://learnreact.design/tips/text-input-keypress/ and https://learnreact.design/tips/text-input-change-text-from-outside/

© 2019 jimu Labs, Inc.