Главная страницаКатегория figmaUI UX от Figma до HTML CSS и JavaScript

UI UX от Figma до HTML CSS и JavaScript

Name: UI UX от Figma до HTML CSS и JavaScript
Price: 13 USD
Rating: 5 (14 reviews)

UI UX Design Hybrid from Figma to HTML CSS and JavaScript

udemy

★5 (всего оценок - 14)

Продолжительность

31 ч 51 мин

Категория

Figma

Количество уроков

287 Видео

Дата добавления

22 авг. 2022 г., 23:43

Язык

Английский

Дата обновления

29 апр. 2026 г., 14:01

Курс «UI UX от Figma до HTML CSS и JavaScript» — это практический путь от создания интерфейсов в Figma до превращения их в работающие веб‑компоненты. В статье ниже вы узнаете, какие навыки приобретёте, какие проекты создадите и почему этот курс помогает стать тем самым UI/UX‑единорогом, который одинаково уверенно чувствует себя и в дизайне, и в коде.

Что даст вам этот курс

Программа выстроена таким образом, чтобы шаг за шагом погрузить вас как в дизайнерское мышление, так и в техническую сторону интерфейсов. Вы научитесь создавать продуманные UX‑решения, разрабатывать масштабируемые UI‑системы в Figma и превращать их в работающие прототипы с помощью HTML, CSS и JavaScript.

Ключевые навыки, которые вы освоите

Создание многоуровневых интерфейсных компонентов в Figma с Auto Layout и Variants.
Разработка UX‑флоу и пользовательских сценариев в FigJam.
Верстка макетов с нуля с использованием Flexbox и CSS Grid.
Работа с адаптивностью, сетками и современными UI‑паттернами.
Использование JavaScript для взаимодействия с DOM и управления анимациями.
Создание динамических, интерактивных элементов: переходы, состояния, анимации.

Практические проекты курса

Особенность курса — упор на реальную практику. В ходе обучения вы создадите полноценную библиотеку UI‑компонентов и множество проектов, которые можно включить в портфолио.

Креативные задания

Разработка сложных макетов веб‑сайтов в Figma и их точная реализация в HTML/CSS.
Преобразование дизайнов из Photoshop в корректную, валидную разметку HTML.
Создание анимированных SVG‑элементов с использованием чистого JavaScript.
Работа с JavaScript‑событиями и управление CSS‑анимациями через JS.
Освоение интерактивных UI‑эффектов с помощью CSS transitions и keyframes.
Разработка полностью адаптивного макета на основе Bootstrap 5 Grid.

Кому подойдет этот курс

Курс ориентирован как на начинающих дизайнеров, так и на специалистов, которые хотят добавить технические навыки в свой инструментарий. Если вы мечтаете разрабатывать интерфейсы, понимать разработчиков и самостоятельно создавать работающие прототипы — эта программа станет идеальным выбором.

Почему стоит пройти обучение

На рынке ценятся специалисты, которые умеют и проектировать, и понимать код. Такой специалист быстрее общается с разработчиками, точнее передает макеты в продакшен и способен создавать интерфейсы, которые реально работают. Освоив связку Figma + HTML + CSS + JavaScript, вы получите сильное конкурентное преимущество.

Итог

