Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Figma to Editor X Tutorial

Codex Community via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn how to convert a website design from Figma to Editor X in this comprehensive tutorial. Build a complete landing page, including header, hero, testimonial, and footer sections, based on a Frontend Mentor design. Implement custom fonts and colors using the provided style guide. Cover the basics of page creation in Editor X, from exporting assets and uploading fonts to designing various sections and positioning elements. Explore techniques for adding images, shapes, and backgrounds while ensuring proper layout and responsiveness. Gain practical experience in web development and design conversion, setting the foundation for more advanced Editor X projects in the future.

Syllabus

Intro
Design
Load Editor X
Export Assets
Style Guide
Uploading Fonts
Designing the Home Page
Designing the Hero Section
Adding the Image
Positioning Elements
Statistics
Review
Adjust
It Just Works
Adding an Image
Adding a Shape
Adding a Background
Final Overview

Taught by

Codex Community

Reviews

Start your review of Figma to Editor X Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.