Design & Development Workflow with Framer X

Design & Development Workflow with Framer X

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 0h 30m | 101 MB

When the needs of UX designers or developers are lost in translation, the appearance of the final application often doesn’t match the original vision. Framer X boasts functionality that prevents these kinds of communication breakdowns by enhancing the workflow of designers and developers alike. This powerful design prototyping tool allows users to craft intricate designs, design responsive layouts, create interactions, and take advantage of interactive—and reusable—React-based components. In this course, learn how UX designers and the developers they work with can share a common workflow—and better understand each other’s language and needs—using Framer X. Emmanuel Henri dives 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. He also covers the developer to designer workflow, showing developers how to work with a design system and use React components in Framer X.

Topics include:

  • The language of the developer
  • How React relates to Framer X and prototyping
  • Design elements for web and native mobile development
  • Exporting CSS and SVG assets from Framer X
  • Working with a design system
  • Using React components in Framer X
  • Customizing components in Framer X
Table of Contents

1 Workflows with Framer X
2 What you should know
3 Overview of the workflows
4 Introduction to our base project
5 Overview of Framer X
6 The language of the developer
7 React and components overview
8 Design elements for web development
9 Design elements for native mobile development
10 Practice Export CSS assets
11 Practice Export SVG assets
12 Design system introduction
13 The language of the designer
14 Work with a design system
15 Use React components in Framer X
16 Customize components in Framer X
17 Next steps