Figma: Handing off to Developers

36mIntermediate2020-02-28

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

Course details

Explore using Figma, the cloud-based design tool that is particularly suited for collaboration, to work effectively with development teams. Learn how to prepare a Figma project for developer handoff, including how to export design assets from Figma in a developer-ready format. See how Figma can integrate with common design utilities to create style and design guide information, and watch the steps to structure an iterative workflow that allows regular handoff between design changes and development implementation.

Topics include:
- Preparing a project for handoff
- Organizing and planning assets
- Creating components
- Developer assets and info
- Exploring the tools available in Figma
- Exporting image assets
- Plugins: Avocode and Zeplin
- The iteration workflow
- Collaborating in Figma

Skills covered

FigmaInteraction DesignUser ExperienceProject

Concepts

0. Introduction

01 - Figma developer handoff
02 - Course prerequesites

1. Project Prep for Handoff

03 - Project introduction
04 - Asset organization
05 - Asset planning - Code VS asset export
06 - Components creation

2. Developer Assets and Info

07 - Exploration of the tools available
08 - Exploration of the code information
09 - Export image assets
10 - Avocode integration introduction
11 - Avocode - Working with assets
12 - Zeplin integration introduction
13 - Zeplin - Working with assets

3. Iteration Workflow

14 - Exploration of the workflow
15 - Figma cooperation and version tools

Conclusion

16 - Next steps