Updating conversion, creating readmes

This commit is contained in:
Jonas Zeunert
2024-04-19 23:37:46 +02:00
parent 3619ac710a
commit 08e75b0f0a
635 changed files with 30878 additions and 37344 deletions

View File

@@ -1,11 +1,11 @@
 Awesome Framer !Awesome (https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) (https://github.com/sindresorhus/awesome)
 Awesome Framer !Awesome (https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) (https://github.com/sindresorhus/awesome)
 (https://framer.com/)
▐ A curated list of Framer (http://framer.com) prototyping tool articles, resources, tutorials and other related things.
Framer (http://framer.com) is a tool to create animated and interactive prototypes. It uses modern web technologies such as JavaScript, HTML and CSS to extend the capabilities for advanced users and 
auto-correct, intuitive error messaging or in-app documentation to lower the learning curve for beginners.
Framer (http://framer.com) is a tool to create animated and interactive prototypes. It uses modern web technologies such as JavaScript, HTML and CSS to extend the capabilities for advanced users and auto-correct, intuitive error 
messaging or in-app documentation to lower the learning curve for beginners.
Contents
@@ -21,7 +21,7 @@
⟡ Sites (#sites)
⟡ Other (#other)
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
General
⟡ Official Site (http://framer.com)
@@ -34,10 +34,10 @@
⟡ Why Framer.js Matters (https://medium.com/@drocarmo/why-framer-js-matters-93eb1206e606#.846k6rca6) - Pedro Carmo on why Framer is a tool designers should start using.
Videos
⟡ Stripe Speaker Series: Designing with Framer (https://www.youtube.com/watch?v=mqk9Fw8FKLY) - Koen Bok and Jorn van Dijk give a short talk and Q&A focused on Framer that also covers prototyping in general and a
discussion of the various design tools available in the market.
⟡ FORM SF 2014: Panel - Design Tooling (https://www.youtube.com/watch?v=gX0n4JUl18g) - Discussion between creators of popular design tools (including Koen Bok from Framer) on the value of prototyping, lessons 
learned in crafting products for designers, and the future of UX tools.
⟡ Stripe Speaker Series: Designing with Framer
 (https://www.youtube.com/watch?v=mqk9Fw8FKLY) - Koen Bok and Jorn van Dijk give a short talk and Q&A focused on Framer that also covers prototyping in general and a discussion of the various design tools available in the market.
⟡ FORM SF 2014: Panel - Design Tooling (https://www.youtube.com/watch?v=gX0n4JUl18g) - Discussion between creators of popular design tools (including Koen Bok from Framer) on the value of prototyping, lessons learned in crafting 
products for designers, and the future of UX tools.
Tutorials
⟡ Framer.js Official Basics (http://framerjs.com/learn/basics) - The place to start prototyping with Framer.
@@ -51,14 +51,10 @@
⟡ Building Your First Prototype (http://www.cutandfold.co/blog/2015/9/8/building-your-first-prototype) - Second guide by Andrew Nalband, where you start building real prototype from Sketch file.
⟡ Creating Your First Prototype with Framer (https://medium.com/@kennycheny/creating-your-first-prototype-with-framer-c39221da7668#.3jcem1x61) - Animation tutorial by Kenny Chen.
⟡ Framer.js Workshop (http://codepen.io/collection/nRzzaZ/) - Collection of Framer examples by Jay Stakelon (https://twitter.com/stakelon).
⟡ Motion is Emotion: Prototyping Microinteractions for Apple Watch with Framer Studio
 (https://web.archive.org/web/20160304015511/https://blog.grandcentrix.net/motion-is-emotion/) - Apple Watch temperature gauge prototype tutorial.
⟡ Periscope Heart Animation Demo at the Seattle FramerJS Meetup (https://www.youtube.com/watch?v=qFUXxqzZytU) - Presentation by Jordan Dobson (https://twitter.com/jordandobson) on how to create Periscope heart 
animation with Framer.
⟡ Using Parse to power up your Framer prototypes
 (https://medium.com/facebook-design/using-parse-to-power-up-your-framer-prototypes-88cb87009d00#.8noe6r2wb) - Using Framer with real data Part 1 by George Kedenburg III.
⟡ Give your Framer prototypes a better memory
 (https://medium.com/facebook-design/give-your-framer-prototypes-a-better-memory-212b26e0f934#.6ws4983e7) - Using Framer with real data Part 2 by George Kedenburg III.
⟡ Motion is Emotion: Prototyping Microinteractions for Apple Watch with Framer Studio (https://web.archive.org/web/20160304015511/https://blog.grandcentrix.net/motion-is-emotion/) - Apple Watch temperature gauge prototype tutorial.
⟡ Periscope Heart Animation Demo at the Seattle FramerJS Meetup (https://www.youtube.com/watch?v=qFUXxqzZytU) - Presentation by Jordan Dobson (https://twitter.com/jordandobson) on how to create Periscope heart animation with Framer.
⟡ Using Parse to power up your Framer prototypes (https://medium.com/facebook-design/using-parse-to-power-up-your-framer-prototypes-88cb87009d00#.8noe6r2wb) - Using Framer with real data Part 1 by George Kedenburg III.
⟡ Give your Framer prototypes a better memory (https://medium.com/facebook-design/give-your-framer-prototypes-a-better-memory-212b26e0f934#.6ws4983e7) - Using Framer with real data Part 2 by George Kedenburg III.
⟡ Working with SVG Paths in Framer (https://medium.com/framer-prototyping/working-with-svg-paths-in-framer-43d3c2d08adc) - Starting point for SVG Paths in Framer by Josh Puckett.
⟡ Managing Styles and CSS in Framer (http://martenbjork.com/2016/05/managing-styles-and-css-in-framer/) - Mårten Björk on styles management in Framer.
⟡ Developing a Framer Module (https://medium.com/bpxl-craft/developing-a-framer-module-dbf6a7d6ffc9#.ju0gck7hd) - John Marstall teaches how to create a Framer Module.
@@ -67,26 +63,23 @@
⟡ Prototyping Speech Recognition in Framer.js
 (https://medium.com/framer-prototyping/prototyping-speech-recognition-in-framer-js-9cbbbd01757#.dkwuowqwy) - Brian Bailey gives a breaf introduction to speach recognition prototyping in Framer.
⟡ Power your Framer prototypes with real location data (https://www.mapbox.com/blog/power-framer-prototype-with-mapbox/) - Maya Gao on Framer prototypes with real location data using Mapbox API.
⟡ How to Create HighQuality GIFs
 (https://framer.com/blog/posts/how-to-create-high-quality-gifs) - How to Create HighQuality GIFs, our guide to making amazing GIFs with some of our favorite tools: ScreenFlow and Claquette.
⟡ How to Create HighQuality GIFs (https://framer.com/blog/posts/how-to-create-high-quality-gifs) - How to Create HighQuality GIFs, our guide to making amazing GIFs with some of our favorite tools: ScreenFlow and Claquette.
Video Courses
⟡ Mobile App Prototyping: Designing Custom Interactions (https://www.skillshare.com/classes/design/Mobile-App-Prototyping-Designing-Custom-Interactions/382444545) - 50-minute Skillshare class on how to use 
mobile app prototyping to communicate your ideas and execute your vision by Noah Levin (https://twitter.com/nlevin).
⟡ Framerjs: Innovative prototyping and design with interaction (https://www.udemy.com/framerjs-prototyping-design-interaction-animation/?couponCode=FRAMER) - 54 parts, 6 hours course by Adria Jimenez 
(https://twitter.com/ajimix).
⟡ Mobile App Prototyping: Designing Custom Interactions (https://www.skillshare.com/classes/design/Mobile-App-Prototyping-Designing-Custom-Interactions/382444545) - 50-minute Skillshare class on how to use mobile app prototyping to 
communicate your ideas and execute your vision by Noah Levin (https://twitter.com/nlevin).
⟡ Framerjs: Innovative prototyping and design with interaction (https://www.udemy.com/framerjs-prototyping-design-interaction-animation/?couponCode=FRAMER) - 54 parts, 6 hours course by Adria Jimenez (https://twitter.com/ajimix).
⟡ Prototyping with Framer (http://www.sketchcasts.net/episodes/prototyping-with-framer-part-1) - Three-part prototyping course by Rafael Conde (https://twitter.com/rafahari).
⟡ Rapid Prototyping with Framer (https://player.oreilly.com/videos/9781771374620) - 5-hour long prototyping course by Kenny Chen (https://twitter.com/kennycheny).
⟡ Prototyping With Framer.js (https://generalassemb.ly/education/prototyping-with-framerjs) - On-location course instructed by Jay Stakelon (https://twitter.com/stakelon), Noah Levin (https://twitter.com/nlevin)
and Cemre Güngör (https://twitter.com/gem_ray).
⟡ Prototyping With Framer.js (https://generalassemb.ly/education/prototyping-with-framerjs) - On-location course instructed by Jay Stakelon (https://twitter.com/stakelon), Noah Levin (https://twitter.com/nlevin) and Cemre Güngör 
(https://twitter.com/gem_ray).
⟡ UI Prototyping with Framer.js (https://www.pluralsight.com/courses/ui-prototyping-framer-js) - Almost 5 hours long course by Jay Stakelon (https://twitter.com/stakelon).
⟡ Framercasts (http://www.framercasts.com/) - Advance your Framer knowledge with real world examples produced by Mike Johnson (https://twitter.com/failsafedesign).
⟡ Framer for UX Design
 (https://www.lynda.com/FramerJS-tutorials/UX-Design-Tools-Framer/562923-2.html) - Emmanuel Henri shows both how to use non-coding Framer tools and how the usage of programming fits into the UX design process.
⟡ Framer for UX Design (https://www.lynda.com/FramerJS-tutorials/UX-Design-Tools-Framer/562923-2.html) - Emmanuel Henri shows both how to use non-coding Framer tools and how the usage of programming fits into the UX design process.
⟡ Framer Crash Course (https://www.youtube.com/playlist?list=PLWlUJU11tp4f41p4dzizVkjjTQ38kA0wG) - Crash course learning the basics of design and code on Framer.
⟡ designers.how Framer Courses (https://designers.how/topics/framer) - List of basic and more advanced Framer courses.
⟡ Framer Studio for Beginners: A Comprehensive Guide (https://www.youtube.com/playlist?list=PLIZVb6Yuw91yGUNbSNEHvWWHkdol6SJUW) - Series of videos that walk you through designing and coding in Framer using 
hands-on projects by Cordova Putra (https://twitter.com/cordova)
⟡ Framer Studio for Beginners: A Comprehensive Guide (https://www.youtube.com/playlist?list=PLIZVb6Yuw91yGUNbSNEHvWWHkdol6SJUW) - Series of videos that walk you through designing and coding in Framer using hands-on projects by Cordova 
Putra (https://twitter.com/cordova)
Books
⟡ CoffeeScript for Framer (http://coffeescript-for-framerjs.com) by Tessa Thornton (https://twitter.com/tessthornton)
@@ -176,8 +169,7 @@
⟡ Framer Joystick (https://github.com/emilwidlund/framer-joystick) - Module for Gamepad-driven UI prototypes.
⟡ Framer Feedback (https://github.com/aboutjax/Framer-Feedback) - Framer feedback module makes it easier for you to prototype with feedback messages.
⟡ Framer-Bottom-Navigation (https://github.com/johnmpsherwin/Framer-Bottom-Navigation) - Framer Module to add Android's Bottom Navigation to your project.
⟡ Framer Device Rotator
 (https://github.com/josephxbrick/DeviceRotator) - A Framer module that adds a rotation button to a phone/tablet when said is displayed in a desktop browser or in Framer Studio (but not on device).
⟡ Framer Device Rotator (https://github.com/josephxbrick/DeviceRotator) - A Framer module that adds a rotation button to a phone/tablet when said is displayed in a desktop browser or in Framer Studio (but not on device).
⟡ Keyboard Input for Framer (https://github.com/Skinny-Malinky/Keyboard-Input-for-Framer) - A module that allows you to easily manage keyboard input.
⟡ Framer DesignComponents (https://github.com/sebcglbailey/framer-DesignComponents) - Module for converting your designs in design mode into full scalable classes in code, without a single line of code!.
⟡ Framer Web Audio API Module (https://github.com/raulibanez/framer-audio) - A Framer module that provides better audio support for your Framer projects.
@@ -210,7 +202,7 @@
⟡ Web Kit (https://framer.com/assets/static/downloads/kits/web-kit.zip) - All the elements youll need to start your next web project. Direct link.
⟡ Wireframe Kit (https://framer.com/assets/static/downloads/kits/wireframe-kit.zip) - Basic wireframe elements to blueprint your next big project. Direct link.
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
License
!CC0 (http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)