Figma: From Design to CSS Implementation
48mIntermediate2023-07-11
Authors
Joseph Labrecque
University Professor, Adobe Educator, Studio Head
Course details
You’ve created some great designs, but how can you turn them into code-ready assets that your developers can use? In this practical course, university professor Joseph Labrecque helps you understand what your Figma files need in order to translate well into “developer speak”. Learn how to define image export properties, as well as export and organize your images. Find out how to use the Inspect workspace, document your project in CSS, populate the design document, and define a Figma-generated CSS file. Plus go over creating an HTML document, replacing Figma-generated properties for clean CSS, and refining your design from Figma.
Skills covered
Web Design BusinessFigmaInteraction DesignWeb StandardsWeb DesignSmall Business and EntrepreneurshipUser ExperienceProjectWeb Development
Concepts
0. Introduction
- 01 - Implementing CSS from your Figma designs
- 02 - Getting set up
1. Producing Image Assets
- 03 - An overview of the design project
- 04 - Defining image export properties
- 05 - Exporting and organizing images
2. Translating CSS Rules
- 06 - Using the Inspect workspace
- 07 - Documenting the project CSS
- 08 - Populating the design document
- 09 - Defining a CSS document
3. Implementing CSS within HTML
- 10 - Creating an HTML document
- 11 - Replacing Figma elements for CSS
- 12 - Refining the design from Figma
Conclusion
- 13 - What's next
Related courses
- The Freelance Stack: Real Project with Next.js and Strapi
- Designing from Figma to Webflow
- Figma: Handing off to Developers
- AI-Powered Prototyping with Figma Make (No Code Required)
- FigJam for Design Thinking and Collaboration
- Figma: Building Animations and Interactions
- The AI-Driven Product Designer
- Design to Code: Using AI to Build Faster