{"id":334915,"date":"2022-06-24T09:00:05","date_gmt":"2022-06-24T09:00:05","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=334915"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=334915","title":{"rendered":"<span>\u0423\u043b\u044c\u0442\u0438\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u043c<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<div class=\"persona\" persona=\"true\"><img decoding=\"async\" persona=\"true\" class=\"image persona__image\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/e45\/422\/829\/e45422829bbaaa795d51669e6339e57c.jpg\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e45\/422\/829\/e45422829bbaaa795d51669e6339e57c.jpg\" data-blurred=\"true\"\/><\/p>\n<h5 class=\"persona__heading\" persona=\"true\">\u0415\u0432\u0433\u0435\u043d\u0438\u0439 \u0428\u0435\u0432\u0446\u043e\u0432<\/h5>\n<p>\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c UX-\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 Usetech<\/p>\n<\/div>\n<p>\u041d\u0430 \u043d\u0435\u0431\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440\u043e\u0432, \u0447\u0442\u043e \u043e \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445. \u041d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0437\u0434\u0435\u0441\u044c \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u043e\u043f\u044b\u0442\u0435.<\/p>\n<p>\u041f\u043e\u0432\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0433\u0430\u0439\u0434\u0430 \u0441\u0442\u0430\u043b\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0438 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 \u0433\u043e\u043b\u043e\u0432\u0435. \u041a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u044d\u0442\u043e\u0442 \u043f\u0443\u0442\u044c, \u0442\u043e \u0432 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u0431\u044b\u043b\u043e \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u043e \u043a\u0440\u0443\u043f\u0438\u0446\u0430\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438.<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0434\u0432\u043e\u0436\u0443 \u0438\u0442\u043e\u0433 \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u044b \u0438 \u0441\u0443\u043c\u043c\u0438\u0440\u0443\u044e \u0434\u043e\u0431\u044b\u0442\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0443\u043b\u044c\u0442\u0438\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0442\u0435\u043c\u0435. \u0425\u043e\u0442\u044f \u0431\u044b \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0438 \u043d\u0430\u0432\u043e\u0434\u043a\u0438, \u0432 \u043a\u0430\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043a\u043e\u043f\u0430\u0442\u044c \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0436\u0435 \u0436\u0430\u0436\u0434\u0443\u0449\u0438\u0445 \u0437\u043d\u0430\u043d\u0438\u0439.<\/p>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0416\u0435\u043d\u044f, \u044f \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c UX-\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 <a href=\"https:\/\/usetech.ru\/\"><u>Usetech<\/u><\/a>. \u041d\u0430 \u0434\u043e\u0441\u0443\u0433\u0435 \u0432\u0435\u0434\u0443 <a href=\"https:\/\/t.me\/uxrdesign\"><u>\u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u043a\u0430\u043d\u0430\u043b \u00ab\u041c\u0430\u043c\u043a\u0438\u043d \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u00bb<\/u><\/a>, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0445 \u0448\u0442\u0443\u043a\u0430\u0445.<\/p>\n<p>\u042f \u0441\u0430\u043c \u2014 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u043d\u043e \u043c\u043d\u0435 \u0432\u0430\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b, \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 JSON \u0438 \u043a\u0430\u043a \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<h2>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440<\/h2>\n<p>\u0414\u0440\u0443\u0437\u044c\u044f \u0438\u0437 frontend \u2013 \u044f \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438 \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0411\u0443\u0434\u0443 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0434, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043c\u043e\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0441\u0432\u043e\u0438\u043c\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438.<\/p>\n<blockquote>\n<p><em>\u042f \u043d\u0435 \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u044b \u0432\u0435\u0437\u0434\u0435 \u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0412\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u044b \u0438\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0430\u043c.<\/em>  <\/p>\n<\/blockquote>\n<h2>\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u044c\u044f<\/h2>\n<p><strong>\u0414\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432<\/strong>: \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e \u0442\u043e\u043a\u0435\u043d\u0430\u0445, \u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e\u0442 \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442\u00a0\u0441 \u043a\u043e\u0434\u043e\u043c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0438 \u0447\u0442\u043e \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p><strong>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/strong>: \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0448\u0430\u0440\u044f\u0442 \u0437\u0430 \u043a\u043e\u0434, \u043d\u043e \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u0438\u0441\u0442\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u0432\u0435\u043b\u0438 \u0442\u043e\u043a\u0435\u043d\u044b.<\/p>\n<p>\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434: \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u2013 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435, \u043d\u043e \u0438 \u043d\u0430 \u0431\u044d\u043a\u0435. \u042f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043b\u0438\u0448\u044c \u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0443 \u043d\u0430\u0441:<\/p>\n<ul>\n<li>\n<p>\u0434\u0432\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Figma;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 SCSS (Sass);<\/p>\n<\/li>\n<li>\n<p>\u0441\u0435\u0440\u0432\u0438\u0441 zeroheight;<\/p>\n<\/li>\n<li>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Amazon Style Dictionary.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b?<\/h2>\n<p>\u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0440\u0435\u0431\u044f\u0442\u0430 \u0438\u0437 Salesforce: \u0414\u0436\u0438\u043d\u0430 \u0411\u043e\u043b\u0442\u043e\u043d \u0438 \u0414\u0436\u043e\u043d \u041b\u0435\u0432\u0438\u043d. \u041e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0438\u0445 \u0432 \u0441\u0432\u043e\u0435\u0439 <a href=\"https:\/\/www.lightningdesignsystem.com\/\"><u>\u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0435 Lightning<\/u><\/a> \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u043e \u043d\u0435\u0439 \u043d\u0430 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u044d\u0442\u0438 \u0440\u0435\u0431\u044f\u0442\u0430 \u0441\u0442\u0430\u043b\u0438 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u043b\u044e\u0434\u044c\u043c\u0438, \u043a\u0442\u043e \u043e \u043d\u0438\u0445 \u0437\u0430\u0433\u043e\u0432\u043e\u0440\u0438\u043b.  <\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62b528c6ea15664f98adaab4\" data-style=\"\" id=\"62b528c6ea15664f98adaab4\" width=\"\"><\/div>\n<p>\u041e\u043d\u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b\u0438 \u043e \u0441\u0432\u043e\u0435\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u043a\u0430\u043a \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442 \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u0440\u043e\u0441\u0441-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u044c. \u0414\u0430\u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 Theo, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 JSON\/XML \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n<p>\u041c\u0438\u0441\u0441\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u2014 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u043f\u043e\u043c\u043e\u0447\u044c \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0438 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043f\u0440\u0430\u0432\u043a\u0438. \u0410 \u0435\u0449\u0451 \u043e\u043d\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0445 \u043c\u0430\u0441\u0441\u043e\u0432\u043e\u0441\u0442\u044c \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c, \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u044d\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u044f\u0442 \u043d\u0430 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0435. \u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u2014 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430.<\/p>\n<blockquote>\n<p><em>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0435\u0441\u044c \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430\u043c\u0438 \u0438\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430\u043c\u0438, \u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 \u0443\u0436 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432\u0430\u043c \u043d\u0438 \u043a \u0447\u0435\u043c\u0443.<\/em>  <\/p>\n<\/blockquote>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043e\u0442 \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u043a \u0431\u043e\u043b\u044c\u0448\u0435\u043c\u0443, \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h2>\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/969\/a07\/6f5\/969a076f5e41e2a254fb766f5517e09a.jpeg\" alt=\"\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \/\/ \u0411\u0440\u0435\u0434 \u0424\u0440\u043e\u0441\u0442\" title=\"\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \/\/ \u0411\u0440\u0435\u0434 \u0424\u0440\u043e\u0441\u0442\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/969\/a07\/6f5\/969a076f5e41e2a254fb766f5517e09a.jpeg\" data-blurred=\"true\"\/><figcaption>\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \/\/ \u0411\u0440\u0435\u0434 \u0424\u0440\u043e\u0441\u0442<\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 <a href=\"https:\/\/medium.com\/%D0%B0%D1%82%D0%BE%D0%BC%D0%B0%D1%80%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD\/tagged\/%D0%B0%D1%82%D0%BE%D0%BC%D0%B0%D1%80%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-1\"><u>\u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0411\u0440\u0435\u0434\u0430 \u0424\u0440\u043e\u0441\u0442\u0430<\/u><\/a>, \u0442\u043e \u0441\u0430\u043c\u043e\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446\u0435\u0439 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0442\u043e\u043c, \u043d\u043e \u0443 \u044d\u0442\u0438\u0445 \u0430\u0442\u043e\u043c\u043e\u0432 \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430, \u0448\u0440\u0438\u0444\u0442, \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0442.\u0434.<\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0442\u0438\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0430 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0431\u043e\u043b\u044c\u044e \u0432\u043d\u0435\u0441\u0442\u0438 \u043f\u0440\u0430\u0432\u043a\u0438 \u0432\u043e \u0432\u0441\u0451\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041d\u0435\u0442, \u0432\u043e \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0440\u0430\u0437\u043e\u043c, \u0435\u0441\u043b\u0438 \u0438\u0445 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e.<\/p>\n<blockquote>\n<p><em>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0442\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0447\u0438\u043a\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438.<\/em>  <\/p>\n<\/blockquote>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0441\u0430\u043c\u044b\u043c\u0438 \u043c\u0435\u043b\u043a\u0438\u043c\u0438 \u0447\u0430\u0441\u0442\u0438\u0446\u0430\u043c\u0438 \u0432 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/a8f\/a81\/a8e\/a8fa81a8ecae24fced9b971c15486743.jpeg\" alt=\"\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0441 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438\" title=\"\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0441 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a8f\/a81\/a8e\/a8fa81a8ecae24fced9b971c15486743.jpeg\" data-blurred=\"true\"\/><figcaption>\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0441 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438<\/figcaption><\/figure>\n<h2>\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c?<\/h2>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0438\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 Figma, \u0438\u043d\u0430\u0447\u0435 \u0432\u0435\u043b\u0438\u043a \u0448\u0430\u043d\u0441 \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u0431\u0430\u0440\u0434\u0430\u043a.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u2014 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044f \u0432\u0438\u0436\u0443 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043c\u044b\u0441\u043b\u0443. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0444\u0438\u043e\u043b\u0435\u0442\u043e\u0432\u043e\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442. \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0441\u0442\u0438\u043b\u044c <strong>primary<\/strong> \u0438 \u043b\u0435\u043f\u0438\u0442 \u0435\u0433\u043e \u043d\u0430 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0444\u0438\u043e\u043b\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430.<\/p>\n<p>\u0415\u0449\u0451 \u044f \u0437\u0430\u043c\u0435\u0447\u0430\u044e, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u044b \u043f\u043e \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0435\u043b\u0451\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0432 hex <strong>#44BE84<\/strong> \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f <strong>green<\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/14a\/c1d\/d91\/14ac1dd9144f03b282bf69e907a61e54.jpeg\" alt=\"\u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438\" title=\"\u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/14a\/c1d\/d91\/14ac1dd9144f03b282bf69e907a61e54.jpeg\" data-blurred=\"true\"\/><figcaption>\u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/figcaption><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u0432\u0438\u0436\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 1.<\/strong> \u041a\u0430\u043a \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u044c\u043c\u0451\u0442\u0441\u044f \u0437\u0430 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u0438 \u0434\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d?<\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 2.<\/strong> \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \/ \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \/ \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442, \u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0433\u043e \u0438\u0437 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435 \u2014 \u043a\u0430\u043a \u0435\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u0446\u0432\u0435\u0442 \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442?<\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 3.<\/strong> \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0434\u0438\u043d <strong>primary<\/strong>-\u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e: \u043a\u043d\u043e\u043f\u043a\u0438, \u0444\u043e\u043d\u044b, \u0438\u043a\u043e\u043d\u043a\u0438. \u041a\u0430\u043a \u0431\u044b\u0442\u044c, \u0435\u0441\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c?<\/p>\n<p>\u0418 \u0442\u0443\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e: \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c <strong>primary<\/strong>, \u0447\u0442\u043e \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u044e \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u0440\u0430\u0437\u043b\u0438\u043d\u043a\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435. \u0418 \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0448\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0432 Figma, \u043d\u043e \u0438 \u043a\u043e\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u2014 \u043f\u0435\u0440\u0435\u043b\u0438\u043d\u043a\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438 \u0442\u0430\u043c.<\/p>\n<p>\u0425\u0443\u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e <strong>primary<\/strong>, \u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430: <strong>green<\/strong>, <strong>orange<\/strong>, <strong>red<\/strong>. \u0410 \u0435\u0449\u0435 \u0438\u043d\u043e\u0433\u0434\u0430 <strong>red-1<\/strong>, <strong>red-2<\/strong>, <strong>light-red<\/strong>. \u041a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435, \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u044c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c, \u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0432\u043b\u0435\u0447\u0435\u0442 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u044f <strong>green<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\u0445, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441 \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u043d\u0430 \u0441\u0438\u043d\u0438\u0439. \u0422\u043e\u0433\u0434\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f <strong>green<\/strong> \u0431\u0443\u0434\u0435\u0442, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e\u0442 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>\u0426\u0432\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0443\u043f\u043f. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 100% \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435, \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043e\u0442 \u0441\u0432\u043e\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0438 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430.<\/p>\n<ul>\n<li>\n<p><strong>\u0424\u043e\u043d\u044b.<\/strong> \u0417\u0434\u0435\u0441\u044c \u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e\u0431\u0449\u0438\u0439 \u0444\u043e\u043d, \u0444\u043e\u043d \u0434\u043b\u044f \u043f\u043e\u0434\u043b\u043e\u0436\u0435\u043a \u0438\u043b\u0438 \u043e\u0441\u0442\u0440\u043e\u0432\u043a\u043e\u0432, \u0444\u043e\u043d \u0434\u043b\u044f \u043f\u043e\u0434\u043b\u043e\u0436\u0435\u043a \u0443 \u043e\u0441\u0442\u0440\u043e\u0432\u043a\u043e\u0432 (\u0435\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f), \u0433\u0440\u0430\u043d\u0438\u0446\u044b (\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0438, \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043e\u0431\u0432\u043e\u0434\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432), \u0430\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0444\u043e\u043d, \u0444\u043e\u043d \u0434\u043b\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0422\u0435\u043a\u0441\u0442.<\/strong> \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u2014 \u0442\u0435\u043c\u043d\u044b\u0439 \u0434\u043b\u044f \u0431\u0435\u043b\u044b\u0445 \u0444\u043e\u043d\u043e\u0432, \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0434\u043b\u044f \u044f\u0440\u043a\u0438\u0445 \u0444\u043e\u043d\u043e\u0432. \u0415\u0441\u043b\u0438 \u043d\u0430\u0434\u043e, \u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0441\u0442\u0438\u043b\u0438 \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e, \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0435\u0439 \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0446\u0432\u0435\u0442 \u043f\u043e\u0434 \u0441\u0441\u044b\u043b\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u043a\u043e\u043d\u043a\u0438.<\/strong> \u0426\u0432\u0435\u0442 \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0438 \u0438\u043d\u0432\u0435\u0440\u0442\u043d\u044b\u0439, \u0435\u0441\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u044f\u0440\u043a\u0438\u0445 \u0444\u043e\u043d\u0430\u0445.<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043d\u043e\u043f\u043a\u0438.<\/strong> \u041a\u043d\u043e\u043f\u043a\u0438 \u044f \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e \u043d\u0430 \u043f\u043e\u0434\u0433\u0440\u0443\u043f\u043f\u044b \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e \u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0418\u043d\u043e\u0433\u0434\u0430 \u044f \u0437\u0430\u0448\u0438\u0432\u0430\u044e \u0432 \u0441\u0442\u0438\u043b\u044c \u0435\u0449\u0451 \u0438 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u0438\u0445 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0430\u0442\u0443\u0441\u044b.<\/strong> \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u2014 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0438\u0445.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/6b8\/d9e\/ddf\/6b8d9eddf4556c43c144f15974e8689a.jpeg\" alt=\"\u0421\u0442\u0438\u043b\u0438, \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443\" title=\"\u0421\u0442\u0438\u043b\u0438, \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6b8\/d9e\/ddf\/6b8d9eddf4556c43c144f15974e8689a.jpeg\" data-blurred=\"true\"\/><figcaption>\u0421\u0442\u0438\u043b\u0438, \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443<\/figcaption><\/figure>\n<p>\u041d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0438\u0437 \u0441\u0442\u0438\u043b\u044f \u0432 \u0441\u0442\u0438\u043b\u044c. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438 \u0438 \u043d\u0435 \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.  <\/p>\n<h2>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/h2>\n<p>\u042d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0438 \u0442\u043e\u043a\u0435\u043d\u044b-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0422\u0430\u043a\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043b\u0435\u0433\u043a\u043e \u043b\u043e\u0436\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0438\u043b\u0438 \u0432 Figma.<\/p>\n<p><code>[Category]-[Type]-[Item]-[SubItem]-[State]<\/code><\/p>\n<ul>\n<li>\n<p><strong>Category<\/strong> \u2013 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 (color, font);<\/p>\n<\/li>\n<li>\n<p><strong>Type<\/strong> \u2013 \u0442\u0438\u043f \u0442\u043e\u043a\u0435\u043d\u0430 (text, background, border);<\/p>\n<\/li>\n<li>\n<p><strong>Item<\/strong> \u2013 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (button, table, input);<\/p>\n<\/li>\n<li>\n<p><strong>SubItem<\/strong> \u2013 \u0442\u0438\u043f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (primary, secondary);<\/p>\n<\/li>\n<li>\n<p><strong>State<\/strong> \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (default, hover, active).<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u0430, \u0438\u043d\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u043e\u0440\u043e\u0447\u0435. \u0412\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u0439 \u0438 \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/0d4\/f67\/b6d\/0d4f67b6d86291dea837ac092f3605bc.jpeg\" alt=\"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\" title=\"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0d4\/f67\/b6d\/0d4f67b6d86291dea837ac092f3605bc.jpeg\" data-blurred=\"true\"\/><figcaption>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430<\/figcaption><\/figure>\n<h2>\u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/h2>\n<p>\u041d\u0430 \u0432\u0438\u0434\u0435\u043e \u043f\u0440\u0438\u043c\u0435\u0440: \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c, \u0430 \u043a\u0430\u043a\u0430\u044f \u0442\u0435\u043d\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443. \u0415\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 <strong>*-hover<\/strong>.<\/p>\n<p>\u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0438 \u043f\u0440\u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u0430, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62b52ab207a8cd4fd1f4b670\" data-style=\"\" id=\"62b52ab207a8cd4fd1f4b670\" width=\"\"><\/div>\n<h2>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d = \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f<\/h2>\n<p>\u0412 \u043c\u0438\u0440\u0435 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 (\u0434\u0430 \u0438 backend) \u0442\u043e\u043a\u0435\u043d\u044b \u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435 \u043d\u043e\u0432\u043e\u0435. \u041a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0432 \u043a\u043e\u0434\u0435 \u00ab\u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f\u00bb \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<blockquote>\n<p><em>\u0411\u0435\u0440\u044f \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043e\u043f\u044b\u0442 frontend \u2014 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d \u0438 \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0432 \u043a\u043e\u0434\u0435.<\/em>  <\/p>\n<\/blockquote>\n<p><strong>\u0426\u0432\u0435\u0442 \u0432 \u043a\u043e\u0434\u0435:<\/strong><\/p>\n<pre><code>.button { \u00a0\u00a0\u00a0background-color: #00BFFF; }<\/code><\/pre>\n<p><strong>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0446\u0432\u0435\u0442\u0430 \u0432 \u043a\u043e\u0434\u0435:<\/strong><\/p>\n<pre><code>$frost-sky: #00BFFF; .button { \u00a0\u00a0\u00a0background-color: $frost-sky; }<\/code><\/pre>\n<p><strong>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f:<\/strong><\/p>\n<pre><code>$color-button-primary-default: #00BFFF; .button { \u00a0\u00a0\u00a0background-color: $color-button-primary-default; }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0434\u0430\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u043d\u0435 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043d\u0438\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u043d\u043e \u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0432\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Figma, \u0433\u0434\u0435 \u0432\u044b \u0433\u0438\u0431\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u043d\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0435 \u043e\u0434\u043d\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430 \u0432\u0441\u0451.<\/p>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0443\u0433\u0430\u0434, \u0430 \u043d\u0435\u0441\u0451\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043c\u044b\u0441\u043b, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043e \u0447\u0451\u043c \u044d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438 \u0447\u0442\u043e \u043e\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442.<\/p>\n<h2>JSON<\/h2>\n<blockquote>\n<p><strong><em>JSON \u0438\u043b\u0438 JavaScript Object Notation<\/em><\/strong><em> \u2014 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 JavaScript. \u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/em><\/p>\n<\/blockquote>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 JSON-\u0444\u0430\u0439\u043b\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0445\u0438\u0442\u0440\u043e\u0433\u043e: \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b, \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c *.json \u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439.<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 (Figma, Adobe XD, Sketch), \u043b\u044e\u0431\u044b\u043c\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438 (zeroheigh, Specify) \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0440\u0443\u0447\u043a\u0430\u043c\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ace\/b3f\/8a8\/aceb3f8a87d0e2592c20c8dc577e6b1b.jpeg\" alt=\"\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d \u0442\u043e\u043a\u0435\u043d\u044b \u0432 JSON\" title=\"\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d \u0442\u043e\u043a\u0435\u043d\u044b \u0432 JSON\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ace\/b3f\/8a8\/aceb3f8a87d0e2592c20c8dc577e6b1b.jpeg\" data-blurred=\"true\"\/><figcaption>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d \u0442\u043e\u043a\u0435\u043d\u044b \u0432 JSON<\/figcaption><\/figure>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0444\u0430\u0439\u043b\u0430 JSON \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u0430-\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c. JSON \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0432\u0441\u0435\u0445 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0442\u0438\u043b\u0435\u0439 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f web \u0438 \u043e\u043d\u043e \u043e\u0434\u043d\u043e, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442. \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0438 \u043f\u0430\u0440\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e.<\/p>\n<p>\u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, iOS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 android-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435? \u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u043e \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u043f\u043e\u0434 \u043e\u0434\u043d\u0438\u043c \u0431\u0440\u0435\u043d\u0434\u043e\u043c?\u00a0<\/p>\n<p>\u0422\u0443\u0442 \u0438 \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u0430\u0436\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0430\u0432\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0432\u043b\u0435\u0442\u0435\u0442\u044c \u0432 \u043a\u043e\u043f\u0435\u0439\u043a\u0443.\u00a0<\/p>\n<blockquote>\n<p><em>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u043f\u043e\u0434\u0441\u0442\u0435\u043b\u0438\u0442\u0435 \u0441\u043e\u043b\u043e\u043c\u043a\u0443, \u0440\u044b\u043d\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435.<\/em>  <\/p>\n<\/blockquote>\n<h2>\u0421\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430 JSON<\/h2>\n<p><strong>JSON-\u043e\u0431\u044a\u0435\u043a\u0442<\/strong> \u2014 \u044d\u0442\u043e \u043d\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u043d\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u0430\u0440 \u00ab\u043a\u043b\u044e\u0447:\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00bb, \u0437\u0430\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u044b\u0445 \u0432 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 { }\u00a0 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043d\u0438\u043c \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442, \u043a\u0430\u043a \u0441\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u0451\u043c.<\/p>\n<p><strong>\u041a\u043b\u044e\u0447<\/strong> \u2014 \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0443. \u041e\u043d \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u043d\u044f\u043b, \u043a\u0430\u043a\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c.<\/p>\n<p><strong>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/strong><\/p>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 &#171;#ffffff&#187; (\u0431\u0435\u043b\u044b\u0439 \u0446\u0432\u0435\u0442) \u0441 \u043a\u043b\u044e\u0447\u043e\u043c &#171;color&#187; (\u0446\u0432\u0435\u0442) \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 &#171;16px&#187; \u0441 \u043a\u043b\u044e\u0447\u043e\u043c &#171;font-size&#187; (\u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430):<\/p>\n<pre><code>{ \u00a0\"color\": \"#ffffff\", \u00a0\"font-size\": \"16px\" }<\/code><\/pre>\n<p>\u0421\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u043a\u043b\u044e\u0447\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u00abvalue\u00bb.<\/p>\n<pre><code>{ \u00a0\u00a0\"category\": { \u00a0\u00a0\u00a0\u00a0\"type\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"item\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"state\": {                 \"value\": \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0} }<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u043a\u0435\u043d\u0430 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445:<\/p>\n<pre><code>\"buttons\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"primary\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"fill-border-default\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"value\": \"rgb(87,89,206)\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"fill-border-hover\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"value\": \"rgb(107,110,243)\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"fill-border-active\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"value\": \"rgb(69,71,168)\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"fill-border-disabled\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"value\": \"rgba(111,112,195,0.5)\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"text\": { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"value\": \"rgb(255,255,255)\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u043d\u0435\u043c \u044d\u0442\u043e\u0442 JSON \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438 \u043f\u0440\u0435-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 SCSS, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<pre><code>$color-button-primary-fill-border-default: rgb(87,89,206); $color-button-primary-fill-border-hover: rgb(107,110,243); $color-button-primary-fill-border-active: rgb(69,71,168); $color-button-primary-fill-border-disabled: rgba(111,112,195,0.5); $color-button-primary-text: rgb(255,255,255);<\/code><\/pre>\n<p>\u0418 \u0434\u0430\u043b\u0435\u0435, \u0432 \u043a\u043e\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0448\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043e\u0434\u043d\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043a \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0443, \u043c\u0438\u043d\u0443\u044f \u044d\u0442\u0430\u043f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<blockquote>\n<p><em>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c, \u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0441\u0442\u0438\u043b\u044f \u0432 Figma \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 JSON \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u041f\u0440\u043e\u0435\u043a\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u043a\u0430\u0442\u044f\u0442\u0441\u044f \u0431\u0435\u0437 \u0431\u043e\u043b\u0438.<\/em>  <\/p>\n<\/blockquote>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62b52c83ea15664f98adaab5\" data-style=\"\" id=\"62b52c83ea15664f98adaab5\" width=\"\"><\/div>\n<h2>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/h2>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0438 \u0431\u044b\u0442\u044c \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 html-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u043e \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 <strong>\u043c\u0438\u043a\u0441\u0438\u043d\u044b<\/strong> (\u043f\u0440\u0438\u043c\u0435\u0441\u0438).<\/p>\n<blockquote>\n<p><strong><em>\u041c\u0438\u043a\u0441\u0438\u043d\u044b<\/em><\/strong><em> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0439 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u0412\u044b \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u043c\u0438.   <br \/><\/em><a href=\"https:\/\/sass-lang.su\/documentation\/at-rules\/mixin\"><em><u>Sass \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/u><\/em><\/a>  <\/p>\n<\/blockquote>\n<p>\u0417\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0432 Figma. \u0412 \u043d\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p>\u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u0448\u0440\u0438\u0444\u0442\u043e\u0432 (font-family);<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 (font-size);<\/p>\n<\/li>\n<li>\n<p>\u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 (font-weight);<\/p>\n<\/li>\n<li>\n<p>\u043c\u0435\u0436\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (letter-spacing);<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0441\u043e\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 (line-height).<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/82c\/160\/aec\/82c160aecd42482e7020213e96460cdb.jpeg\" alt=\"\u0421\u0442\u0438\u043b\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0432 Figma\" title=\"\u0421\u0442\u0438\u043b\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0432 Figma\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/82c\/160\/aec\/82c160aecd42482e7020213e96460cdb.jpeg\" data-blurred=\"true\"\/><figcaption>\u0421\u0442\u0438\u043b\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0432 Figma<\/figcaption><\/figure>\n<h2>\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 JSON?<\/h2>\n<pre><code class=\"json\">{   \"font\": {     \"header1\": {       \"fontFamily\": {         \"value\": \"Gilroy\",       },       \"fontSize\": {         \"value\": \"48px\"       },       \"fontWeight\": {         \"value\": 500       }       \"letterSpacing\": {         \"value\": \"1%\"       },       \"lineHeight\": {         \"value\": \"72px\"       }     }   } }<\/code><\/pre>\n<h2>\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445?<\/h2>\n<pre><code class=\"json\">$font-header1-fontFamily: \"Gilroy\"; $font-header1-fontSize: 48px; $font-header1-fontWeight: 500; $font-header1-letterSpacing: 1%; $font-header1-lineHeight: 72px;<\/code><\/pre>\n<h2>\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u0435?<\/h2>\n<pre><code class=\"json\">@mixin header-1 {     font-family: $font-header1-fontFamily;     font-size: $font-header1-fontSize;     font-weight: $font-header1-fontWeight;     letter-spacing: $font-header1-letterSpacing;     line-height: $font-header1-lineHeight; }<\/code><\/pre>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 SCSS:<\/h2>\n<pre><code>h1 {     @include header-1(); } .banner {     @include header-1(); } .widget {     @include header-1(); }<\/code><\/pre>\n<h2>\u0427\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u043c CSS?<\/h2>\n<pre><code>h1 {   font-family: \"Gilroy\";   font-size: 48px;   font-weight: 500;   letter-spacing: 1%;   line-height: 72px; } .banner {   font-family: \"Gilroy\";   font-size: 48px;   font-weight: 500;   letter-spacing: 1%;   line-height: 72px; } .widget {   font-family: \"Gilroy\";   font-size: 48px;   font-weight: 500;   letter-spacing: 1%;   line-height: 72px; }<\/code><\/pre>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f.<\/p>\n<blockquote>\n<p><em>\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 \u044d\u0442\u0443 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <\/em><strong><em>\u0443\u0441\u043b\u043e\u0432\u043d\u043e 200 \u0440\u0430\u0437<\/em><\/strong><em>, \u0442\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 (\u0438\u043b\u0438 \u0432\u0441\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430) \u0438 \u043f\u0430\u0440\u044b \u043a\u043b\u0438\u043a\u043e\u0432 \u043d\u0430 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437 Figma \u043c\u044b <\/em><strong><em>\u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e<\/em><\/strong><em> \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0432\u0441\u0435 200 \u0441\u0442\u0438\u043b\u0435\u0439.<\/em><\/p>\n<\/blockquote>\n<p>\u041d\u043e \u043c\u043e\u0436\u043d\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <strong>@extend<\/strong>, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435 \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u043b\u044f \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043e\u0434\u043d\u0438\u0445 \u0438 \u0442\u0435\u0445 \u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u041d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0430\u0437.  <\/p>\n<h2>\u0422\u043e\u043a\u0435\u043d\u044b \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440<\/h2>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430.<\/p>\n<p>\u0412\u0441\u0451, \u0447\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0432\u0438\u0434\u0438\u0442 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0435 (Figma, Sketch, Adobe XD) \u2014 \u044d\u0442\u043e \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f: \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438 \u0438 \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0438, \u0437\u0430\u043b\u0438\u0432\u043a\u0443 \u0446\u0432\u0435\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 UI, \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438.<\/p>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u043a\u043e\u043f\u043d\u0443\u0442\u044c \u0433\u043b\u0443\u0431\u0436\u0435, \u0442\u043e \u0432\u0441\u0451 \u044d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043a\u043e\u0434\u0430. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443 \u0442\u043e\u0439 \u0436\u0435 Figma \u0435\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0442\u043e\u043a\u0435\u043d\u044b JSON. \u0420\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u043d\u0438 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0438 \u0442\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443, \u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0435.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0432\u0430 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u0430:<\/p>\n<ul>\n<li>\n<p>Design Tokens<\/p>\n<\/li>\n<li>\n<p>Figma Tokens<\/p>\n<\/li>\n<\/ul>\n<h2>Design Tokens<\/h2>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d <a href=\"https:\/\/www.figma.com\/community\/plugin\/888356646278934516\"><u>Design Tokens<\/u><\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u0441\u0442\u0438\u043b\u0438: \u0446\u0432\u0435\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043d\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0441\u0435\u0442\u043a\u0438, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0432\u0441\u0451 \u043f\u0440\u043e\u0449\u0435 \u2014 \u043f\u043b\u0430\u0433\u0438\u043d \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0430 \u0432\u043e\u0442 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0442\u0430\u043d\u0446\u044b \u0441 \u0431\u0443\u0431\u043d\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e: \u043d\u0443\u0436\u043d\u043e \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u044b \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u043e\u043a\u0435\u043d.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0435\u0441\u0442\u044c \u0432 <a href=\"https:\/\/github.com\/lukasoppermann\/design-tokens#design-tokens\"><u>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a> \u043a \u043f\u043b\u0430\u0433\u0438\u043d\u0443. \u0422\u0430\u043a\u0436\u0435 \u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0435\u0441\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/baa\/fff\/2db\/baafff2db82509f1b294e9501b087b5e.jpeg\" alt=\"\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Design Tokens \u0434\u043b\u044f Figma\" title=\"\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Design Tokens \u0434\u043b\u044f Figma\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/baa\/fff\/2db\/baafff2db82509f1b294e9501b087b5e.jpeg\" data-blurred=\"true\"\/><figcaption>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Design Tokens \u0434\u043b\u044f Figma<\/figcaption><\/figure>\n<h2>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430<\/h2>\n<p>\u0422\u0443\u0442 \u043e\u0431\u0449\u0435\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435. \u042f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c *.json<\/p>\n<ul>\n<li>\n<p>*.tokens.json<\/p>\n<\/li>\n<li>\n<p>*.tokens<\/p>\n<\/li>\n<li>\n<p>*.json<\/p>\n<\/li>\n<\/ul>\n<h2>\u0424\u043e\u0440\u043c\u0430\u0442 JSON<\/h2>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 (<a href=\"https:\/\/skillbox.ru\/media\/code\/notatsii-v-programmirovanii\/\"><u>\u0447\u0442\u043e \u044d\u0442\u043e?<\/u><\/a>). \u0422\u0443\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u043a\u0430\u043a \u0432\u0430\u043c \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>kebab-case (\u043c\u043e\u0439 \u0432\u044b\u0431\u043e\u0440);<\/p>\n<\/li>\n<li>\n<p>camelCase.<\/p>\n<\/li>\n<\/ul>\n<p>\u0424\u043e\u0440\u043c\u0430\u0442 \u0442\u043e\u043a\u0435\u043d\u0430 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c Original (deprecated). \u0412\u0442\u043e\u0440\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 W3C \u0443\u0434\u043e\u0431\u0435\u043d \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043f\u0440\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437-\u0437\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430.<\/p>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432<\/h2>\n<ul>\n<li>\n<p>\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0441 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 <em>#<\/em>, <em>.<\/em>, <em>@<\/em><\/p>\n<\/li>\n<li>\n<p>\u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u0440\u0430\u0437\u0434\u0435\u043b \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<h2>\u041f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0434\u043b\u044f \u0442\u0438\u043f\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/h2>\n<p>\u041f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0442\u0438\u043f\u043e\u0432 \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442, \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0432\u0430\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\/\u0441\u0442\u0438\u043b\u0435\u0439\/\u0444\u0440\u0435\u0439\u043c\u043e\u0432.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0444\u0440\u0435\u0439\u043c \u043d\u0430\u0437\u0432\u0430\u043d \u043a\u0430\u043a <strong>size\/sizes<\/strong>, \u0442\u043e \u043e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u0430, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u0442\u043e\u043a\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441 <strong>size-*<\/strong>.<\/p>\n<h2>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Design Tokens. \u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u044b, \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0432 \u0441\u0430\u043c\u043e\u0439 Figma. \u0421 \u0446\u0432\u0435\u0442\u043e\u043c \u0438 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439, \u043a\u0430\u043a \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0432\u044b\u0448\u0435, \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 json \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b.<\/p>\n<p>\u0410 \u0434\u0430\u043b\u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \/ \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \/ \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u043e\u0432 \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435\u043c \u0440\u0443\u043a, \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <strong>\u00ab_token\/***\u00bb<\/strong> \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u0442\u043e, \u0447\u0442\u043e \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 \u0442\u043e\u043a\u0435\u043d\u0435. \u041d\u0438\u0436\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n<h2>\u0420\u0430\u0437\u043c\u0435\u0440\u044b<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u044b\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432 \u0442\u043e\u043a\u0435\u043d \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <strong>\u00ab_token\/sizes\u00bb<\/strong>, \u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u044b \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438. \u0421\u0430\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c <strong>\u00absizes\/\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00bb<\/strong>.<\/p>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0435 \u0442\u043e\u043a\u0435\u043d\u0430 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435: <strong>[size-**]<\/strong>, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u043e\u0437\u044c\u043c\u0451\u0442\u0441\u044f \u0438\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ffe\/0de\/cc8\/ffe0decc84d75db38a2b6ae254040e72.jpeg\" alt=\"\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u043b\u043e\u043a\u043e\u0432\" title=\"\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u043b\u043e\u043a\u043e\u0432\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ffe\/0de\/cc8\/ffe0decc84d75db38a2b6ae254040e72.jpeg\" data-blurred=\"true\"\/><figcaption>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u043b\u043e\u043a\u043e\u0432<\/figcaption><\/figure>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0431\u043b\u043e\u043a\u043e\u0432<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 JSON:<\/p>\n<pre><code class=\"json\">{   \"size\": {     \"80\": {       \"value\": 80     },     \"120\": {       \"value\": 120     },     \"160\": {       \"value\": 160     }   } }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 SCSS \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:  <\/p>\n<pre><code>$size-80: 80px; $size-120: 120px; $size-160: 160px;<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a \u043f\u043b\u0430\u0433\u0438\u043d\u0443 \u0438 \u0432 Playground-\u0444\u0430\u0439\u043b\u0435.<\/p>\n<h2>\u0412\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/h2>\n<p>\u0412\u044b\u0433\u0440\u0443\u0437\u043a\u0430 JSON-\u0444\u0430\u0439\u043b\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445:<\/p>\n<ul>\n<li>\n<p>\u0440\u0443\u0447\u043d\u0430\u044f \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 Github.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 Github \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u0434\u0432\u0443\u043c\u044f \u043f\u0443\u0442\u044f\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0435\u0440\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0444\u0430\u0439\u043b\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h2>Figma Tokens<\/h2>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d <a href=\"https:\/\/www.figma.com\/community\/plugin\/843461159747178978\"><u>Figma Tokens <\/u><\/a>\u0445\u043e\u0440\u043e\u0448 \u0432\u0441\u0435\u043c. \u041d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0437 \u043d\u0435\u0433\u043e, \u0442\u0430\u043a \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043c \u043f\u043b\u044e\u0441\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438\u043d\u043a\u043e\u0432\u043a\u0430 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0432 \u0442\u043e\u043a\u0435\u043d\u0435: \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u0431\u043e\u0440\u0434\u0435\u0440\u0430 \u0438\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0442\u043e\u043a\u0435\u043d\u0430, \u0442\u043e \u043e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432 \u0432\u0430\u0448\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432 Figma.<\/p>\n<p>\u0421\u0442\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 Figma, \u0442\u0430\u043a \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/b80\/3a9\/0c5\/b803a90c5bd839fa6d17e22f59168b3f.jpeg\" alt=\"\u041f\u043b\u0430\u0433\u0438\u043d Figma Tokens \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438\" title=\"\u041f\u043b\u0430\u0433\u0438\u043d Figma Tokens \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b80\/3a9\/0c5\/b803a90c5bd839fa6d17e22f59168b3f.jpeg\" data-blurred=\"true\"\/><figcaption>\u041f\u043b\u0430\u0433\u0438\u043d Figma Tokens \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438<\/figcaption><\/figure>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d \u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0430 \u0432\u0438\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438: \u0432 \u0432\u0438\u0434\u0435 UI \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0440\u0430\u0437\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u043c JSON-\u0444\u0430\u0439\u043b\u043e\u043c. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432 hex, rgb, hsl.  <\/p>\n<h2>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u0430 \u0438\u043c\u0435\u043d\u0443\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u043a\u0443 \u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e $color-button-primary-default, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0438\u043c\u0435\u043d\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c: button.primary.default. \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u043f\u043e\u0434\u0442\u044f\u043d\u0435\u0442\u0441\u044f \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u043f\u0440\u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/e2a\/60e\/278\/e2a60e2786ce58f79d15fb5e37b8d989.jpeg\" alt=\"\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430\" title=\"\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e2a\/60e\/278\/e2a60e2786ce58f79d15fb5e37b8d989.jpeg\" data-blurred=\"true\"\/><figcaption>\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430<\/figcaption><\/figure>\n<p>\u0412 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0442\u043e\u043a\u0435\u043d\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u044f\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0438 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u043e\u043a\u0435\u043d. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <strong>alias<\/strong>. \u0421\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043a\u0435\u043d \u043d\u0443\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 <strong>{alias}<\/strong>.<\/p>\n<p><strong>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440.<\/strong> \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 HSL, \u043c\u0435\u043d\u044f\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b <em>saturation<\/em> \u0438 <em>lightness<\/em>, \u0430 <em>hue<\/em> \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u043e\u043a\u0435\u043d \u0441 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435\u043c <strong>button.base<\/strong> \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 313. \u041e\u0442\u0442\u0435\u043d\u043e\u043a \u0446\u0432\u0435\u0442\u0430 (hue).  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u043e\u043a\u0435\u043d <strong>button.primary.default<\/strong> \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f HSL \u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u043c, \u0441\u0441\u044b\u043b\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0442\u043e\u043a\u0435\u043d \u0438 \u043a\u0440\u0443\u0442\u0438\u043c <em>saturation<\/em> \u0438 <em>lightness<\/em>.<\/p>\n<p>Alias \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043a\u0430\u043a <strong>{alias}<\/strong>, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0437\u0430\u043f\u0438\u0441\u044c \u0434\u043b\u044f <strong>button.primary.default<\/strong> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a:<\/p>\n<pre><code>hsl({button.base},71,55)<\/code><\/pre>\n<p>\u0410 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n<pre><code>hsl(313,71,55)<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043b\u044f hover, active. \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c saturation \u0438 lightness.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/b4d\/de7\/5c2\/b4dde75c2ef6cf065ae1afac84793290.jpeg\" alt=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c alias \u0432 Figma Tokens\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c alias \u0432 Figma Tokens\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b4d\/de7\/5c2\/b4dde75c2ef6cf065ae1afac84793290.jpeg\" data-blurred=\"true\"\/><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c alias \u0432 Figma Tokens<\/figcaption><\/figure>\n<p>\u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u0415\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u0438 \u0435\u0433\u043e \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043d\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0432 <strong>button.base.<\/strong><\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62b56db641d6a34fa4f7f211\" data-style=\"\" id=\"62b56db641d6a34fa4f7f211\" width=\"\"><\/div>\n<h2>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/h2>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0438\u043d\u043a\u043e\u0432\u0430\u0442\u044c \u043a \u0441\u043b\u043e\u044f\u043c Figma \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0442\u0438\u043b\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043b\u0438\u043d\u043a\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043b\u0438\u0432\u043a\u0443, \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0438\u043c\u044f \u0442\u043e\u043a\u0435\u043d\u0430, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u0430 \u0438 \u0435\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435.<\/p>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d, \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u044b \u0438 \u0441\u043b\u043e\u0438 \u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u043c \u043c\u0435\u043d\u044e \u0442\u043e\u043a\u0435\u043d\u0430 \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u0442\u0438\u043f\u0443 \u043b\u0438\u043d\u043a\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0439.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62b56de541d6a34fa4f7f212\" data-style=\"\" id=\"62b56de541d6a34fa4f7f212\" width=\"\"><\/div>\n<h2>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/h2>\n<p>\u041a\u0430\u043a \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, JSON \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0442\u044c, \u043d\u043e \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 JSON \u0444\u0430\u0439\u043b\u0435 \u0438 \u0441\u043c\u0435\u043d\u0438\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u0441\u0435\u0433\u043e JSON-\u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u043b\u0430\u0433\u0438\u043d.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/8e0\/ee8\/07b\/8e0ee807b1a4daa174442e30a94d9209.jpeg\" alt=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 JSON-\u0444\u0430\u0439\u043b\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0432 \u043f\u043b\u0430\u0433\u0438\u043d Figma Tokens\" title=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 JSON-\u0444\u0430\u0439\u043b\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0432 \u043f\u043b\u0430\u0433\u0438\u043d Figma Tokens\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8e0\/ee8\/07b\/8e0ee807b1a4daa174442e30a94d9209.jpeg\" data-blurred=\"true\"\/><figcaption>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 JSON-\u0444\u0430\u0439\u043b\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0432 \u043f\u043b\u0430\u0433\u0438\u043d Figma Tokens<\/figcaption><\/figure>\n<h2>\u0412\u044b\u0433\u0440\u0443\u0437\u043a\u0430<\/h2>\n<p>\u0423 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 JSON-\u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u044f\u0447\u0443\u0442\u0441\u044f \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Settings:<\/p>\n<ul>\n<li>\n<p>\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e URL;<\/p>\n<\/li>\n<li>\n<p>\u0432 GitHub \u0438\u043b\u0438 GitLab<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u0430\u044f \u043f\u043b\u0430\u0442\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0430\u0437.<\/p>\n<h2>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 JSON<\/h2>\n<p>\u041c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 JSON, \u0447\u0442\u043e \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u043b\u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d \u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u0447\u043a\u0430\u043c\u0438, \u043d\u043e \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0437 JSON \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 SCSS-\u0444\u0430\u0439\u043b\u0435?<\/p>\n<p>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e:<\/p>\n<ul>\n<li>\n<p>\u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/zeroheight.com\/\"><u>zeroheight<\/u><\/a> (\u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442 \u0438 \u0442\u0435\u043a\u0441\u0442);<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0434\u0443\u043a\u0442 <a href=\"https:\/\/specifyapp.com\/\"><u>Specify<\/u><\/a>, \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0442\u043e\u043a\u0435\u043d\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/github.com\/salesforce-ux\/theo\"><u>Theo \u043e\u0442 Salesforce<\/u><\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u0437 npm <a href=\"https:\/\/www.npmjs.com\/package\/json-to-scss\"><u>\u00abJSON to SCSS\u00bb<\/u><\/a> (\u0442\u043e\u043b\u044c\u043a\u043e SCSS);<\/p>\n<\/li>\n<li>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/README\"><u>Amazon Style Dictionary<\/u><\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0435\u0440\u0432\u0438\u0441 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.<\/p>\n<h2>Zeroheight<\/h2>\n<p>\u042d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 <a href=\"https:\/\/storybook.js.org\/\"><u>storybook<\/u><\/a> \u2013 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430.<\/p>\n<p>\u041d\u043e zeroheight \u0431\u043e\u043b\u0435\u0435 \u0434\u0440\u0443\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0438 \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u043c \u0431\u043e\u043d\u0443\u0441\u043e\u043c: \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 Figma \u0432 \u043f\u0430\u0440\u0443 \u043a\u043b\u0438\u043a\u043e\u0432.<\/p>\n<p>Zeroheight \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b, \u043d\u043e \u0432 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435: \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0438 \u0446\u0432\u0435\u0442. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u0442\u0430\u043d\u0446\u0435\u0432 \u0441 \u043a\u043e\u0434\u043e\u043c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e\u0433\u043e \u0445\u0432\u0430\u0442\u0430\u0435\u0442, \u0442\u043e \u0441\u043c\u0435\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0435\u0433\u043e.<\/p>\n<h2>\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c?<\/h2>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0439 Figma-\u0444\u0430\u0439\u043b \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u042f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0435 <a href=\"https:\/\/uxrdsgn.ru\/zeroheight\/\"><u>zeroheight \u0432 \u0441\u0432\u043e\u0435\u043c \u043e\u0431\u0437\u043e\u0440\u0435<\/u><\/a>.<\/p>\n<h2>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/h2>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0446\u0432\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/6b0\/767\/67a\/6b076767a897870ef39ad5a5164f802b.jpeg\" alt=\"\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0432 zeroheight\" title=\"\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0432 zeroheight\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6b0\/767\/67a\/6b076767a897870ef39ad5a5164f802b.jpeg\" data-blurred=\"true\"\/><figcaption>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0432 zeroheight<\/figcaption><\/figure>\n<h2>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b<\/h2>\n<p>\u0423 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0435\u0441\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u0441\u0442\u0430\u0432\u043a\u0438. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 Figma, \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b, \u0436\u0438\u0432\u043e\u0439 \u043a\u043e\u0434, \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b. \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 2 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>Sass<\/p>\n<\/li>\n<li>\n<p>CSS<\/p>\n<\/li>\n<li>\n<p>JSON<\/p>\n<\/li>\n<li>\n<p>iOS<\/p>\n<\/li>\n<li>\n<p>Android<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u043a \u0442\u043e\u043a\u0435\u043d\u0430\u043c, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e. \u0424\u0430\u0439\u043b \u0441 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u043b\u0438 \u0441\u043a\u0430\u0447\u0430\u0442\u044c, \u0438\u043b\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 zeroheight.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/a73\/97e\/a63\/a7397ea636742ab66fbc740e5de3c870.jpeg\" alt=\"\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 zeroheight \/\/ \u0412\u0435\u0440\u0441\u0438\u044f 1\" title=\"\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 zeroheight \/\/ \u0412\u0435\u0440\u0441\u0438\u044f 1\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a73\/97e\/a63\/a7397ea636742ab66fbc740e5de3c870.jpeg\" data-blurred=\"true\"\/><figcaption>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 zeroheight \/\/ \u0412\u0435\u0440\u0441\u0438\u044f 1<\/figcaption><\/figure>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043e\u0442\u0434\u0430\u0435\u0442 JSON \u0444\u0430\u0439\u043b \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0433\u0434\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Amazon Style Dictionary.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/30c\/603\/262\/30c603262bbd0c08950a8b41e147bd61.jpeg\" alt=\"\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 zeroheight \/\/ \u0412\u0435\u0440\u0441\u0438\u044f 2\" title=\"\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 zeroheight \/\/ \u0412\u0435\u0440\u0441\u0438\u044f 2\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/30c\/603\/262\/30c603262bbd0c08950a8b41e147bd61.jpeg\" data-blurred=\"true\"\/><figcaption>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 zeroheight \/\/ \u0412\u0435\u0440\u0441\u0438\u044f 2<\/figcaption><\/figure>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u0438\u043d\u0443\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u043c\u0435\u043d\u044f\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u0432 Figma, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u0432 zeroheight \u0438 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<blockquote>\n<p><em>\u0411\u0443\u0434\u044c\u0442\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b. \u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0442\u0430\u0440\u0438\u0444\u0430\u0445 \u043d\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u043d\u043e\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u043b \u044d\u0442\u043e \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/em>  <\/p>\n<\/blockquote>\n<h2>Amazon Style Dictionary<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0439\u0442\u0438 \u043f\u043e \u043f\u0443\u0442\u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 JSON, \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0435\u0442 JSON \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 Amazon \u0432 2017 \u0433\u043e\u0434\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c JSON-\u0444\u0430\u0439\u043b \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f web (css, scss, less), iOS \u0438 Android-\u0444\u043e\u0440\u043c\u0430\u0442\u044b.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62b5377d41d6a34fa4f7f210\" data-style=\"\" id=\"62b5377d41d6a34fa4f7f210\" width=\"\"><\/div>\n<blockquote>\n<p><em>\u0423 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0435\u0441\u0442\u044c \u00ab<\/em><a href=\"https:\/\/www.style-dictionary-play.dev\/\"><em><u>\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/em><\/a><em>\u00bb, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0434\u0435\u043c\u043e-\u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435.<\/em>  <\/p>\n<\/blockquote>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440. <\/p>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/h2>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 CLI (command line interface), \u043f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<p>\u0414\u043b\u044f MacOS \u044d\u0442\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u00ab\u0422\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u00bb, \u0434\u043b\u044f Windows \u044d\u0442\u043e \u00ab\u041a\u043e\u043c\u0430\u043d\u0434\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430\u00bb (cmd). \u041d\u043e \u043c\u043e\u0436\u043d\u043e \u0438 \u0432 \u043b\u044e\u0431\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<h2>\u0428\u0430\u0433 1. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b npm<\/h2>\n<p>\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 npm (Node Package Manager) (<a href=\"https:\/\/proglib.io\/p\/chto-takoe-npm-gayd-po-node-package-manager-dlya-nachinayushchih-2020-07-21\"><u>\u0447\u0442\u043e \u044d\u0442\u043e?<\/u><\/a>) \u0438 node.js. \u042d\u0442\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u044b\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u2014 \u043c\u0430\u0433\u0430\u0437\u0438\u043d, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<blockquote>\n<p><em>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c node.js \u043c\u043e\u0436\u043d\u043e <\/em><a href=\"https:\/\/nodejs.org\/en\/download\/\"><em><u>\u0441\u043a\u0430\u0447\u0430\u0432 \u0441 \u0441\u0430\u0439\u0442\u0430<\/u><\/em><\/a><em>, \u0432\u044b\u0431\u0440\u0430\u0432 \u043d\u0443\u0436\u043d\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/em>  <\/p>\n<\/blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u043b\u0438 \u0443 \u0432\u0430\u0441 node.js \u0438 npm \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0432 CLI:<\/p>\n<p><code>node -v <\/code>\u0438 <code>npm -v<\/code><\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0431\u0435\u0434\u0438\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 Style Dictionary.<\/p>\n<h2>\u0428\u0430\u0433 2. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Style Dictionary<\/h2>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435:<\/p>\n<p><code>npm install -g style-dictionary<\/code><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0436\u0434\u0438\u0442\u0435\u0441\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438.<\/p>\n<h2>\u0428\u0430\u0433 3. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043d\u0443\u0436\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443, \u0433\u0434\u0435 \u0443 \u0432\u0430\u0441 \u043b\u0435\u0436\u0438\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442 Style Dictionary (<a href=\"https:\/\/ru.wikihow.com\/%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D1%89%D0%B0%D1%82%D1%8C%D1%81%D1%8F-%D0%BF%D0%BE-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%B0%D0%BC-%D0%BF%D0%BE%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%BE%D0%BC-%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%BD%D0%BE%D0%B9-%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8\"><strong><u>\u043a\u0430\u043a \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0435 \u0432 CLI?<\/u><\/strong><\/a>).  <\/p>\n<p><code>cd \u043f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0435<\/code><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<p><code>style-dictionary init basic<\/code><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u043e\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c<\/summary>\n<div class=\"spoiler__content\">\n<p><code>Copying starter files...<\/code><\/p>\n<p><code>Source style dictionary starter files created!<\/code><\/p>\n<p><code>Running `style-dictionary build` for the first time to generate build artifacts.<\/code><\/p>\n<p><code>scss<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/scss\/_variables.scss<\/code><\/p>\n<p><code>android<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/android\/font_dimens.xml<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/android\/colors.xml<\/code><\/p>\n<p><code>compose<\/code><\/p>\n<p><code>\u2714\ufe0e build\/compose\/StyleDictionaryColor.kt<\/code><\/p>\n<p><code>\u2714\ufe0e build\/compose\/StyleDictionarySize.kt<\/code><\/p>\n<p><code>ios<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/ios\/StyleDictionaryColor.h<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/ios\/StyleDictionaryColor.m<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/ios\/StyleDictionarySize.h<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/ios\/StyleDictionarySize.m<\/code><\/p>\n<p><code>ios-swift<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/ios-swift\/StyleDictionary.swift<\/code><\/p>\n<p><code>ios-swift-separate-enums<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/ios-swift\/StyleDictionaryColor.swift<\/code><\/p>\n<p><code>\u2714\ufe0e\u00a0 build\/ios-swift\/StyleDictionarySize.swift<\/code><\/p>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f SCSS, Android, compose, iOS, iOS-swift.<\/p>\n<p>\u0412 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0432\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u0435 \u043f\u0430\u043f\u043a\u0438 \u0438 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<ul>\n<li>\n<p><strong>tokens<\/strong> \u2014 \u0432 \u043d\u0435\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f JSON \u0441 \u0434\u0435\u043c\u043e-\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>build<\/strong> \u2014 \u0432\u0441\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b, \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 JSON<\/p>\n<\/li>\n<li>\n<p><strong>config.json<\/strong> \u2014 \u0444\u0430\u0439\u043b \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0428\u0430\u0433 4. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0444\u0430\u0439\u043b\u0430\u043c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043b\u0438 \u043e\u043d\u0438 \u0434\u0430\u043d\u043d\u044b\u043c \u0432 JSON. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0437\u0434\u0435\u0441\u044c \u0437\u0430\u0439\u0442\u0438 \u0432 \u0444\u0430\u0439\u043b JSON \u0438 \u0432 \u0440\u0443\u0447\u043d\u0443\u044e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<p><code>style-dictionary build<\/code><\/p>\n<blockquote>\n<p><em>\u042d\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u043d\u043e\u0441\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 JSON.<\/em>  <\/p>\n<\/blockquote>\n<h2>\u0428\u0430\u0433 5. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/h2>\n<p>\u0412\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0432\u0430\u0448\u0438\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0437\u0434\u0435\u0441\u044c.<\/p>\n<ul>\n<li>\n<p><strong>source<\/strong> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u0438\u0437 \u043a\u0430\u043a\u0438\u0445 \u043f\u0430\u043f\u043e\u043a \u0438 \u043a\u0430\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p><strong>platforms<\/strong> \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p><strong>scss (ios, android, css)<\/strong> \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u044d\u0442\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b;<\/p>\n<\/li>\n<li>\n<p><strong>transforms<\/strong> \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u043b\u0438\u0447\u0438\u043d \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p><strong>transformGroup<\/strong> \u2014 \u0432 \u043a\u0430\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p><strong>buildPath<\/strong> \u2014 \u043f\u0430\u043f\u043a\u0430, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b;<\/p>\n<\/li>\n<li>\n<p><strong>destinations<\/strong> \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>format<\/strong> \u2014 \u0444\u043e\u0440\u043c\u0430\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d JSON.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"json\">const StyleDictionary = require('style-dictionary').extend({   source: ['tokens\/**\/*.json'],   platforms: {     scss: {       transforms: [\"attribute\/cti\", \"name\/cti\/kebab\", \"color\/hex\", \"size\/rem\"],       transformGroup: 'scss',       buildPath: 'build\/',       files: [{         destination: 'variables.scss',         format: 'scss\/variables'       }]     }     \/\/ ...   } }); StyleDictionary.buildAllPlatforms();<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c \u0438 \u0433\u0438\u0431\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0438 \u043f\u0443\u0442\u0438. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a.<\/p>\n<p>\u0418\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u044d\u0442\u043e transforms. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 px \u0432 sp\/dp\/pt\/rem, \u0438\u0437 hex \u0432 rgb\/hsl, \u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 kebab-case \u0438 camelCase.<\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, \u0432\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u0430. \u041d\u0430\u043c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c JSON \u0444\u0430\u0439\u043b\u044b \u0432 \u043d\u0443\u0436\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<h2>\u0422\u043e\u043a\u0435\u043d\u044b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>\u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0442\u043e\u043a\u0435\u043d\u044b \u0445\u0440\u0430\u043d\u044f\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0446\u0432\u0435\u0442, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u0442\u0435\u043d\u0438 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>\u041d\u043e \u0442\u043e\u043a\u0435\u043d\u044b \u0438\u043c\u0435\u044e\u0442 \u0433\u0438\u0431\u043a\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e, \u0438 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u041a\u0440\u0438\u0441\u0442\u0438\u0430\u043d\u043e \u0420\u0430\u0441\u0442\u0435\u043b\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u043b <a href=\"https:\/\/habr.com\/ru\/company\/badoo\/blog\/491948\/\"><u>\u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0443 Cosmos \u0434\u043b\u044f Badoo<\/u><\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/76d\/e01\/7cd\/76de017cda1b92c940f367d7e67bc4e2.jpeg\" alt=\"\u0421\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043a\u043d\u043e\u043f\u043a\u0438 \/\/ \u041e\u043f\u044b\u0442 Badoo\" title=\"\u0421\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043a\u043d\u043e\u043f\u043a\u0438 \/\/ \u041e\u043f\u044b\u0442 Badoo\" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/76d\/e01\/7cd\/76de017cda1b92c940f367d7e67bc4e2.jpeg\" data-blurred=\"true\"\/><figcaption>\u0421\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043a\u043d\u043e\u043f\u043a\u0438 \/\/ \u041e\u043f\u044b\u0442 Badoo<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/467\/77e\/904\/46777e9045dbed95f7621ca692f1ee73.jpeg\" alt=\"\u0421\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 Action Sheet \/\/ \u041e\u043f\u044b\u0442 Badoo \" title=\"\u0421\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 Action Sheet \/\/ \u041e\u043f\u044b\u0442 Badoo \" width=\"1024\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/467\/77e\/904\/46777e9045dbed95f7621ca692f1ee73.jpeg\" data-blurred=\"true\"\/><figcaption>\u0421\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 Action Sheet \/\/ \u041e\u043f\u044b\u0442 Badoo <\/figcaption><\/figure>\n<p>\u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u043d\u043e \u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<blockquote>\n<p><em>\u041d\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u2014 \u0442\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0438\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c. \u0411\u0443\u0434\u044c\u0442\u0435 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u0435\u0435 \u0438 \u0440\u0430\u0437\u0443\u043c\u043d\u044b.<\/em><\/p>\n<p><em>\u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u043b\u0438 \u0442\u0430\u043a\u043e\u0435 \u0438\u043b\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u2014 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043c\u043d\u0435, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u043e\u043f\u044b\u0442\u043e\u043c.<\/em><\/p>\n<\/blockquote>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043e\u0432\u0435\u0442\u043e\u0432<\/h2>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u044f \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u044e \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0441\u0442\u0438\u043b\u0438, \u0440\u0435\u0434\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438, \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438 \u0432 \u0441\u0430\u043c\u043e\u0439 Figma, \u0430 \u043f\u0438\u0448\u0443 JSON \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>\u0414\u0435\u043b\u044e\u0441\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043e\u0432\u0435\u0442\u0430\u043c\u0438, \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0446\u0435\u043d\u043d\u044b.<\/p>\n<h2>\u0420\u0430\u0437\u043c\u0435\u0440\u044b<\/h2>\n<p>\u042f \u0432\u0438\u0434\u0435\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0439\u043c\u0438\u043d\u0433\u043e\u0432 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0435: \u0438 \u0432 \u0433\u0440\u0430\u0434\u0430\u0446\u0438\u0438 \u0441\u043e\u0442\u044b\u0445 \u0447\u0438\u0441\u0435\u043b, \u0438 \u0432 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u00ab\u043c\u0430\u0439\u043a\u0430\u0445\u00bb.<\/p>\n<pre><code>$size-100: 4px; $size-200: 8px; ... $size-s: 4px; $size-m: 8px;<\/code><\/pre>\n<p>\u041d\u043e \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0442\u0430\u043a\u043e\u0439 \u043d\u0435\u0439\u043c\u0438\u043d\u0433 \u043d\u0435\u0443\u0434\u043e\u0431\u0435\u043d \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u044f \u0438 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u043b\u043e\u0436\u0438\u043b \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u043d\u0435\u0434\u0435\u043b\u044e. \u0412\u0435\u0440\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u043a \u043d\u0435\u043c\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043d\u043e\u0432\u043e \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0435 \u0438 \u043a\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u0443\u0442. \u0415\u0449\u0451 \u0445\u0443\u0436\u0435, \u0435\u0441\u043b\u0438 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0440\u0438\u0448\u0435\u043b \u043d\u043e\u0432\u0435\u043d\u044c\u043a\u0438\u0439 \u0438 \u0437\u0430\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u2014 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f.<\/p>\n<p>\u042f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0443\u043c\u043d\u043e\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e, \u0430 \u0432 \u043d\u0435\u0439\u043c\u0438\u043d\u0433\u0435 \u0442\u0430\u043a \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043d\u0430 \u043a\u0430\u043a\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043c\u044b \u043c\u043d\u043e\u0436\u0438\u043c.<\/p>\n<pre><code>$size-base: 4px; $size-x1: $size-base; $size-x2: $size-base*2; ... $size-x10: $size-base*10;<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0433\u043e\u043b\u043e\u0432\u0435 \u0432\u0441\u044e \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443, \u0430 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0435\u0451 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 4px, \u0430 \u0433\u043b\u044f\u0434\u044f \u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 16px, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e $size-x4.<\/p>\n<p>\u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0448\u0430\u0433, \u0441\u043a\u0430\u0436\u0435\u043c \u043d\u0430 2px, \u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h2>\u0426\u0432\u0435\u0442<\/h2>\n<p>\u0426\u0432\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u0441\u0438\u043b\u0438\u0442\u0435\u043b\u0438 \u0446\u0432\u0435\u0442\u0430 \u0432 SCSS.<\/p>\n<p>\u0426\u0432\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0432 HEX, \u0437\u0430\u0431\u0438\u0432\u0430\u044f \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442, \u043e\u0441\u0432\u0435\u0442\u043b\u044f\u0442\u044c (lighten) \u0438\u043b\u0438 \u0437\u0430\u0442\u0435\u043c\u043d\u044f\u0442\u044c (darken) \u0435\u0433\u043e. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u2014 \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f. \u0412\u0430\u0436\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f 100%, \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<pre><code>$color-base: #ffcc00; $color-base-primary: $color-base; $color-base-hover: darken($color-base,10%); $color-base-active: lighten($color-base,10%);<\/code><\/pre>\n<p>\u0418\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0432 HSL, \u0432\u0437\u044f\u0432 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043e\u0442\u0442\u0435\u043d\u043e\u043a (<em>hue<\/em>), \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u0438\u0435 (<em>saturation<\/em>) \u0438 \u044f\u0440\u043a\u043e\u0441\u0442\u044c (<em>lightness<\/em>):<\/p>\n<pre><code>$color-accent: 72; $color-accent-default: hsla($color-accent, 100%, 36%, 1); $color-accent-hover: hsla($color-accent, 100%, 29%, 1); $color-accent-active: hsla($color-accent, 53%, 44%, 1);<\/code><\/pre>\n<p>\u00abA\u00bb \u2014 \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 hsla \u044d\u0442\u043e \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0441\u0430\u0439\u0442\u0438\u043a\u0438 \u0438 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0438 \u2014 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u0438\u0437\u0430\u0439\u043d \u0442\u043e\u043a\u0435\u043d\u044b.<\/p>\n<p>\u041d\u043e \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b, \u0435\u0441\u043b\u0438:<\/p>\n<ol>\n<li>\n<p>\u0412\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u044b, \u0438\u043c\u0435\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u0439 \u0432\u0438\u0434;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0442\u0435\u043c\u0435\u0437\u0430\u0446\u0438\u044e, \u0431\u0443\u0434\u044c \u2013 \u0442\u043e \u0441\u0432\u0435\u0442\u043b\u0430\u044f \u0438 \u0442\u0435\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e white label \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430.<\/p>\n<\/li>\n<\/ol>\n<blockquote>\n<p><em>\u041f\u043e\u0434\u0441\u0442\u0435\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0441\u043e\u043b\u043e\u043c\u043a\u0443 \u2014 \u043b\u0438\u0448\u043d\u0438\u043c \u0443\u0436 \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.<\/em><\/p>\n<\/blockquote>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u2014 \u043d\u0435 \u043f\u0430\u043d\u0430\u0446\u0435\u044f \u043e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0438 \u044f \u043d\u0435 \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u044e \u0432\u0430\u0441 \u0431\u0435\u0436\u0430\u0442\u044c \u0438 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u0438\u0445 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441, \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0434\u043e\u043b\u0433\u0438\u0439 \u0438 \u043f\u043e\u0440\u043e\u0439 \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0443\u0442\u044c.<\/p>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u044d\u0442\u043e \u0442\u043e\u0447\u043d\u043e \u0437\u0430\u043a\u0440\u043e\u0435\u0442 \u0432\u0430\u0448\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u0417\u0430\u0440\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0443\u0437\u043d\u0430\u0439\u0442\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u0433\u043e\u0442\u043e\u0432\u044b \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0432 Figma;<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0441 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\u0438, \u0447\u0442\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u043e\u0434\u0432\u0435\u0440\u0433\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043b\u043e\u0436\u0438\u0442\u0435 \u043f\u043e \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u044b\u043c \u0433\u0440\u0443\u043f\u043f\u0430\u043c \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0438\u0442\u0435 \u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f. \u0418 \u0437\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c\u0441\u044f \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435 \u0432\u0441\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 zeroheight \u0438\u043b\u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c, \u043a\u0430\u043a\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u043d\u0435\u043c\u0430\u043b\u043e\u0432\u0430\u0436\u043d\u044b\u0439 \u043f\u0443\u043d\u043a\u0442 \u2014 \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0439\u0442\u0435\u0441\u044c!<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b<\/h2>\n<h4>\u0412\u0438\u0434\u0435\u043e<\/h4>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=X3ciRPwzEMs&amp;feature=emb_imp_woyt\">\u0422\u043e\u043a\u0435\u043d\u044b \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \/ \u042e\u0440\u0438\u0439 \u0412\u0435\u0442\u0440\u043e\u0432 (Mail.Ru Group)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=uveDXPRLk9c&amp;feature=emb_imp_woyt\">Friends of Figma: Design Tokens<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Ka1I5TphDb0&amp;feature=emb_imp_woyt\">Design Tokens in Figma: How to get started, today. Jan Six \u2014 Live &amp; Q&amp;A- Into Design Systems<\/a><\/p>\n<\/li>\n<\/ul>\n<h4>\u0421\u0442\u0430\u0442\u044c\u0438<\/h4>\n<ul>\n<li>\n<p><a href=\"https:\/\/ux.pub\/editorial\/chto-takoie-dizain-tokienydavaitie-razbiratsia-vmiestie-4bhb\"><u>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/badoo\/blog\/491948\/\"><u>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435\u0435: \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0434\u0438\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 UI<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/nuances-of-programming\/%D0%BA%D0%B0%D0%BA-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B-%D0%B2-react-%D0%BE%D0%BF%D1%8B%D1%82-%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D1%8B-bit-a562ab141444\"><u>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 React \u2014 \u043e\u043f\u044b\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Bit<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/dev.to\/balaevarif\/design-844\"><u>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Design \u0442\u043e\u043a\u0435\u043d\u044b?<\/u><br \/><\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/usetech\/blog\/673196\/\"> https:\/\/habr.com\/ru\/company\/usetech\/blog\/673196\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<div class=\"persona\" persona=\"true\">\n<h5 class=\"persona__heading\" persona=\"true\">\u0415\u0432\u0433\u0435\u043d\u0438\u0439 \u0428\u0435\u0432\u0446\u043e\u0432<\/h5>\n<p>\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c UX-\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 Usetech<\/p>\n<\/div>\n<p>\u041d\u0430 \u043d\u0435\u0431\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440\u043e\u0432, \u0447\u0442\u043e \u043e \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445. \u041d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0437\u0434\u0435\u0441\u044c \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u043e\u043f\u044b\u0442\u0435.<\/p>\n<p>\u041f\u043e\u0432\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0433\u0430\u0439\u0434\u0430 \u0441\u0442\u0430\u043b\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0438 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 \u0433\u043e\u043b\u043e\u0432\u0435. \u041a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u044d\u0442\u043e\u0442 \u043f\u0443\u0442\u044c, \u0442\u043e \u0432 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u0431\u044b\u043b\u043e \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u043e \u043a\u0440\u0443\u043f\u0438\u0446\u0430\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438.<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0434\u0432\u043e\u0436\u0443 \u0438\u0442\u043e\u0433 \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u044b \u0438 \u0441\u0443\u043c\u043c\u0438\u0440\u0443\u044e \u0434\u043e\u0431\u044b\u0442\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0443\u043b\u044c\u0442\u0438\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0442\u0435\u043c\u0435. \u0425\u043e\u0442\u044f \u0431\u044b \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0438 \u043d\u0430\u0432\u043e\u0434\u043a\u0438, \u0432 \u043a\u0430\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043a\u043e\u043f\u0430\u0442\u044c \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0436\u0435 \u0436\u0430\u0436\u0434\u0443\u0449\u0438\u0445 \u0437\u043d\u0430\u043d\u0438\u0439.<\/p>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0416\u0435\u043d\u044f, \u044f \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c UX-\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 <a href=\"https:\/\/usetech.ru\/\"><u>Usetech<\/u><\/a>. \u041d\u0430 \u0434\u043e\u0441\u0443\u0433\u0435 \u0432\u0435\u0434\u0443 <a href=\"https:\/\/t.me\/uxrdesign\"><u>\u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u043a\u0430\u043d\u0430\u043b \u00ab\u041c\u0430\u043c\u043a\u0438\u043d \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u00bb<\/u><\/a>, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0445 \u0448\u0442\u0443\u043a\u0430\u0445.<\/p>\n<p>\u042f \u0441\u0430\u043c \u2014 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u043d\u043e \u043c\u043d\u0435 \u0432\u0430\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b, \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 JSON \u0438 \u043a\u0430\u043a \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<h2>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440<\/h2>\n<p>\u0414\u0440\u0443\u0437\u044c\u044f \u0438\u0437 frontend \u2013 \u044f \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438 \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0411\u0443\u0434\u0443 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0434, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043c\u043e\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0441\u0432\u043e\u0438\u043c\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438.<\/p>\n<blockquote>\n<p><em>\u042f \u043d\u0435 \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u044b \u0432\u0435\u0437\u0434\u0435 \u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0412\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u044b \u0438\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0430\u043c.<\/em>  <\/p>\n<\/blockquote>\n<h2>\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u044c\u044f<\/h2>\n<p><strong>\u0414\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432<\/strong>: \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e \u0442\u043e\u043a\u0435\u043d\u0430\u0445, \u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e\u0442 \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442\u00a0\u0441 \u043a\u043e\u0434\u043e\u043c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0438 \u0447\u0442\u043e \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p><strong>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/strong>: \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0448\u0430\u0440\u044f\u0442 \u0437\u0430 \u043a\u043e\u0434, \u043d\u043e \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u0438\u0441\u0442\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u0432\u0435\u043b\u0438 \u0442\u043e\u043a\u0435\u043d\u044b.<\/p>\n<p>\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434: \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u2013 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435, \u043d\u043e \u0438 \u043d\u0430 \u0431\u044d\u043a\u0435. \u042f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043b\u0438\u0448\u044c \u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0443 \u043d\u0430\u0441:<\/p>\n<ul>\n<li>\n<p>\u0434\u0432\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Figma;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 SCSS (Sass);<\/p>\n<\/li>\n<li>\n<p>\u0441\u0435\u0440\u0432\u0438\u0441 zeroheight;<\/p>\n<\/li>\n<li>\n<p>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Amazon Style Dictionary.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b?<\/h2>\n<p>\u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0440\u0435\u0431\u044f\u0442\u0430 \u0438\u0437 Salesforce: \u0414\u0436\u0438\u043d\u0430 \u0411\u043e\u043b\u0442\u043e\u043d \u0438 \u0414\u0436\u043e\u043d \u041b\u0435\u0432\u0438\u043d. \u041e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0438\u0445 \u0432 \u0441\u0432\u043e\u0435\u0439 <a href=\"https:\/\/www.lightningdesignsystem.com\/\"><u>\u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0435 Lightning<\/u><\/a> \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u043e \u043d\u0435\u0439 \u043d\u0430 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u044d\u0442\u0438 \u0440\u0435\u0431\u044f\u0442\u0430 \u0441\u0442\u0430\u043b\u0438 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u043b\u044e\u0434\u044c\u043c\u0438, \u043a\u0442\u043e \u043e \u043d\u0438\u0445 \u0437\u0430\u0433\u043e\u0432\u043e\u0440\u0438\u043b.  <\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62b528c6ea15664f98adaab4\" data-style=\"\" id=\"62b528c6ea15664f98adaab4\" width=\"\"><\/div>\n<p>\u041e\u043d\u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b\u0438 \u043e \u0441\u0432\u043e\u0435\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u043a\u0430\u043a \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442 \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u0440\u043e\u0441\u0441-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u044c. \u0414\u0430\u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 Theo, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 JSON\/XML \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n<p>\u041c\u0438\u0441\u0441\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u2014 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u043f\u043e\u043c\u043e\u0447\u044c \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0438 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043f\u0440\u0430\u0432\u043a\u0438. \u0410 \u0435\u0449\u0451 \u043e\u043d\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0445 \u043c\u0430\u0441\u0441\u043e\u0432\u043e\u0441\u0442\u044c \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c, \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u044d\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u044f\u0442 \u043d\u0430 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0435. \u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u2014 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430.<\/p>\n<blockquote>\n<p><em>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0435\u0441\u044c \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430\u043c\u0438 \u0438\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430\u043c\u0438, \u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 \u0443\u0436 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432\u0430\u043c \u043d\u0438 \u043a \u0447\u0435\u043c\u0443.<\/em>  <\/p>\n<\/blockquote>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043e\u0442 \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u043a \u0431\u043e\u043b\u044c\u0448\u0435\u043c\u0443, \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h2>\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/h2>\n<figure class=\"full-width\"><figcaption>\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \/\/ \u0411\u0440\u0435\u0434 \u0424\u0440\u043e\u0441\u0442<\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 <a href=\"https:\/\/medium.com\/%D0%B0%D1%82%D0%BE%D0%BC%D0%B0%D1%80%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD\/tagged\/%D0%B0%D1%82%D0%BE%D0%BC%D0%B0%D1%80%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-1\"><u>\u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0411\u0440\u0435\u0434\u0430 \u0424\u0440\u043e\u0441\u0442\u0430<\/u><\/a>, \u0442\u043e \u0441\u0430\u043c\u043e\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446\u0435\u0439 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0442\u043e\u043c, \u043d\u043e \u0443 \u044d\u0442\u0438\u0445 \u0430\u0442\u043e\u043c\u043e\u0432 \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430, \u0448\u0440\u0438\u0444\u0442, \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0442.\u0434.<\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0442\u0438\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0430 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0431\u043e\u043b\u044c\u044e \u0432\u043d\u0435\u0441\u0442\u0438 \u043f\u0440\u0430\u0432\u043a\u0438 \u0432\u043e \u0432\u0441\u0451\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041d\u0435\u0442, \u0432\u043e \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0440\u0430\u0437\u043e\u043c, \u0435\u0441\u043b\u0438 \u0438\u0445 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e.<\/p>\n<blockquote>\n<p><em>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0442\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0447\u0438\u043a\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438.<\/em>  <\/p>\n<\/blockquote>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0441\u0430\u043c\u044b\u043c\u0438 \u043c\u0435\u043b\u043a\u0438\u043c\u0438 \u0447\u0430\u0441\u0442\u0438\u0446\u0430\u043c\u0438 \u0432 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b.  <\/p>\n<figure class=\"full-width\"><figcaption>\u0410\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0441 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438<\/figcaption><\/figure>\n<h2>\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c?<\/h2>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0438\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 Figma, \u0438\u043d\u0430\u0447\u0435 \u0432\u0435\u043b\u0438\u043a \u0448\u0430\u043d\u0441 \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u0431\u0430\u0440\u0434\u0430\u043a.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u2014 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044f \u0432\u0438\u0436\u0443 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043c\u044b\u0441\u043b\u0443. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0444\u0438\u043e\u043b\u0435\u0442\u043e\u0432\u043e\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442. \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0441\u0442\u0438\u043b\u044c <strong>primary<\/strong> \u0438 \u043b\u0435\u043f\u0438\u0442 \u0435\u0433\u043e \u043d\u0430 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0444\u0438\u043e\u043b\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430.<\/p>\n<p>\u0415\u0449\u0451 \u044f \u0437\u0430\u043c\u0435\u0447\u0430\u044e, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u044b \u043f\u043e \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0435\u043b\u0451\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0432 hex <strong>#44BE84<\/strong> \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f <strong>green<\/strong>.<\/p>\n<figure class=\"full-width\"><figcaption>\u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/figcaption><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u0432\u0438\u0436\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 1.<\/strong> \u041a\u0430\u043a \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u044c\u043c\u0451\u0442\u0441\u044f \u0437\u0430 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u0438 \u0434\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d?<\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 2.<\/strong> \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \/ \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \/ \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442, \u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0433\u043e \u0438\u0437 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435 \u2014 \u043a\u0430\u043a \u0435\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u0446\u0432\u0435\u0442 \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442?<\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 3.<\/strong> \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0434\u0438\u043d <strong>primary<\/strong>-\u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e: \u043a\u043d\u043e\u043f\u043a\u0438, \u0444\u043e\u043d\u044b, \u0438\u043a\u043e\u043d\u043a\u0438. \u041a\u0430\u043a \u0431\u044b\u0442\u044c, \u0435\u0441\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c?<\/p>\n<p>\u0418 \u0442\u0443\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e: \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c <strong>primary<\/strong>, \u0447\u0442\u043e \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u044e \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u0440\u0430\u0437\u043b\u0438\u043d\u043a\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435. \u0418 \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0448\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0432 Figma, \u043d\u043e \u0438 \u043a\u043e\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u2014 \u043f\u0435\u0440\u0435\u043b\u0438\u043d\u043a\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438 \u0442\u0430\u043c.<\/p>\n<p>\u0425\u0443\u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e <strong>primary<\/strong>, \u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430: <strong>green<\/strong>, <strong>orange<\/strong>, <strong>red<\/strong>. \u0410 \u0435\u0449\u0435 \u0438\u043d\u043e\u0433\u0434\u0430 <strong>red-1<\/strong>, <strong>red-2<\/strong>, <strong>light-red<\/strong>. \u041a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435, \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u044c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c, \u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0432\u043b\u0435\u0447\u0435\u0442 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u044f <strong>green<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\u0445, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441 \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u043d\u0430 \u0441\u0438\u043d\u0438\u0439. \u0422\u043e\u0433\u0434\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f <strong>green<\/strong> \u0431\u0443\u0434\u0435\u0442, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e\u0442 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>\u0426\u0432\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0443\u043f\u043f. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 100% \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435, \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043e\u0442 \u0441\u0432\u043e\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0438 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430.<\/p>\n<ul>\n<li>\n<p><strong>\u0424\u043e\u043d\u044b.<\/strong> \u0417\u0434\u0435\u0441\u044c \u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e\u0431\u0449\u0438\u0439 \u0444\u043e\u043d, \u0444\u043e\u043d \u0434\u043b\u044f \u043f\u043e\u0434\u043b\u043e\u0436\u0435\u043a \u0438\u043b\u0438 \u043e\u0441\u0442\u0440\u043e\u0432\u043a\u043e\u0432, \u0444\u043e\u043d \u0434\u043b\u044f \u043f\u043e\u0434\u043b\u043e\u0436\u0435\u043a \u0443 \u043e\u0441\u0442\u0440\u043e\u0432\u043a\u043e\u0432 (\u0435\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f), \u0433\u0440\u0430\u043d\u0438\u0446\u044b (\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0438, \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043e\u0431\u0432\u043e\u0434\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432), \u0430\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0444\u043e\u043d, \u0444\u043e\u043d \u0434\u043b\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0422\u0435\u043a\u0441\u0442.<\/strong> \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u2014 \u0442\u0435\u043c\u043d\u044b\u0439 \u0434\u043b\u044f \u0431\u0435\u043b\u044b\u0445 \u0444\u043e\u043d\u043e\u0432, \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0434\u043b\u044f \u044f\u0440\u043a\u0438\u0445 \u0444\u043e\u043d\u043e\u0432. \u0415\u0441\u043b\u0438 \u043d\u0430\u0434\u043e, \u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0441\u0442\u0438\u043b\u0438 \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e, \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0435\u0439 \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0446\u0432\u0435\u0442 \u043f\u043e\u0434 \u0441\u0441\u044b\u043b\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u043a\u043e\u043d\u043a\u0438.<\/strong> \u0426\u0432\u0435\u0442 \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0438 \u0438\u043d\u0432\u0435\u0440\u0442\u043d\u044b\u0439, \u0435\u0441\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u044f\u0440\u043a\u0438\u0445 \u0444\u043e\u043d\u0430\u0445.<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043d\u043e\u043f\u043a\u0438.<\/strong> \u041a\u043d\u043e\u043f\u043a\u0438 \u044f \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e \u043d\u0430 \u043f\u043e\u0434\u0433\u0440\u0443\u043f\u043f\u044b \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e \u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0418\u043d\u043e\u0433\u0434\u0430 \u044f \u0437\u0430\u0448\u0438\u0432\u0430\u044e \u0432 \u0441\u0442\u0438\u043b\u044c \u0435\u0449\u0451 \u0438 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u0438\u0445 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0430\u0442\u0443\u0441\u044b.<\/strong> \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u2014 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0438\u0445.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u0421\u0442\u0438\u043b\u0438, \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443<\/figcaption><\/figure>\n<p>\u041d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0438\u0437 \u0441\u0442\u0438\u043b\u044f \u0432 \u0441\u0442\u0438\u043b\u044c. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438 \u0438 \u043d\u0435 \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.  <\/p>\n<h2>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/h2>\n<p>\u042d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0438 \u0442\u043e\u043a\u0435\u043d\u044b-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0422\u0430\u043a\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043b\u0435\u0433\u043a\u043e \u043b\u043e\u0436\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0438\u043b\u0438 \u0432 Figma.<\/p>\n<p><code>[Category]-[Type]-[Item]-[SubItem]-[State]<\/code><\/p>\n<ul>\n<li>\n<p><strong>Category<\/strong> \u2013 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 (color, font);<\/p>\n<\/li>\n<li>\n<p><strong>Type<\/strong> \u2013 \u0442\u0438\u043f \u0442\u043e\u043a\u0435\u043d\u0430 (text, background, border);<\/p>\n<\/li>\n<li>\n<p><strong>Item<\/strong> \u2013 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (button, table, input);<\/p>\n<\/li>\n<li>\n<p><strong>SubItem<\/strong> \u2013 \u0442\u0438\u043f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (primary, secondary);<\/p>\n<\/li>\n<li>\n<p><strong>State<\/strong> \u2013 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (default, hover, active).<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u0430, \u0438\u043d\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u043e\u0440\u043e\u0447\u0435. \u0412\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u0439 \u0438 \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<figure class=\"full-width\"><figcaption>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430<\/figcaption><\/figure>\n<h2>\u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/h2>\n<p>\u041d\u0430 \u0432\u0438\u0434\u0435\u043e \u043f\u0440\u0438\u043c\u0435\u0440: \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c, \u0430 \u043a\u0430\u043a\u0430\u044f \u0442\u0435\u043d\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443. \u0415\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 <strong>*-hover<\/strong>.<\/p>\n<p>\u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0438 \u043f\u0440\u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u0430, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62b52ab207a8cd4fd1f4b670\" data-style=\"\" id=\"62b52ab207a8cd4fd1f4b670\" width=\"\"><\/div>\n<h2>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d = \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f<\/h2>\n<p>\u0412 \u043c\u0438\u0440\u0435 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 (\u0434\u0430 \u0438 backend) \u0442\u043e\u043a\u0435\u043d\u044b \u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435 \u043d\u043e\u0432\u043e\u0435. \u041a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0432 \u043a\u043e\u0434\u0435 \u00ab\u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f\u00bb \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<blockquote>\n<p><em>\u0411\u0435\u0440\u044f \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043e\u043f\u044b\u0442 frontend \u2014 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d \u0438 \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0432 \u043a\u043e\u0434\u0435.<\/em>  <\/p>\n<\/blockquote>\n<p><strong>\u0426\u0432\u0435\u0442 \u0432 \u043a\u043e\u0434\u0435:<\/strong><\/p>\n<pre><code>.button { \u00a0\u00a0\u00a0background-color: #00BFFF; }<\/code><\/pre>\n<p><strong>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0446\u0432\u0435\u0442\u0430 \u0432 \u043a\u043e\u0434\u0435:<\/strong><\/p>\n<pre><code>$frost-sky: #00BFFF; .button { \u00a0\u00a0\u00a0background-color: $frost-sky; }<\/code><\/pre>\n<p><strong>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f:<\/strong><\/p>\n<pre><code>$color-button-primary-default: #00BFFF; .button { \u00a0\u00a0\u00a0background-color: $color-button-primary-default; }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0434\u0430\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u043d\u0435 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043d\u0438\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u043d\u043e \u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0432\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Figma, \u0433\u0434\u0435 \u0432\u044b \u0433\u0438\u0431\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u043d\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0435 \u043e\u0434\u043d\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430 \u0432\u0441\u0451.<\/p>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0443\u0433\u0430\u0434, \u0430 \u043d\u0435\u0441\u0451\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043c\u044b\u0441\u043b, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043e \u0447\u0451\u043c \u044d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438 \u0447\u0442\u043e \u043e\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442.<\/p>\n<h2>JSON<\/h2>\n<blockquote>\n<p><strong><em>JSON \u0438\u043b\u0438 JavaScript Object Notation<\/em><\/strong><em> \u2014 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 JavaScript. \u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/em><\/p>\n<\/blockquote>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 JSON-\u0444\u0430\u0439\u043b\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0445\u0438\u0442\u0440\u043e\u0433\u043e: \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b, \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c *.json \u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439.<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 (Figma, Adobe XD, Sketch), \u043b\u044e\u0431\u044b\u043c\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438 (zeroheigh, Specify) \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0440\u0443\u0447\u043a\u0430\u043c\u0438.<\/p>\n<figure class=\"full-width\"><figcaption>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d \u0442\u043e\u043a\u0435\u043d\u044b \u0432 JSON<\/figcaption><\/figure>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0444\u0430\u0439\u043b\u0430 JSON \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u0430-\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c. JSON \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0432\u0441\u0435\u0445 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0442\u0438\u043b\u0435\u0439 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f web \u0438 \u043e\u043d\u043e \u043e\u0434\u043d\u043e, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442. \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0438 \u043f\u0430\u0440\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e.<\/p>\n<p>\u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, iOS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 android-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435? \u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u043e \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u043f\u043e\u0434 \u043e\u0434\u043d\u0438\u043c \u0431\u0440\u0435\u043d\u0434\u043e\u043c?\u00a0<\/p>\n<p>\u0422\u0443\u0442 \u0438 \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-334915","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/334915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=334915"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/334915\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=334915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=334915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=334915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}