# Designing With Code ## A Framer Workshop Made with <3 by [@stakelon](http://twitter.com/stakelon)
###### Designing With Code ## Intro and Agenda
### Hi there - I'm Jay Stakelon, designer who codes - VP Product Design [@Fullscreen](http://twitter.com/fullscreen) in Los Angeles, CA - Creator of the [Frameless](http://stakes.github.io/Frameless) iOS web browser for prototypers - ~10 years software product design, product management, writing code and managing tech teams [@stakelon](http://twitter.com/stakelon) / [github.com/stakes](http://github.com/stakes) / [stakelon.com](http://www.stakelon.com)
#### The agenda - [Why prototyping?](section02.html) - [Introducing Framer](section03.html) - [A tour of Framer Studio](section04.html) - [A Coffeescript primer](section01.html) - [Framer fundamentals](section05.html) - [Interactivity](section06.html) - [Design workflow](section07.html) - [Animation workshop](section08.html) - [Responsive UI](section09.html) - [Data-driven prototypes](section10.html) - [Appendix](appendix.html)
#### Exercises - Many sections have corresponding exercises - Download and extract the .zip files - Start by opening the _"-exercise.framer"_ files with Framer Studio - Some exercises have included Sketch/psd files too - There are comments in each exercise to guide efforts. Feel free to delete if you're feeling bold - If you're stuck, pop open the _"-solution.framer"_ files
###### Designing With Code ## About y'all
#### You identify as ![fullwidth](images/hello-jobs.png)
#### Your experience with Coffeescript ![fullwidth](images/hello-coffeescript.png)
#### Your design tools of choice ![fullwidth](images/hello-tools.png)
#### The agenda (one more time!) - [Why prototyping?](section02.html) - [Introducing Framer](section03.html) - [A tour of Framer Studio](section04.html) - [A Coffeescript primer](section01.html) - [Framer fundamentals](section05.html) - [Interactivity](section06.html) - [Design workflow](section07.html) - [Animation workshop](section08.html) - [Responsive UI](section09.html) - [Data-driven prototypes](section10.html) - [Appendix](appendix.html)