Pluralsight_UI_Prototyping_with_Framer.js

در این آموزش تصویری با نمونه سازی رابط کاربری با Framer.js آشنا می شوید.
این دوره آموزشی محصول موسسه Pluralsight است.

سرفصل های دوره:

  • معرفی Framer
  • نحوه نمونه سازی UI
  • ساخت نمونه هایی از Framer
  • کار با Framer Studio
  • کار با CoffeeScript Primer
  • اصول Framer
  • کار با لایه ها
  • خواص لایه ها
  • کار با رویدادها
  • نحوه تعامل با لایه ها
  • مبانی انیمیشن
  • کار با فتوشاپ
  • کار با اشیا برنامه
  • کار با منحنی های Bezier
  • افزایش مقاومت
  • افزایش سرعت
  • کار با HTML
  • کار با JSON
  • کار با Firebase
  • و…

عنوان دوره: Pluralsight UI Prototyping with Framer.js
سطح: مقدماتی
مدت زمان: 4 ساعت و 44 دقیقه
نویسنده: Jay Stakelon


توضیحات:

Pluralsight UI Prototyping with Framer.js

Beginner
4h 44m
Jay Stakelon

Use Framer Studio to design and build responsive interactions, explore advanced animation techniques, and build data-driven UI prototypes together.
Prototyping is a first-class member of the modern digital product design and development toolkit. Framer is a prototyping tool that lets you turn static mockups into interactive prototypes and to experiment quickly with dynamic, native-feeling animations and interactions. It integrates seamlessly with design tools, exports smoothly to mobile devices, and is powered by the language of the modern web, JavaScript. Use Framer Studio to design and build responsive interactions, explore advanced animation techniques, and build data-driven UI prototypes together. You'll leave empowered to not just design the look or create the functionality of the products you build, but also to control the user experience and feel

Introducing Framer
48m 6s
Intro and Agenda
8m 40s
UI Prototyping
7m 3s
Framer Examples
6m 39s
Under the Hood
4m 45s
Framer Studio Tour
6m 54s
Exercise 1: Ship a Framer Prototype
1m 9s
CoffeeScript Primer
12m 51s
Framer Fundamentals
35m 48s
Layers
13m 2s
Layer Properties
7m 40s
Layer Events
5m 7s
Code Structure
5m 27s
Exercise 2: Interacting with Layers
4m 30s
Animation Basics
29m 53s
Animation Basics
8m 24s
Dragging and Scrolling
9m 3s
Video
5m 45s
Exercise 3: Material Response
6m 39s
Importing Overview
23m 19s
Importing Overview
3m 2s
Importing from Photoshop
5m 26s
Importing from Sketch
6m 17s
Exercise 4: Prototype an App
8m 33s
Animation Workshop
50m 47s
Animation Objects
9m 29s
Bezier Animation Curves
10m 18s
Setting Defaults and Layer States
10m 21s
Sequencing and Cascading
6m 22s
Exercise 5: Animation Workshop
5m 0s
Exercise 5: Solution
9m 14s
Responsive UI5
4m 18s
Dynamism
6m 33s
Modulation
12m 37s
Resistance
8m 46s
Velocity
4m 49s
Thresholds
3m 29s
Exercise 6: Card Swipe UI
5m 21s
Exercise 6: Continued
12m 39s
Data-driven Prototypes
29m 10s
Layers and HTML
4m 43s
Pulling in JSON
6m 12s
Using Firebase
10m 18s
Exercise 7: 'Smart' Prototypes with Firebase
7m 55s
Appendix
13m 10s
Wrap-up
13m 10s