Awesome React Framer X Save

A collection of awesome links to learn React, ES6 & Framer X

Project README

Awesome React Framer X Awesome

This is an awesome list with links to courses, tutorials & videos to learn everything about React, ES6 & Framer X.

Join the community on Discord The MIT License

What is Framer X?

Framer X is a powerful Interaction Design tool. Please read the Official Documentation.

Framer X comes with a variety of features and capabilities like a Design Store of reusable UI components (powered by NPM). On the store, you will find a collection of interactive design & code components such as maps, random image generators, video and audio players, Design System Kits (iOS & Android) and more.

React components on Framer X can be written in TypeScript and/or ES6.

Getting started with React

  • React Docs - Make sure to check out the new React Docs. It's an overview of the most useful resources, including the Intro to React tutorial.
  • ES6 / React Cheatsheet by Koen Bok, founder of Framer, made a super useful intro to ES6 & React for designers, covering all the essential parts [variables, functions, components, CSS, JSX and more].

For advanced React & Framer X users

Table of Contents

Courses

Framer X Courses

  • 🆓Design + Code Free Framer X Course - Meng To & Team created an awesome 10 part crash course to learn all about the design & code parts of Framer X, including layouts, design components, stacks, code components, code overrides, using data on a code component and more.
  • 🆓UI Interactions in Framer Playgrounds - Meng To & Team show how to build interactions and UI animations from scratch using React Hooks, the Framer X in-app editor, Overrides, Property Controls, Shared Colors, Variants and a whole lot more.
  • Framer X + React - Linton Ye, from learnreact.design created a 5 part course to learn all about Framer X and React. The course covers the Framer X design capabilities such as frames, stacks, images, graphics, design components. The last 2 parts of the course include code overrides for animations and creating your first React components for Framer X.
  • Design & Development Workflow with Framer X - Emmanuel Henri on Lynda.com. A deep dive into the designer to developer workflow, going over how React relates to Framer X and prototyping, as well as the proper guidelines to follow when creating designs for the web and mobile devices.
  • The Framer X Book – Tes Mat put together a complete resource to teach designers two of the main aspects of Framer X, Code Components, and Overrides. He describes how Code Components work and how to customize existing components from the store, then explain how to use Overrides, one of the ways to quickly make elements on your canvas interactive.

Free React Courses

ES6 Courses

TypeScript Refrences

Articles

Framer X Articles

React & TypeScript Articles

React based design tools, online tools and REPLs

  • Framer Next - A technical showcase of the Framer API Examples implemented within a production React application environment. Created by @nataliemarleny.
  • Transform - Tool to transform JS objects to get something useful [CSS-to-JS, CSS-to-Emotion, HTML-to-JSX and many more]. Source.
  • Guppy - A friendly application manager and task runner for React.js.
  • Iso - Build and prototype with pure JSX – no build setup or command line required.
  • Alva - Alva is a React based Design Tool (in beta).
  • React for Designers - A friendly guide to start learning React. Created by @zach__johnston. Source.
  • HTMLtoJSX - A web-based tool that converts HTML to JSX compatible with React (v15).
  • SVG2JSX - A web-based tool that converts SVG to valid JSX.
  • React Patterns - A comprehensive collection of 17 React patterns and practices, by @chantastic.
  • React Cheat Sheet - An interactive documentation tool for the latest React API, by @chantastic.
  • React.js Cheatsheet - A complete reference of components, properties and states, life cycle methods and more.

Code Editors

Framer X will not have a code editor. Good news is that you can install and customize your code editor. Here are the most popular ones.

Tutorials

Framer X Components, Tools & Tips

Tools

Tips

  • Framer X Tips - A compilation of Framer X tricks and hidden gems, +50 so far and ground. Made by Linton Ye. New tips are welcomed, you can add yours using this form!

Other lists, communities, meetups and more.

Open Source Agenda is not affiliated with "Awesome React Framer X" Project. README Source: davo/awesome-react-framer-x
Stars
911
Open Issues
0
Last Commit
3 years ago

Open Source Agenda Badge

Open Source Agenda Rating