Longread translated automatically
big

Навыки современного дизайнера: Figma, вайбкодинг, тестирование

Как собрать интерфейс в Figma, превратить его в прототип с помощью ИИ и проверить на людях

What We Study

The course teaches the complete cycle of interface design work. Students master Figma at the level of components, auto layout, and design systems; they learn how to assign tasks to AI tools and assemble a functional prototype based on the mockups, which they then test with users and refine based on the test results.

The work proceeds on a single, end-to-end project—from mockup to published, user-tested prototype. The outcome is a portfolio-ready project and a clear, repeatable process applicable to professional work.

Start: Why this program and who it’s for

Контекст, аудитория и что нужно уметь до начала

Context

Designers are increasingly expected to deliver not just mockups, but working prototypes that can be presented to users and the team. According to McKinsey, the demand for skills in using AI development tools has grown sevenfold in two years, and in Russia, 41% of designers are already involved in development.Services have emerged that assemble an interface based on a text description—this is called vibe coding. However, the tool does not replace the fundamentals: without an understanding of interface patterns and user testing, the result may be fast but weak. This course merges three skills into one process: designing in Figma, building with AI, and testing.

Who It’s For

— Beginner designers whose work stops at the mockup stage.
— Designers who want to master AI tools and build prototypes without a developer.
— Product managers and marketers who want to quickly validate ideas using a working prototype.

Prerequisites

— Knowledge: Basic user interface elements, such as screens, buttons, forms, and menus.
— Skills: Confidence in using a computer and web services. Programming experience is not required.
— Equipment: A laptop with a camera and microphone, a Figma account, and accounts with 1–2 AI services for interface assembly (e.g., Lovable, Bolt, v0, or Figma Make). Free tiers are sufficient to start, though a paid tier for one service may be needed for the final assembly.

Map: Course Format

Сколько длится курс и как устроены занятия

Duration and Format

1 module, 8 weeks, fully online.

— Classes: 8 sessions of 3 hours and 4 consultations of 1.5 hours—totaling 30 astronomical hours, which is 40 academic hours. — Independent Work: approximately 6 hours per week—totaling 48 astronomical hours, which is 64 academic hours. — Total: approximately 104 academic hours.

All sessions and consultations are held online via video conferencing: the course is built around demonstrating work within design tools and analyzing projects on screen. Materials include: a starter design system in Figma, templates for AI tool prompts, a usability test protocol, and a prototype publication checklist.

Steps: Thematic Plan

8 занятий: от макета в Figma до проверенного прототипа

Thematic Plan

1. Interface Patterns: Navigation, Forms, Screen States. Product Analysis.
2. Figma: Frames, Auto Layout, Components, and Variants.
3. Design System: Styles, Variables, and Component Library.
4. Project Mockup: Scenarios and Key Screens.
5. AI Assembly Tools: Overview, Comparison, and Task Assignment for Mockup.
6. Prototype Assembly: From Mockup to Functional Interface, Testing, and Error Correction.
7. Usability Testing: Test Scenario, Conducting the Usability Test, and Results Analysis.
8. Prototype Refinement and Publication. Project Defense.

Final: Course Outcome

Что слушатели смогут и как это проверяется

Upon completing this course, students will be able to:

1. Analyze interfaces based on patterns and states.
2. Construct wireframes in Figma using components and auto layout.
3. Design user flows and key screens.
4. Assign tasks to AI tools and assemble a functioning prototype from the design.
5. Conduct usability testing and analyze the results.
6. Refine the solution based on test findings and present the project.

Assignments (Assessment Criteria)

1. Three written interface analyses.
2. Project component library in Figma.
3. Wireframes of the project’s key screens.
4. Prototype generated by an AI tool and published via a link.
5. Testing report from five users detailing revisions.
6. Defense of the refined project.

Final Project

Portfolio-ready project: Figma wireframes, a functional prototype built with AI assistance, a testing report, and the refined version. The defense is conducted online and lasts 15 minutes.Grading criteria: the design must be built using components; the prototype must function and accurately reflect the design; the test must be conducted according to a protocol; revisions must logically follow the test results; the student must demonstrate ownership over their decisions separate from the tool’s output.

Project Example

This will be added following the pilot cohort.
Навыки современного дизайнера: Figma, вайбкодинг, тестирование
Project created at 03.10.2026