После прохождения курса вы не только научитесь создавать интерфейсы, но и сможете превращать их в полноценные интерактивные компоненты. Это умение открывает двери в мир продуктового дизайна, фронтенд‑разработки и кросс‑функциональных ролей, где ценятся универсальные специалисты.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:01:52
Course Overview
Урок 2. 00:14:19
Figma Basics
Урок 3. 00:09:22
Figma Plugin and Community
Урок 4. 00:22:48
Figma Essential Behaviors
Урок 5. 00:20:42
Figma Core Engine Concepts
Урок 6. 00:15:50
Airbnb Project
Урок 7. 00:16:03
Medignition Project Part 1
Урок 8. 00:09:49
Medignition Project Part 2
Урок 9. 00:03:55
Nested Component Behavior
Урок 10. 00:17:12
Sandrina Prototyping Project
Урок 11. 00:23:35
Overlay Prototyping Project
Урок 12. 00:10:07
Reusable Styles
Урок 13. 00:11:14
Automate Reusable Styles
Урок 14. 00:16:19
Automate Brand Styleguide
Урок 15. 00:13:45
Accessibility Testing
Урок 16. 00:09:02
Component Skeleton
Урок 17. 00:26:48
3000 Component Project
Урок 18. 00:27:30
Interactive Components Nested
Урок 19. 00:12:34
Automate color palette
Урок 20. 00:08:58
Automate typography styles
Урок 21. 00:09:36
Wireframe component
Урок 22. 00:11:51
Visual design components
Урок 23. 00:12:43
Rapid design part 1
Урок 24. 00:09:01
Rapid design part 2
Урок 25. 00:03:45
Unity and Similarity
Урок 26. 00:04:33
Dominance and Working Memory
Урок 27. 00:04:10
Negative Space and Complexity
Урок 28. 00:04:23
Contrast and Emphasis
Урок 29. 00:03:40
Proximity and Common Region
Урок 30. 00:03:32
Alignment and Uncompleted Task
Урок 31. 00:03:40
Psychological Barrier and Proportion
Урок 32. 00:04:59
Repetition and Common Behavior
Урок 33. 00:03:23
Rhythm and Line Connection
Урок 34. 00:01:43
Primary, Secondary, and CMYK Colors
Урок 35. 00:03:05
HSLA Colors
Урок 36. 00:02:53
RGB Colors
Урок 37. 00:03:22
Secondary RGB Colors
Урок 38. 00:04:14
Color Wheel
Урок 39. 00:01:29
Complementary Colors
Урок 40. 00:01:57
Split Complementary Colors
Урок 41. 00:01:54
Monochromatic Colors
Урок 42. 00:01:25
Analogous Colors
Урок 43. 00:01:34
Triad Colors
Урок 44. 00:01:24
Tertiary Colors
Урок 45. 00:04:23
UI Design Components
Урок 46. 00:03:01
UI Design Analysis
Урок 47. 00:01:21
Typography
Урок 48. 00:03:15
Serif and Sans Serif Typeface
Урок 49. 00:02:16
Font Weight
Урок 50. 00:03:10
Font Size
Урок 51. 00:02:51
Kerning
Урок 52. 00:01:46
Word Spacing
Урок 53. 00:01:47
Leading
Урок 54. 00:02:56
Line Width
Урок 55. 00:01:36
Orphan and Widow
Урок 56. 00:01:48
Type Alignment
Урок 57. 00:01:53
Type Hierarchy
Урок 58. 00:07:40
Set Up
Урок 59. 00:08:34
HTML Anatomy
Урок 60. 00:02:19
HTML List
Урок 61. 00:03:14
HTML Attribute
Урок 62. 00:05:57
HTML Images
Урок 63. 00:04:01
HTML Videos
Урок 64. 00:02:38
HTML iFrame
Урок 65. 00:02:05
HTML Checkbox and Radio Button
Урок 66. 00:04:13
HTML Input Field
Урок 67. 00:04:32
HTML Dropdown
Урок 68. 00:03:00
HTML Button
Урок 69. 00:05:03
Linking CSS and JavaScript Files
Урок 70. 00:03:42
HTML Semantics
Урок 71. 00:04:47
HTML Meta Tags
Урок 72. 00:02:28
HTML External Style
Урок 73. 00:01:45
HTML Style Tag
Урок 74. 00:02:48
HTML Inline Style
Урок 75. 00:03:24
Linking Fonts inside HTML
Урок 76. 00:06:40
HTML Block Elements
Урок 77. 00:04:52
HTML Inline Elements
Урок 78. 00:04:13
HTML Box Anatomy
Урок 79. 00:04:49
CSS Anatomy
Урок 80. 00:04:05
CSS Classes
Урок 81. 00:03:46
CSS ID
Урок 82. 00:02:08
CSS Multiple Selector
Урок 83. 00:04:28
CSS Variable
Урок 84. 00:07:38
CSS Specificity
Урок 85. 00:05:21
CSS Width and Height
Урок 86. 00:07:03
CSS Margin and Padding
Урок 87. 00:05:16
CSS Border Radius
Урок 88. 00:04:09
CSS Box Model
Урок 89. 00:01:50
CSS Universal Selector
Урок 90. 00:01:27
CSS Descendant
Урок 91. 00:01:22
CSS Direct Child
Урок 92. 00:01:40
CSS General Sibling
Урок 93. 00:02:20
CSS Adjacent
Урок 94. 00:01:38
CSS Attribute Selector
Урок 95. 00:02:48
CSS Focus Pseudo Class
Урок 96. 00:01:46
CSS First Child
Урок 97. 00:01:15
CSS Last Child
Урок 98. 00:03:06
CSS Nth Child
Урок 99. 00:02:23
CSS Odd Selector
Урок 100. 00:02:33
CSS Even Selector
Урок 101. 00:00:58
CSS Nth of Type
Урок 102. 00:01:31
CSS Not Selector
Урок 103. 00:05:23
CSS Link Pseudo Classes
Урок 104. 00:01:43
CSS Pseudo Elements
Урок 105. 00:02:02
CSS Comments
Урок 106. 00:03:17
CSS Background Color
Урок 107. 00:02:20
CSS Background Image
Урок 108. 00:02:00
CSS Background Repeat
Урок 109. 00:02:43
CSS Background Position
Урок 110. 00:03:54
CSS Background Size
Урок 111. 00:04:52
CSS Background Shorthand
Урок 112. 00:02:50
CSS Gradient
Урок 113. 00:04:42
CSS Multiple Background
Урок 114. 00:04:42
CSS Filters
Урок 115. 00:01:44
CSS Opacity
Урок 116. 00:02:50
CSS Clip Path Circle
Урок 117. 00:07:07
CSS Clip Path Polygon
Урок 118. 00:03:29
CSS Display and Visibility
Урок 119. 00:01:32
CSS Overflow
Урок 120. 00:01:39
CSS Text Shadow
Урок 121. 00:02:18
CSS Box Shadow
Урок 122. 00:02:34
CSS Blend Mode
Урок 123. 00:04:49
CSS Scale
Урок 124. 00:04:29
CSS Skew
Урок 125. 00:04:24
CSS Translate
Урок 126. 00:05:21
CSS Matrix
Урок 127. 00:03:32
CSS Rotate
Урок 128. 00:03:37
CSS Transform Origin
Урок 129. 00:03:44
CSS Multiple Transform
Урок 130. 00:05:05
CSS Easing Functions
Урок 131. 00:03:57
CSS Cubic Bezier
Урок 132. 00:04:30
CSS Transitions
Урок 133. 00:06:10
CSS Multiple Transitions
Урок 134. 00:05:23
CSS Transitions Shorthand
Урок 135. 00:09:56
CSS Animations
Урок 136. 00:04:14
CSS Animations Shorthand
Урок 137. 00:04:19
CSS Multiple Animations
Урок 138. 00:03:53
CSS Position Relative
Урок 139. 00:05:23
CSS Position Absolute
Урок 140. 00:05:13
CSS Position Fixed and Sticky
Урок 141. 00:03:14
CSS Z-Index
Урок 142. 00:16:20
CSS Responsive Design
Урок 143. 00:04:59
CSS Flexbox
Урок 144. 00:02:16
CSS Justify Content
Урок 145. 00:03:30
CSS Flex Start
Урок 146. 00:01:28
CSS Flex End
Урок 147. 00:02:11
CSS Space Evenly
Урок 148. 00:01:42
CSS Space Around
Урок 149. 00:01:30
CSS Space Between
Урок 150. 00:02:56
CSS Align Items
Урок 151. 00:01:43
CSS Align Baseline
Урок 152. 00:03:07
CSS Align Self
Урок 153. 00:04:19
CSS Flex Order
Урок 154. 00:08:38
CSS Flex Grow and Shrink
Урок 155. 00:05:39
CSS Flex Shorthand
Урок 156. 00:02:45
CSS Flex Direction
Урок 157. 00:03:38
CSS Flex Column
Урок 158. 00:03:30
CSS Flex Wrap
Урок 159. 00:02:24
CSS Align Content
Урок 160. 00:05:22
CSS Multiple Flex Properties
Урок 161. 00:06:36
CSS Grid Template Row
Урок 162. 00:03:25
CSS Grid Template Column
Урок 163. 00:03:38
CSS Grid Shorthand
Урок 164. 00:05:54
CSS Grid Row
Урок 165. 00:04:13
CSS Grid Column
Урок 166. 00:07:45
CSS Grid Area
Урок 167. 00:01:52
CSS Grid Gap
Урок 168. 00:08:30
CSS Justify Self
Урок 169. 00:05:51
Photoshop Project Overview
Урок 170. 00:11:31
Photoshop HTML Markup
Урок 171. 00:12:05
Photoshop CSS Root Declaration
Урок 172. 00:13:08
Photoshop CSS Grid Layout
Урок 173. 00:12:58
Photoshop CSS Card Design Part 1
Урок 174. 00:12:24
Photoshop CSS Card Design Part 2
Урок 175. 00:11:32
Photoshop CSS Card Design Part 3
Урок 176. 00:14:59
Photoshop CSS Interactions
Урок 177. 00:30:53
Photoshop CSS Responsive Behavior
Урок 178. 00:08:38
Bootstrap Breakpoints
Урок 179. 00:06:23
Bootstrap Naming Convention
Урок 180. 00:06:18
Bootstrap Hierarchy
Урок 181. 00:03:30
Bootstrap Container
Урок 182. 00:03:40
Bootstrap Rows
Урок 183. 00:06:35
Bootstrap Columns
Урок 184. 00:11:56
Bootstrap Gutter and Spacing
Урок 185. 00:04:16
Bootstrap Order
Урок 186. 00:03:53
Bootstrap Offset
Урок 187. 00:06:31
Bootstrap Display
Урок 188. 00:04:38
Bootstrap Alignment
Урок 189. 00:04:26
Bootstrap Nested Columns
Урок 190. 00:57:28
Responsive Design Project
Урок 191. 00:01:48
Boilerplate file
Урок 192. 00:02:42
Reusable Figma Styles
Урок 193. 00:01:10
Brand Styleguide
Урок 194. 00:07:00
CSS Automation
Урок 195. 00:02:16
CSS DRY Classes
Урок 196. 00:02:56
Airbnb Hero Section
Урок 197. 00:09:33
Airbnb Navigation Section
Урок 198. 00:09:31
Airbnb Card Section
Урок 199. 00:03:41
SVG Anatomy
Урок 200. 00:03:43
SVG Rectangle
Урок 201. 00:06:31
SVG Transparency
Урок 202. 00:03:52
SVG Coordinates
Урок 203. 00:03:05
SVG Round Corners
Урок 204. 00:01:56
SVG Text
Урок 205. 00:02:48
SVG Circle
Урок 206. 00:01:55
SVG Ellipse
Урок 207. 00:07:30
SVG Line
Урок 208. 00:04:38
SVG Stroke
Урок 209. 00:03:05
SVG Multiple Objects
Урок 210. 00:04:39
Adobe Illustrator SVG Polygon
Урок 211. 00:03:10
Figma SVG Path
Урок 212. 00:10:48
SVG Viewbox
Урок 213. 00:13:52
SVG Animation and Transform Group
Урок 214. 00:06:33
Adobe Illustrator SVG Clip Path
Урок 215. 00:03:43
Figma SVG Gradient
Урок 216. 00:03:18
Figma SVG Filter
Урок 217. 00:08:35
JavaScript Variables
Урок 218. 00:02:57
JavaScript String
Урок 219. 00:01:49
JavaScript Boolean
Урок 220. 00:01:39
JavaScript Number
Урок 221. 00:03:35
JavaScript Concatenation
Урок 222. 00:02:35
JavaScript Template Literal
Урок 223. 00:03:14
JavaScript Index Number and Length
Урок 224. 00:02:30
JavaScript Array
Урок 225. 00:04:03
JavaScript Array Manipulation
Урок 226. 00:03:04
JavaScript Object
Урок 227. 00:03:51
JavaScript Object Manipulation
Урок 228. 00:06:31
JavaScript Comparison Operators
Урок 229. 00:05:11
JavaScript Logical Operators
Урок 230. 00:04:14
JavaScript Conditional Statements
Урок 231. 00:05:22
JavaScript Logic
Урок 232. 00:04:23
JavaScript For Loop
Урок 233. 00:01:52
JavaScript For Of Loop
Урок 234. 00:03:06
JavaScript For Each Loop
Урок 235. 00:03:56
JavaScript Functions
Урок 236. 00:02:30
JavaScript Function Parameters
Урок 237. 00:02:43
JavaScript Anonymous Functions
Урок 238. 00:03:34
JavaScript Callback Functions
Урок 239. 00:03:00
JavaScript Arrow Functions
Урок 240. 00:07:03
JavaScript Query Selector
Урок 241. 00:03:54
JavaScript Query Selector All
Урок 242. 00:04:38
JavaScript Other Selectors
Урок 243. 00:03:12
JavaScript Text Content
Урок 244. 00:03:26
JavaScript Inner HTML
Урок 245. 00:05:22
JavaScript Attribute
Урок 246. 00:08:43
JavaScript Class List
Урок 247. 00:06:23
JavaScript Styling
Урок 248. 00:07:09
JavaScript Parent Child
Урок 249. 00:05:14
JavaScript Siblings
Урок 250. 00:04:32
JavaScript Create Element
Урок 251. 00:03:36
JavaScript Remove Child
Урок 252. 00:04:25
JavaScript Append and Prepend
Урок 253. 00:07:58
JavaScript Insert Before
Урок 254. 00:09:42
JavaScript Event Listener
Урок 255. 00:14:33
Split Shadow Project
Урок 256. 00:28:12
Responsive Landing Page Project
Урок 257. 00:24:16
Masonry Grid Project
Урок 258. 00:36:30
Typography Poster Project
Урок 259. 00:17:08
Morphing Stroke Project
Урок 260. 00:29:54
Primary Art Brush Project
Урок 261. 00:36:34
Dynamic Card Design Project
Урок 262. 00:39:11
Full Screen Menu Project
Урок 263. 00:32:15
Morphing Background Project
Урок 264. 00:29:40
DeStijl Art Grid Project
Урок 265. 00:12:06
Affinity Designer Overview
Урок 266. 00:19:29
Essential Design Tools
Урок 267. 00:25:02
Gradient and Swatches
Урок 268. 00:25:16
Layer Effects and Strokes
Урок 269. 00:13:59
Grids and 3D Isometric
Урок 270. 00:22:57
Logo Thumbnail Project
Урок 271. 00:14:20
Brand Styleguide Project
Урок 272. 00:03:55
UX Ice Berg Model
Урок 273. 00:02:06
UX Double Diamond
Урок 274. 00:02:07
UX Feasibility Diagram
Урок 275. 00:02:25
Target Audience
Урок 276. 00:02:58
UX Eco-System Mapping
Урок 277. 00:03:29
UX Journey Map
Урок 278. 00:04:21
Business SWOT Analysis
Урок 279. 00:01:47
Business Competitor Analysis
Урок 280. 00:04:34
Business Growth Metrics
Урок 281. 00:04:19
6 Famous Business Model
Урок 282. 00:04:34
Affinity and Mind Mapping
Урок 283. 00:08:44
User Persona
Урок 284. 00:04:06
Customer Journey Mapping
Урок 285. 00:09:48
User Flows
Урок 286. 00:05:39
Design Strategy
Урок 287. 00:10:40
Sprint Planning

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+197