A Complete Introduction to Webflow with Figma: Learn w/ Ruby

A Complete Introduction to Webflow with Figma: Learn w/ Ruby, available at $19.99, has an average rating of 4, with 25 lectures, based on 6 reviews, and has 1027 subscribers.

You will learn about Convert a Figma design to a full Webflow website Use Wizardry and em units to create a responsive design cross-browser and cross-platform Reading and interpreting Figma design files into Webflow input interface Enhance UX/UI design by adjusting Webflow elements This course is ideal for individuals who are Beginners to Webflow interested in porting Figma designs into Webflow It is particularly useful for Beginners to Webflow interested in porting Figma designs into Webflow.

Enroll now: A Complete Introduction to Webflow with Figma: Learn w/ Ruby

Summary

Title: A Complete Introduction to Webflow with Figma: Learn w/ Ruby

Price: $19.99

Average Rating: 4

Number of Lectures: 25

Number of Published Lectures: 25

Number of Curriculum Items: 25

Number of Published Curriculum Objects: 25

Original Price: $89.99

Quality Status: approved

Status: Live

What You Will Learn

Convert a Figma design to a full Webflow website
Use Wizardry and em units to create a responsive design cross-browser and cross-platform
Reading and interpreting Figma design files into Webflow input interface
Enhance UX/UI design by adjusting Webflow elements

Who Should Attend

Beginners to Webflow interested in porting Figma designs into Webflow

Target Audiences

Beginners to Webflow interested in porting Figma designs into Webflow

Join Ruby on a journey of taking a design from Figma and converting it into a Webflow website that stays the same in design across interfaces, with minimal adjustments at changing viewport widths.

This could only be done with the help of Timothy Ricks super cool technique called Wizardry. In this course, you will learn the basics of Webflow, wizardry, em Units, and some UI/UX design. We will create a website together and setup up different components like a Navigation bar, Hero section, About section and FAQ section.

Who is this course for?

This course is for Webflow beginners interested in learning how to use the tool and for Figma enthusiasts interested in porting their Figma designs into Webflow

Why am I qualified to teach Webflow and Figma?

I work at Eikon Labs where I routinely work with both tools to take ideas and designs all the way from the brainstorming step to reality.

Why choose my course?

This course provides a hands-on and practical course aimed at beginners. The material can be covered at your own pace and has been designed to be of real use to people starting with Webflow and Figma.

Go ahead and click enroll button, if you don’t love the course, a refund is always guaranteed.

– Experiential Learning Team

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome: What this course will cover

Lecture 2: Introduction to Webflow and Figma

Lecture 3: How to use Webflow Part 1: New site, elements and symbols

Lecture 4: How to use Webflow Part 2: Everything else

Lecture 5: How to use Webflow Part 3: Styling

Lecture 6: How to use Figma Part 1: Understanding style

Lecture 7: How to use Figma Part 2: Isolating assets

Lecture 8: How to use Figma Part 3: Calculations – X and Y coordinate systems

Chapter 2: Wizardry and Webflow Setup

Lecture 1: Wizardry Part 1: Foundations

Lecture 2: Wizardry Part 2: Why is it important

Lecture 3: Wizardry Part 3: How to use it

Lecture 4: Setting up Webflow Part 1: Setting fonts and all pages

Lecture 5: Setting up Webflow Part 2: Containers and sections

Chapter 3: Let's build the site: Navigation Bar, Hero, About and FAQ sections

Lecture 1: Navigation Bar Part 1: Logo and nav links

Lecture 2: Navigation Bar Part 2: Call to action and layout adjustments

Lecture 3: Hero Section: Hero wireframing and positioning

Lecture 4: About Section Part 1: Top half wireframe

Lecture 5: About Section Part 2: Top half styling

Lecture 6: About Section Part 3: Bottom half iteration

Lecture 7: FAQ Section Part 1: FAQ section heading

Lecture 8: FAQ Section Part 2: Trigger layout for dropdown

Lecture 9: FAQ Section Part 3: Trigger interaction for dropdown

Chapter 4: Final Touches

Lecture 1: Finishing touches Part 1: Clean up

Lecture 2: Finishing touches Part 2: Text size responsiveness

Lecture 3: Finishing touches Part 3: Embeds

Instructors

Pragmatic Institute
The best education at affordable prices

Rating Distribution

1 stars: 1 votes
2 stars: 0 votes
3 stars: 0 votes
4 stars: 3 votes
5 stars: 2 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu