{"id":444463,"date":"2025-01-09T09:41:01","date_gmt":"2025-01-09T09:41:01","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=444463"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=444463","title":{"rendered":"<span>\u041a\u0430\u043a \u043c\u044b \u0443\u0447\u0438\u043b\u0438 \u043d\u0435\u043c\u043e\u043d\u043e\u0445\u0440\u043e\u043c\u043d\u044b\u0435 SVG-\u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u043a\u0440\u0430\u0441\u0438\u0442\u044c\u0441\u044f \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e<\/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<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440, \u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u00a0\u0422\u043e\u0447\u043a\u0435. \u041c\u043e\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u00ab\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432\u00bb aka UI\u2011\u043a\u0438\u0442\u0430. \u0412\u00a0\u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a\u00a0\u043c\u044b \u0440\u0435\u0448\u0430\u043b\u0438 \u0432\u043e\u043f\u0440\u043e\u0441 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043d\u043e\u0433\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 SVG \u0438\u0437\u00a0Figma \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u00a0\u043d\u0438\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f51\/108\/4e9\/f511084e95bf5bce59a2f9c689a241e1.png\" alt=\"\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0432 \u0447\u0430\u0442\u0430\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0422\u043e\u0447\u043a\u0438, \u043d\u043e \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c!\" title=\"\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0432 \u0447\u0430\u0442\u0430\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0422\u043e\u0447\u043a\u0438, \u043d\u043e \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c!\" width=\"1404\" height=\"760\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f51\/108\/4e9\/f511084e95bf5bce59a2f9c689a241e1.png\"\/><\/p>\n<div><figcaption>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0432 \u0447\u0430\u0442\u0430\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0422\u043e\u0447\u043a\u0438, \u043d\u043e \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c!<\/figcaption><\/div>\n<\/figure>\n<h2>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0435<\/h2>\n<p>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441\u00a0\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u043c\u044b \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u2011\u0441\u0438\u0441\u0442\u0435\u043c\u044b: \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0432\u00a0\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u2011\u0431\u0430\u043d\u043a\u0435. \u042d\u0442\u043e \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442\u00a0\u043c\u0435\u043b\u043a\u0438\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432, \u0446\u0432\u0435\u0442\u043e\u0432, \u0444\u043e\u043d\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u043d\u0430\u0448\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u2011\u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e\u00a0\u0431\u044b\u043b\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u0447\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0432\u00a0\u0441\u0432\u0435\u0442\u043b\u043e\u0439, \u0438 \u0432\u00a0\u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u0430\u0445.<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u043b\u0438 <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/15339657135383-Guide-to-variables-in-Figma\">\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Figma<\/a>. \u0421\u00a0\u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0434\u0432\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0445\u0435\u043c\u044b \u0434\u043b\u044f\u00a0\u0442\u0451\u043c\u043d\u043e\u0439 \u0438 \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0442\u0435\u043c\u044b. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Figma \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432\u00a0\u0441\u0442\u0438\u043b\u044f\u0445 \u0438\u043b\u0438\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0447\u0442\u043e\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0435\u043c.<\/p>\n<p>\u041a\u0430\u043a\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/--*\">CSS\u2011\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/a> \u0434\u043b\u044f\u00a0\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u2011\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b. \u042d\u0442\u043e \u043d\u0435\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0432\u00a0\u043d\u0430\u0448\u0443 \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443, \u043d\u043e\u00a0\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u043e \u0435\u0451 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0439 \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0442\u0435\u043c.<\/p>\n<p>\u041d\u043e\u00a0\u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0438 \u0441\u00a0\u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439: \u043d\u0430\u0448\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b, \u0432\u00a0\u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442\u00a0\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0435\u00a0\u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b. \u041a\u0430\u043a\u00a0\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0432\u0441\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0438\u0437\u00a0Figma \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0437\u0430\u0448\u0438\u0442\u044b\u0435 hex\u2011\u0446\u0432\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435\u00a0\u0431\u044b\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u044b \u043d\u0430\u00a0\u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0442\u0435\u043c\u044b.<\/p>\n<h2>\u0421\u0442\u0430\u0440\u044b\u0439 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0443 \u0438\u0437\u0434\u0430\u043b\u0435\u043a\u0430 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e\u00a0\u0442\u043e\u043c, \u043a\u0430\u043a\u00a0\u0443\u00a0\u043d\u0430\u0441\u00a0\u0431\u044b\u043b\u0430 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e\u00a0\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0441\u00a0\u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u043e\u0439. <\/p>\n<p>\u0423\u00a0\u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0432\u00a0Figma, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0438\u043b\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/5a5\/73b\/ab1\/5a573bab137d210d7b807fedf5943e2a.jpeg\" width=\"2978\" height=\"2318\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5a5\/73b\/ab1\/5a573bab137d210d7b807fedf5943e2a.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0441\u00a0\u043a\u043e\u0434\u043e\u043c, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0435\u0440\u0443\u0442 \u043d\u0430\u00a0\u0441\u0435\u0431\u044f \u0432\u0441\u044e \u0440\u0443\u0442\u0438\u043d\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443. \u041e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0440\u0435\u043b\u0438\u0437\u2011\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c UI\u2011\u043a\u0438\u0442\u0430.<\/p>\n<p><strong>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0448\u0430\u044e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442\u044b:<\/strong><\/p>\n<ol>\n<li>\n<p>\u0412\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0441\u0435\u0445 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0438\u0437\u00a0Figma \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/www.figma.com\/developers\/api#get-file-components-endpoint\">REST API<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0432\u00a0\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 SVG\u2011\u0444\u0430\u0439\u043b\u044b.<\/p>\n<\/li>\n<li>\n<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f React\u2011\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0433\u043e SVG\u2011\u0444\u0430\u0439\u043b\u0430.<\/p>\n<\/li>\n<\/ol>\n<h2>\u041f\u0435\u0440\u0432\u044b\u0435 \u043f\u043e\u043f\u044b\u0442\u043a\u0438<\/h2>\n<p>\u041f\u043e \u043d\u0430\u0432\u043e\u0434\u043a\u0435 \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432, \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 Figma-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0412 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0431\u044b\u043b\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0433\u043e\u00a0<a href=\"https:\/\/www.figma.com\/developers\/api#variables\">REST API<\/a>, \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u043e\u0435 API \u0438 \u0432\u0441\u0451 \u0432\u0437\u043b\u0435\u0442\u0438\u0442 \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043a \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u043a \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u0435:<\/p>\n<ol>\n<li>\n<p><strong>\u041d\u0430\u0434\u0435\u0436\u0434\u0430 \u043d\u0430 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 Figma<\/strong>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u0448\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0431\u044b\u043b\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a Figma-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u0430 \u043d\u0430\u0434\u0435\u0436\u0434\u0430, \u0447\u0442\u043e \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0432 SVG \u0447\u0435\u0440\u0435\u0437 REST API \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0446\u0432\u0435\u0442\u043e\u0432 \u043d\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0431\u044b \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0442\u0435\u043c\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 Figma.<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430\u00a0<\/strong><code>currentColor<\/code>. \u0412\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value#currentcolor_keyword\">\u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435<\/a>\u00a0\u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0446\u0432\u0435\u0442 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u044b, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432<\/strong>. \u042d\u0442\u043e \u0431\u044b\u043b \u0441\u0430\u043c\u044b\u0439 \u043f\u043b\u043e\u0445\u043e\u0439 \u0434\u043b\u044f \u043d\u0430\u0441 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u2014 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0442\u0435\u043c\u044b, \u0432\u0442\u043e\u0440\u043e\u0439 \u0434\u043b\u044f \u0442\u0451\u043c\u043d\u043e\u0439 \u2014\u00a0\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u044b. \u0415\u0433\u043e \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u043a\u0430\u043a \u043f\u043b\u0430\u043d \u0411 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0441\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438 \u0441\u0432\u043e\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f:<\/p>\n<ol>\n<li>\n<p><strong>\u041f\u043e\u0434\u0445\u043e\u0434 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 Figma<\/strong>\u00a0\u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0438\u0437-\u0437\u0430\u00a0<a href=\"https:\/\/forum.figma.com\/t\/svg-export-add-feature-to-export-local-variable-names-into-svg-code-with-static-color-fallback\/57708\">\u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0441\u0430\u043c\u043e\u0439 Figma<\/a>. \u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 SVG: \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0446\u0432\u0435\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0436\u0451\u0441\u0442\u043a\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 HEX-\u043a\u043e\u0434\u044b \u0446\u0432\u0435\u0442\u043e\u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0410 REST API \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0438\u0431\u043e \u0432\u044b\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0441\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430, \u043b\u0438\u0431\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u00a0<\/strong><code>currentColor<\/code>\u00a0\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043c\u043e\u043d\u043e\u0445\u0440\u043e\u043c\u043d\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a, \u0430 \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0438\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043b\u0430 \u0438\u0437 \u0431\u043e\u043b\u0435\u0435, \u0447\u0435\u043c \u0434\u0432\u0443\u0445 \u0446\u0432\u0435\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0445\u043e\u0434\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u0448\u0438\u043b\u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u0448\u0438\u0442\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445 SVG (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<code>fill<\/code>\u00a0\u0438\u043b\u0438\u00a0<code>stroke<\/code>), \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<p><strong>\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0ef\/ba1\/a48\/0efba1a48ef67a0435036501280acaff.png\" alt=\"\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\" title=\"\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\" width=\"2772\" height=\"1756\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0ef\/ba1\/a48\/0efba1a48ef67a0435036501280acaff.png\"\/><\/figure>\n<p><strong>\u041b\u043e\u0433\u043e\u0442\u0438\u043f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043c\u0435\u043d\u044b:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cf2\/42b\/944\/cf242b944c3f2c3be0fff57bbf71d612.png\" width=\"2772\" height=\"1832\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cf2\/42b\/944\/cf242b944c3f2c3be0fff57bbf71d612.png\"\/><\/figure>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u2014 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043c\u0435\u043d\u0443 \u0442\u0435\u043c, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044f\u0441\u044c \u043f\u043e\u0434 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0438\u0437 Figma \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u043d\u0435 HEX-\u0446\u0432\u0435\u0442\u0430, \u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 UI-\u043a\u0438\u0442\u0430.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/012\/dda\/cc6\/012ddacc6ec1d202323c3c73f42e081e.gif\" width=\"284\" height=\"182\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/012\/dda\/cc6\/012ddacc6ec1d202323c3c73f42e081e.gif\"\/><\/figure>\n<h2>\u0421 \u0447\u0435\u043c \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435<\/h2>\n<p>\u0412 \u0445\u043e\u0434\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f \u043a REST API \u043e\u0442 Figma-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445\u00a0<a href=\"https:\/\/www.figma.com\/pricing\/#features\">\u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0442\u0430\u0440\u0438\u0444\u0430\u0445 \u0443\u0440\u043e\u0432\u043d\u044f Enterprise<\/a>. \u0410 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u0431\u043e\u043b\u0435\u0435 \u0441\u043a\u0440\u043e\u043c\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444\u043d\u044b\u0439 \u043f\u043b\u0430\u043d \u0431\u0435\u0437 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a API.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/86c\/4f1\/547\/86c4f1547bbf324d176b1ac9a17894a9.png\" alt=\"\u0422\u0430\u0440\u0438\u0444\u043d\u044b\u0435 \u043f\u043b\u0430\u043d\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a REST API\" title=\"\u0422\u0430\u0440\u0438\u0444\u043d\u044b\u0435 \u043f\u043b\u0430\u043d\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a REST API\" width=\"2662\" height=\"412\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/86c\/4f1\/547\/86c4f1547bbf324d176b1ac9a17894a9.png\"\/><\/p>\n<div><figcaption>\u0422\u0430\u0440\u0438\u0444\u043d\u044b\u0435 \u043f\u043b\u0430\u043d\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a REST API<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u043d\u0443\u0434\u0438\u043b\u0438 \u043d\u0430\u0441 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/\">Plugin API Figma<\/a>. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f REST API \u043d\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u043b\u0438\u0441\u044c \u043d\u0430 Plugin API, \u0447\u0442\u043e \u0434\u0430\u043b\u043e \u043d\u0430\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u043e\u0442\u043a\u0440\u044b\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Plugin API \u0441\u0442\u0430\u043b\u043e \u0442\u043e, \u0447\u0442\u043e \u0443 \u043c\u044b \u0443\u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0440\u0435\u0432\u044c\u044e \u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432. \u0422\u0430\u043a \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0431\u044b\u043b \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API, \u0438 \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 0: \u043f\u043e\u0438\u0441\u043a \u0432\u0441\u0435\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435<\/h4>\n<p>\u0423 Figma \u0435\u0441\u0442\u044c \u0448\u0438\u0440\u043e\u043a\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0441\u044c \u043a\u0430\u043a\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/api\/ComponentNode\/\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a>\u00a0Figma, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043f\u043e\u0434\u043e\u0448\u0435\u043b \u043c\u0435\u0442\u043e\u0434\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/api\/properties\/nodes-findallwithcriteria\/\">findAllWithCriteria<\/a> \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432).<\/p>\n<pre><code class=\"javascript\">const logos = figma.currentPage.findAllWithCriteria({ types: [\"COMPONENT\"] });<\/code><\/pre>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 1: \u042d\u043a\u0441\u043f\u043e\u0440\u0442 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0432 SVG<\/h4>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u0441 \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Plugin API \u0434\u043b\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0438\u0437 Figma \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 SVG. \u042d\u0442\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438\u00a0<code>exportAsync<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 (<code>JPG<\/code>,\u00a0<code>PNG<\/code>,\u00a0<code>SVG<\/code>,\u00a0<code>PDF<\/code>) \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0431\u044b \u043c\u044b \u043d\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b\u00a0<code>exportAsync<\/code>, \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 SVG-\u0444\u0430\u0439\u043b\u044b \u0432\u0441\u0451 \u0442\u0430\u043a \u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0436\u0451\u0441\u0442\u043a\u043e \u0437\u0430\u0448\u0438\u0442\u044b\u0435 HEX-\u0446\u0432\u0435\u0442\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u0435\u043c\u044b.<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 2: \u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 Figma \u0438 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439<\/h4>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0436\u0451\u0441\u0442\u043a\u043e \u0437\u0430\u0448\u0438\u0442\u044b\u0435 HEX-\u0446\u0432\u0435\u0442\u0430 \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 UI-\u043a\u0438\u0442\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 SVG \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 Figma. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u00a0<code>svgIdAttribute<\/code>\u00a0\u0444\u0443\u043d\u043a\u0446\u0438\u0438\u00a0<code>exportAsync<\/code>. \u041f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043e\u043d \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 ID \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 SVG-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.<\/p>\n<pre><code class=\"javascript\">const logo = ...;  const svg = logo.exportAsync({    format: \"SVG_STRING\",    svgIdAttribute: true  })<\/code><\/pre>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 Figma:<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/085\/5f8\/51a\/0855f851a13997833b9e04548f51fb13.png\" alt=\"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 Figma\" title=\"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 Figma\" width=\"632\" height=\"320\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/085\/5f8\/51a\/0855f851a13997833b9e04548f51fb13.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 Figma<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b\u00a0exportAsync\u00a0\u043d\u0430 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0435 \u0432\u044b\u0448\u0435:<\/h3>\n<ul>\n<li>\n<p><strong>\u0411\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u00a0<\/strong><code>svgIdAttribute<\/code>: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2a2\/894\/6d2\/2a28946d2038042bcddf474f7706249a.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b exportAsync \u0431\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 svgIdAttribute\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b exportAsync \u0431\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 svgIdAttribute\" width=\"3672\" height=\"2904\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2a2\/894\/6d2\/2a28946d2038042bcddf474f7706249a.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b exportAsync \u0431\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 svgIdAttribute<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<li>\n<p><strong>\u0421 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c\u00a0<\/strong><code>svgIdAttribute<\/code>: \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0439 ID, \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0439 \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 Figma.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/559\/9c1\/ad2\/5599c1ad232d43299c11fddc4b84a3c0.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b exportAsync \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c svgIdAttribute\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b exportAsync \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c svgIdAttribute\" width=\"3672\" height=\"2904\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/559\/9c1\/ad2\/5599c1ad232d43299c11fddc4b84a3c0.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b exportAsync \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c svgIdAttribute<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<\/ul>\n<p>\u0421 \u043d\u0430\u043b\u0438\u0447\u0438\u0435\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 ID \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u043e\u0438 \u0432 Figma \u0441 \u0438\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u0430\u043c\u0438 \u0432 SVG. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0438\u0445 \u0437\u0430\u043c\u0435\u043d\u044b \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 SVG-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 3: \u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432 \u0432 Figma<\/h4>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0431\u044b\u043b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u00a0<code>exportAsync<\/code>\u00a0\u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c\u00a0<code>svgIdAttribute<\/code>\u00a0\u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d43\/187\/74c\/d4318774c79ccdb8ad33eca71d51a000.png\" alt=\"\u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\" title=\"\u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\" width=\"644\" height=\"614\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d43\/187\/74c\/d4318774c79ccdb8ad33eca71d51a000.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u0423 \u0447\u0430\u0441\u0442\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f, \u0438 \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u043e \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 Figma. \u041d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u0432 SVG-\u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0441\u043e\u0431\u044b\u043c\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438 \u0431\u044b\u043b\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u043a\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438. \u0422\u043e\u0433\u0434\u0430 \u0432 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 ID \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u0441\u00a0sequential-\u043d\u0435\u0439\u043c\u0438\u043d\u0433\u043e\u043c, \u0442.\u0435. \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 Figma ID \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a:\u00a0<code>Vector_1<\/code>\u00a0\u0438\u00a0<code>Vector_2<\/code>,\u00a0<code>Ellipse_1<\/code>\u00a0\u0438\u00a0<code>Ellipse_2<\/code>.<\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0442\u0430\u043b\u043e \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u0435\u0432\u0435\u043d\u0442\u0438\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0445 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e\u00a0sequential-\u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u042d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043b\u043e \u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u043c\u0451\u043d \u043c\u0435\u0436\u0434\u0443 Figma \u0438 SVG, \u0438 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u043b\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<pre><code class=\"javascript\">function uniqueifyChildrenNames(node: ComponentNode) {   const sequences = {};    const stack: SceneNode[] = [node];   const visited = new Set();    while (stack.length &gt; 0) {     const vertex = stack.pop()!;      const name = vertex.name;      if (!visited.has(vertex)) {       if (!sequences[name]) {         sequences[name] = 1;       } else {         sequences[name]++;         vertex.name = `${vertex.name}_${sequences[name]}`;       }        visited.add(vertex);        if (\"children\" in vertex) {         for (const child of vertex.children) {           stack.push(child);         }       }     }   }    return node; }<\/code><\/pre>\n<h3>\u0423\u0447\u0438\u043c\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c HEX-\u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u0442\u043e\u043a\u0435\u043d\u044b \u0438\u0437 UI-\u043a\u0438\u0442\u0430<\/h3>\n<h4>\u0428\u0430\u0433 1: \u0418\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u0430 \u043b\u0438 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f, \u0432 Figma \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/api\/node-properties\/#boundvariables\">boundVariables<\/a>. \u041e\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0430\u0441\u044c \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435\u00a0<code>boundVariables<\/code>\u00a0\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0445\u043e\u0442\u044c \u0441 \u043e\u0434\u043d\u0438\u043c \u043a\u043b\u044e\u0447\u043e\u043c \u2014 \u0437\u043d\u0430\u0447\u0438\u0442, \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/**  * \u041c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435  * \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043a \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0432 \u043c\u0435\u0442\u043e\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443  *\/ function getBoundedVariables(node: SceneNode) {   const res: Variable[] = [];    if (\"boundVariables\" in node) {     const keys = Object.keys(       node.boundVariables,     ) as unknown as (keyof typeof node.boundVariables)[];      for (const key of keys) {       if (key === \"componentProperties\") {         continue;       }        const value = node.boundVariables[key];        if (typeof value === \"undefined\") {         continue;       }        if (Array.isArray(value)) {         res.push(...value);       } else {         res.push(value);       }     }   }    return res; }<\/code><\/pre>\n<h4>\u0428\u0430\u0433 2: \u0424\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u0446\u0432\u0435\u0442\u043e\u0432 \u043a \u0442\u043e\u043a\u0435\u043d\u0430\u043c \u0438\u0437 UI-\u043a\u0438\u0442\u0430<\/h4>\n<p>\u0414\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u0438\u0437 \u0432\u0430\u0448\u0435\u0433\u043e UI-\u043a\u0438\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 Figma \u0438\u043c\u0435\u044e\u0442 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u0445\u043e\u0434\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0430 \u0432 \u0433\u043b\u0443\u0431\u0438\u043d\u0443 (<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA_%D0%B2_%D0%B3%D0%BB%D1%83%D0%B1%D0%B8%D0%BD%D1%83\">DFS<\/a>).<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043a\u0430\u0440\u0442\u0435, \u0433\u0434\u0435:<\/p>\n<ul>\n<li>\n<p>\u041a\u043b\u044e\u0447\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 ID \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u2014 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 HEX-\u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 UI-\u043a\u0438\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0449\u0443\u044e, \u043a\u0430\u043a\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0435.<\/p>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. <\/strong>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0435 \u0432\u0441\u0435 Figma-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442 \u0446\u0432\u0435\u0442\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u00a0<code>isColorConfig<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u043c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 RGB \u0438\u043b\u0438 RGBA.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043c\u0435\u043d\u0438 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.<\/strong>\u00a0\u0424\u0443\u043d\u043a\u0446\u0438\u044f\u00a0<code>resolveDesignTokenName<\/code>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438\u0437 Figma \u0432 \u0438\u043c\u044f CSS-\u0442\u043e\u043a\u0435\u043d\u0430. <\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0446\u0432\u0435\u0442\u0430.<\/strong>\u00a0HEX-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432 Figma \u0445\u0440\u0430\u043d\u0438\u0442 \u043d\u0435 \u0432 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 (0, 255), \u0430 \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 (0, 1).<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439<\/strong>. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438: \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u2014\u00a0<strong>\u0431\u0430\u0437\u043e\u0432\u044b\u0435<\/strong>\u00a0(\u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f) \u0438\u00a0<strong>\u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435<\/strong>\u00a0(\u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0442\u0435\u043c\u044b). \u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u0430\u043a \u0430\u043b\u0438\u0430\u0441: \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0442\u0435\u043c\u044b. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u0432 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0439 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0430 \u0433\u0434\u0435-\u0442\u043e \u0433\u043b\u0443\u0431\u0436\u0435 \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0432 Figma \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043c\u0435\u0442\u043e\u0434\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/api\/properties\/Variable-resolveforconsumer\/\">resolveForConsumer<\/a>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u0435\u0434\u0435\u0442 \u0430\u043b\u0438\u0430\u0441 \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0446\u0432\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0442\u0435\u043c\u0435.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">const namesRGB = [\"r\", \"g\", \"b\"];  \/**  * Figma \u0445\u0440\u0430\u043d\u0438\u0442 hex \u0446\u0432\u0435\u0442\u0430 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0441 \u043a\u043b\u044e\u0447\u0430\u043c\u0438  * r,g,b (\u0430) \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 (0, 1)  * \u041c\u0435\u0442\u043e\u0434 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043e \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 (0, 255)  *\/ function figmaRGBToWebRGB(color: RGBA): webRGBA; function figmaRGBToWebRGB(color: RGB): webRGB; function figmaRGBToWebRGB(color: any): webRGB | webRGBA {   const rgb: number[] = [];    namesRGB.forEach((e, i) =&gt; {     rgb[i] = Math.round(color[e] * 255);   });    if (color[\"a\"] !== undefined) rgb[3] = Math.round(color[\"a\"] * 100) \/ 100;    return rgb; }  \/**  * \u041c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 hex \u043a\u043e\u0434 \u0438\u0437 tuple  * \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u0446\u0432\u0435\u0442  *\/ export function figmaRGBToHex(color: RGB | RGBA): string {   let hex = \"#\";    const rgb = figmaRGBToWebRGB(color) as webRGB | webRGBA;   hex += ((1 &lt;&lt; 24) + (rgb[0] &lt;&lt; 16) + (rgb[1] &lt;&lt; 8) + rgb[2])     .toString(16)     .slice(1);    if (rgb[3] !== undefined) {     const a = Math.round(rgb[3] * 255).toString(16);     if (a.length == 1) {       hex += \"0\" + a;     } else {       if (a !== \"ff\") hex += a;     }   }    return hex.toUpperCase(); }  \/**  * \u041d\u0435 \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442 HEX - \u0446\u0432\u0435\u0442\u0430, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0445\u0440\u0430\u043d\u0438\u043c\u043e\u0435  * \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 - \u044d\u0442\u043e \u0446\u0432\u0435\u0442  *\/ function isColorConfig(v: VariableValue): v is RGB | RGBA {   if (typeof v !== \"object\") {     return false;   }    const keys = Object.keys(v);    \/\/ \u043b\u0438\u0431\u043e 3 \u043a\u043b\u044e\u0447\u0430 - rgb   \/\/ \u043b\u0438\u0431\u043e 4 \u043a\u043b\u044e\u0447\u0430 - rgba   return (     [3, 4].includes(keys.length) &amp;&amp; [\"r\", \"g\", \"b\"].every((key) =&gt; key in v)   ); }  \/**  * \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435  * CSS - \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0441\u0438\u0441\u0442\u0435\u043c\u044b  *\/ function resolveDesignTokenName(variable: Variable) {   \/**    * \u0442\u0443\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0430\u0448\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438\u0437 Figma    *\/   return variable.name; }   function createLogoColorMap(logo: ComponentNode) {     const colors: Record&lt;string, Record&lt;string, string&gt;&gt; = {};    const stack: SceneNode[] = [logo];   const visited = new Set();    while (stack.length &gt; 0) {     const vertex = stack.pop()!;      \/**      * \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 Figma      *      * \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0443\u0435\u0434\u0435\u0442 \u0432 id \u0430\u0442\u0440\u0438\u0431\u0443\u0442 HTML \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438      *\/     const name = vertex.name;  \/**  * \u041d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0432 \u043a\u0430\u0440\u0442\u0435 - \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442  *\/     if (!colors[name]) {       colors[name] = {};     }      if (!visited.has(vertex)) {       \/**        * 1. \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u0430\u043f        *        * \u0418\u0449\u0435\u043c \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 (vertex) \u0446\u0432\u0435\u0442\u0430-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435        *\/       const bounded = getBoundedVariables(vertex);    \/\/ \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (vertex) \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432       if (bounded.length &gt; 0) {         for (const variable of bounded) {           \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f           const resolvedConfig = variable.resolveForConsumer(logo);            const value = resolvedConfig.value;    \/\/ \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442\u0430, \u043d\u043e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0445\u0440\u0430\u043d\u0438\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0446\u0432\u0435\u0442           if (!isColorConfig(value)) {             continue;           }            const hex = figmaRGBToHex(value);            if (!colors[name][hex]) {             const designToken = resolveDesignTokenName(variable);              colors[name][hex] = designToken;           }         }       }        visited.add(vertex);        if (isChildrenExists(vertex)) {         for (const neighbor of vertex.children) {           stack.push(neighbor);         }       }     }   }    return colors; }<\/code><\/pre>\n<h4>\u0424\u0438\u043d\u0430\u043b: \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u0430\u0448\u0438\u0442\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 UI-\u043a\u0438\u0442\u0430<\/h4>\n<p>\u0418\u043c\u0435\u044f \u043d\u0430 \u0440\u0443\u043a\u0430\u0445 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0437\u0430\u043c\u0435\u043d\u0435 \u0437\u0430\u0448\u0438\u0442\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u00a0<strong>SVGO<\/strong>\u00a0\u0441 \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c. \u042d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 SVG.<\/p>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430:<\/p>\n<ol>\n<li>\n<p><strong>\u041f\u043e\u0438\u0441\u043a \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. <\/strong>\u041f\u043b\u0430\u0433\u0438\u043d \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c SVG, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u00a0<code>fill<\/code>,\u00a0<code>stroke<\/code>,\u00a0<code>color<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432.<\/strong>\u00a0\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438\u00a0<code>useParentNodeTracker<\/code>\u00a0\u043f\u043b\u0430\u0433\u0438\u043d \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0437\u043b\u0430. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u043e \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043a\u0435\u0439\u0441\u044b, \u0433\u0434\u0435 \u0446\u0432\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0434\u0430, \u0443 Figma \u043f\u0440\u0438 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0435 \u0434\u0430\u0436\u0435 \u0442\u0430\u043a\u043e\u0435 \u0435\u0441\u0442\u044c).<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u043c\u0435\u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/strong>\u00a0\u0415\u0441\u043b\u0438 \u043d\u0430\u0439\u0434\u0435\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0435\u0441\u0442\u044c \u0432 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u043e\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e fallback-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">import { PluginConfig } from \"svgo\"; import { optimize } from \"svgo\/dist\/svgo.browser\"; import { XastChild, XastRoot } from \"svgo\/lib\/types\";  const MISSING_COLOR_VALUES = [\"none\"];  \/\/ svg-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 const SVG_ATTRIBUTES_WITH_POSSIBLE_COLOR_VALUES = [   \"color\",   \"fill\",   \"stroke\",   \"stop-color\",   \"flood-color\",   \"lighting-color\", ];  type PluginOptions = {   colors: Record&lt;string, Record&lt;string, string&gt;&gt;; };  function useParentNodeTracker(root: XastRoot) {   const visited = new Set();   const parents = new Map&lt;XastChild, XastChild | undefined&gt;();    const stack: XastChild[] = root.children.slice();    \/**    * \u0421\u0430\u043c\u044b\u0435 \u0432\u0435\u0440\u0445\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439    * \u0414\u043e\u0431\u044c\u0435\u043c \u0440\u0443\u043a\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a \u0434\u0430\u043b\u044c\u0448\u0435 \u0432 \u043a\u043e\u0434\u0435    *\/   stack.forEach((element) =&gt; parents.set(element, undefined));    while (stack.length &gt; 0) {     const vertex = stack.pop()!;      if (!visited.has(vertex)) {       if (\"children\" in vertex &amp;&amp; vertex.children.length &gt; 0) {         for (const child of vertex.children) {           parents.set(child, vertex);            stack.push(child);         }       }     }      visited.add(vertex);   }    return { getParent: (node: XastChild) =&gt; parents.get(node) }; }  export const createReplaceColorValuesWithCssVariablesPlugin = (   options: PluginOptions, ): PluginConfig =&gt; {   const { colors } = options;    return {     name: \"replaceColorValuesWithCssVariables\",     fn: (root) =&gt; {       const tracker = useParentNodeTracker(root);        return {         element: {           enter: (node) =&gt; {             const availableAttributes =               SVG_ATTRIBUTES_WITH_POSSIBLE_COLOR_VALUES.filter((attr) =&gt; {                 const value = node.attributes[attr];                  return (                   \/\/ \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c                   value != null &amp;&amp;                   \/\/ \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u041d\u0415 \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u043c                   !MISSING_COLOR_VALUES.includes(value) &amp;&amp;                   \/\/ \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u0447\u0442\u043e \u043b\u0438\u0431\u043e url(#...)                   !\/url\\(#\\w+\\)\/.test(value)                 );               });              \/**              * \u0415\u0441\u043b\u0438 \u043d\u0430 \u043d\u043e\u0434\u0435 \u043d\u0435\u0442\u0443 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435              *\/             if (availableAttributes.length === 0) {               return;             }              availableAttributes.forEach((attr) =&gt; {               const value = node.attributes[attr];                let iter: XastChild | undefined = node;                while (iter != null) {                 if (iter.type === \"element\") {                   const id = iter.attributes[\"id\"];                    if (colors[id]?.[value] != null) {                     node.attributes[attr] =                       `var(--${colors[id][value]}, ${value})`;                      break;                   }                 }                  iter = tracker.getParent(iter);               }             });           },         },       };     },   }; };  const logos = figma.currentPage.findAllWithCriteria({ types: [\"COMPONENT\"] }); const colors = logos.map(logo =&gt; createLogoColorMap(logo)); const plugin = createReplaceColorValuesWithCssVariablesPlugin({ colors });  \/**  * \u0442\u0443\u0442 \u0431\u0443\u0434\u0443\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u0432\u0430\u0448\u0438 svg \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u043c\u0438  * \u043d\u0430 CSS - \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  *\/ const data = svgs.map((logo) =&gt; optimize(logo, { plugins: [plugin] }));<\/code><\/pre>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0442\u0435\u043c\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0431\u0430\u043d\u043a\u0430 \u0446\u0432\u0435\u0442\u0430 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u044b. \u0422\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0434\u043b\u044f \u043d\u0430\u0441 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u041f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u0435\u043c\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438. \u041c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043c \u0435\u0449\u0451 \u0435\u0441\u0442\u044c, \u043a\u0443\u0434\u0430 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f. \u041d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0435\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u0435\u0449\u0451 \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0443\u0447\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/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\/articles\/865078\/\"> https:\/\/habr.com\/ru\/articles\/865078\/<\/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<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440, \u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u00a0\u0422\u043e\u0447\u043a\u0435. \u041c\u043e\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u00ab\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432\u00bb aka UI\u2011\u043a\u0438\u0442\u0430. \u0412\u00a0\u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a\u00a0\u043c\u044b \u0440\u0435\u0448\u0430\u043b\u0438 \u0432\u043e\u043f\u0440\u043e\u0441 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043d\u043e\u0433\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 SVG \u0438\u0437\u00a0Figma \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u00a0\u043d\u0438\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0432 \u0447\u0430\u0442\u0430\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0422\u043e\u0447\u043a\u0438, \u043d\u043e \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c!<\/figcaption><\/div>\n<\/figure>\n<h2>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0435<\/h2>\n<p>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441\u00a0\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u043c\u044b \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u2011\u0441\u0438\u0441\u0442\u0435\u043c\u044b: \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0432\u00a0\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u2011\u0431\u0430\u043d\u043a\u0435. \u042d\u0442\u043e \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442\u00a0\u043c\u0435\u043b\u043a\u0438\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432, \u0446\u0432\u0435\u0442\u043e\u0432, \u0444\u043e\u043d\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u043d\u0430\u0448\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u2011\u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e\u00a0\u0431\u044b\u043b\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u0447\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0432\u00a0\u0441\u0432\u0435\u0442\u043b\u043e\u0439, \u0438 \u0432\u00a0\u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u0430\u0445.<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u043b\u0438 <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/15339657135383-Guide-to-variables-in-Figma\">\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Figma<\/a>. \u0421\u00a0\u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0434\u0432\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0445\u0435\u043c\u044b \u0434\u043b\u044f\u00a0\u0442\u0451\u043c\u043d\u043e\u0439 \u0438 \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0442\u0435\u043c\u044b. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Figma \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432\u00a0\u0441\u0442\u0438\u043b\u044f\u0445 \u0438\u043b\u0438\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0447\u0442\u043e\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0435\u043c.<\/p>\n<p>\u041a\u0430\u043a\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/--*\">CSS\u2011\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/a> \u0434\u043b\u044f\u00a0\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u2011\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b. \u042d\u0442\u043e \u043d\u0435\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0432\u00a0\u043d\u0430\u0448\u0443 \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443, \u043d\u043e\u00a0\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u043e \u0435\u0451 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0439 \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0442\u0435\u043c.<\/p>\n<p>\u041d\u043e\u00a0\u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0438 \u0441\u00a0\u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439: \u043d\u0430\u0448\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b, \u0432\u00a0\u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442\u00a0\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0435\u00a0\u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b. \u041a\u0430\u043a\u00a0\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0432\u0441\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0438\u0437\u00a0Figma \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0437\u0430\u0448\u0438\u0442\u044b\u0435 hex\u2011\u0446\u0432\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435\u00a0\u0431\u044b\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u044b \u043d\u0430\u00a0\u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0442\u0435\u043c\u044b.<\/p>\n<h2>\u0421\u0442\u0430\u0440\u044b\u0439 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0443 \u0438\u0437\u0434\u0430\u043b\u0435\u043a\u0430 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e\u00a0\u0442\u043e\u043c, \u043a\u0430\u043a\u00a0\u0443\u00a0\u043d\u0430\u0441\u00a0\u0431\u044b\u043b\u0430 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e\u00a0\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0441\u00a0\u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u043e\u0439. <\/p>\n<p>\u0423\u00a0\u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0432\u00a0Figma, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0438\u043b\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0441\u00a0\u043a\u043e\u0434\u043e\u043c, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0435\u0440\u0443\u0442 \u043d\u0430\u00a0\u0441\u0435\u0431\u044f \u0432\u0441\u044e \u0440\u0443\u0442\u0438\u043d\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443. \u041e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0440\u0435\u043b\u0438\u0437\u2011\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c UI\u2011\u043a\u0438\u0442\u0430.<\/p>\n<p><strong>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0448\u0430\u044e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442\u044b:<\/strong><\/p>\n<ol>\n<li>\n<p>\u0412\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0441\u0435\u0445 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0438\u0437\u00a0Figma \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/www.figma.com\/developers\/api#get-file-components-endpoint\">REST API<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0432\u00a0\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 SVG\u2011\u0444\u0430\u0439\u043b\u044b.<\/p>\n<\/li>\n<li>\n<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f React\u2011\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0433\u043e SVG\u2011\u0444\u0430\u0439\u043b\u0430.<\/p>\n<\/li>\n<\/ol>\n<h2>\u041f\u0435\u0440\u0432\u044b\u0435 \u043f\u043e\u043f\u044b\u0442\u043a\u0438<\/h2>\n<p>\u041f\u043e \u043d\u0430\u0432\u043e\u0434\u043a\u0435 \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432, \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 Figma-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0412 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0431\u044b\u043b\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0433\u043e\u00a0<a href=\"https:\/\/www.figma.com\/developers\/api#variables\">REST API<\/a>, \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u043e\u0435 API \u0438 \u0432\u0441\u0451 \u0432\u0437\u043b\u0435\u0442\u0438\u0442 \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043a \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u043a \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u0435:<\/p>\n<ol>\n<li>\n<p><strong>\u041d\u0430\u0434\u0435\u0436\u0434\u0430 \u043d\u0430 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 Figma<\/strong>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u0448\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0431\u044b\u043b\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a Figma-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u0430 \u043d\u0430\u0434\u0435\u0436\u0434\u0430, \u0447\u0442\u043e \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0432 SVG \u0447\u0435\u0440\u0435\u0437 REST API \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0446\u0432\u0435\u0442\u043e\u0432 \u043d\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0431\u044b \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0442\u0435\u043c\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 Figma.<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430\u00a0<\/strong><code>currentColor<\/code>. \u0412\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value#currentcolor_keyword\">\u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435<\/a>\u00a0\u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0446\u0432\u0435\u0442 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u044b, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432<\/strong>. \u042d\u0442\u043e \u0431\u044b\u043b \u0441\u0430\u043c\u044b\u0439 \u043f\u043b\u043e\u0445\u043e\u0439 \u0434\u043b\u044f \u043d\u0430\u0441 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u2014 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0442\u0435\u043c\u044b, \u0432\u0442\u043e\u0440\u043e\u0439 \u0434\u043b\u044f \u0442\u0451\u043c\u043d\u043e\u0439 \u2014\u00a0\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u044b. \u0415\u0433\u043e \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u043a\u0430\u043a \u043f\u043b\u0430\u043d \u0411 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0441\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438 \u0441\u0432\u043e\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f:<\/p>\n<ol>\n<li>\n<p><strong>\u041f\u043e\u0434\u0445\u043e\u0434 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 Figma<\/strong>\u00a0\u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0438\u0437-\u0437\u0430\u00a0<a href=\"https:\/\/forum.figma.com\/t\/svg-export-add-feature-to-export-local-variable-names-into-svg-code-with-static-color-fallback\/57708\">\u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0441\u0430\u043c\u043e\u0439 Figma<\/a>. \u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 SVG: \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0446\u0432\u0435\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0436\u0451\u0441\u0442\u043a\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 HEX-\u043a\u043e\u0434\u044b \u0446\u0432\u0435\u0442\u043e\u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0410 REST API \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0438\u0431\u043e \u0432\u044b\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0441\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430, \u043b\u0438\u0431\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u00a0<\/strong><code>currentColor<\/code>\u00a0\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043c\u043e\u043d\u043e\u0445\u0440\u043e\u043c\u043d\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a, \u0430 \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0438\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043b\u0430 \u0438\u0437 \u0431\u043e\u043b\u0435\u0435, \u0447\u0435\u043c \u0434\u0432\u0443\u0445 \u0446\u0432\u0435\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0445\u043e\u0434\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u0448\u0438\u043b\u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u0448\u0438\u0442\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445 SVG (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<code>fill<\/code>\u00a0\u0438\u043b\u0438\u00a0<code>stroke<\/code>), \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<p><strong>\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f:<\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<p><strong>\u041b\u043e\u0433\u043e\u0442\u0438\u043f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043c\u0435\u043d\u044b:<\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u2014 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043c\u0435\u043d\u0443 \u0442\u0435\u043c, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044f\u0441\u044c \u043f\u043e\u0434 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0438\u0437 Figma \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u043d\u0435 HEX-\u0446\u0432\u0435\u0442\u0430, \u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 UI-\u043a\u0438\u0442\u0430.<\/p>\n<figure class=\"\"><\/figure>\n<h2>\u0421 \u0447\u0435\u043c \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435<\/h2>\n<p>\u0412 \u0445\u043e\u0434\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f \u043a REST API \u043e\u0442 Figma-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445\u00a0<a href=\"https:\/\/www.figma.com\/pricing\/#features\">\u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0442\u0430\u0440\u0438\u0444\u0430\u0445 \u0443\u0440\u043e\u0432\u043d\u044f Enterprise<\/a>. \u0410 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u0431\u043e\u043b\u0435\u0435 \u0441\u043a\u0440\u043e\u043c\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444\u043d\u044b\u0439 \u043f\u043b\u0430\u043d \u0431\u0435\u0437 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a API.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0422\u0430\u0440\u0438\u0444\u043d\u044b\u0435 \u043f\u043b\u0430\u043d\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a REST API<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u043d\u0443\u0434\u0438\u043b\u0438 \u043d\u0430\u0441 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/\">Plugin API Figma<\/a>. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f REST API \u043d\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u043b\u0438\u0441\u044c \u043d\u0430 Plugin API, \u0447\u0442\u043e \u0434\u0430\u043b\u043e \u043d\u0430\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u043e\u0442\u043a\u0440\u044b\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Plugin API \u0441\u0442\u0430\u043b\u043e \u0442\u043e, \u0447\u0442\u043e \u0443 \u043c\u044b \u0443\u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0440\u0435\u0432\u044c\u044e \u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432. \u0422\u0430\u043a \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0431\u044b\u043b \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API, \u0438 \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 0: \u043f\u043e\u0438\u0441\u043a \u0432\u0441\u0435\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435<\/h4>\n<p>\u0423 Figma \u0435\u0441\u0442\u044c \u0448\u0438\u0440\u043e\u043a\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0441\u044c \u043a\u0430\u043a\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/api\/ComponentNode\/\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a>\u00a0Figma, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043f\u043e\u0434\u043e\u0448\u0435\u043b \u043c\u0435\u0442\u043e\u0434\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/api\/properties\/nodes-findallwithcriteria\/\">findAllWithCriteria<\/a> \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432).<\/p>\n<pre><code class=\"javascript\">const logos = figma.currentPage.findAllWithCriteria({ types: [\"COMPONENT\"] });<\/code><\/pre>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 1: \u042d\u043a\u0441\u043f\u043e\u0440\u0442 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0432 SVG<\/h4>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u0441 \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Plugin API \u0434\u043b\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0438\u0437 Figma \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 SVG. \u042d\u0442\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438\u00a0<code>exportAsync<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 (<code>JPG<\/code>,\u00a0<code>PNG<\/code>,\u00a0<code>SVG<\/code>,\u00a0<code>PDF<\/code>) \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0431\u044b \u043c\u044b \u043d\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b\u00a0<code>exportAsync<\/code>, \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 SVG-\u0444\u0430\u0439\u043b\u044b \u0432\u0441\u0451 \u0442\u0430\u043a \u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0436\u0451\u0441\u0442\u043a\u043e \u0437\u0430\u0448\u0438\u0442\u044b\u0435 HEX-\u0446\u0432\u0435\u0442\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u0435\u043c\u044b.<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 2: \u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 Figma \u0438 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439<\/h4>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0436\u0451\u0441\u0442\u043a\u043e \u0437\u0430\u0448\u0438\u0442\u044b\u0435 HEX-\u0446\u0432\u0435\u0442\u0430 \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 UI-\u043a\u0438\u0442\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 SVG \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 Figma. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u00a0<code>svgIdAttribute<\/code>\u00a0\u0444\u0443\u043d\u043a\u0446\u0438\u0438\u00a0<code>exportAsync<\/code>. \u041f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043e\u043d \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 ID \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 SVG-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.<\/p>\n<pre><code class=\"javascript\">const logo = ...;  const svg = logo.exportAsync({    format: \"SVG_STRING\",    svgIdAttribute: true  })<\/code><\/pre>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 Figma:<\/h3>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 Figma<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b\u00a0exportAsync\u00a0\u043d\u0430 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0435 \u0432\u044b\u0448\u0435:<\/h3>\n<ul>\n<li>\n<p><strong>\u0411\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u00a0<\/strong><code>svgIdAttribute<\/code>: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b exportAsync \u0431\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 svgIdAttribute<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<li>\n<p><strong>\u0421 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c\u00a0<\/strong><code>svgIdAttribute<\/code>: \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0439 ID, \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0439 \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 Figma.\u00a0<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b exportAsync \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c svgIdAttribute<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<\/ul>\n<p>\u0421 \u043d\u0430\u043b\u0438\u0447\u0438\u0435\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 ID \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u043e\u0438 \u0432 Figma \u0441 \u0438\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u0430\u043c\u0438 \u0432 SVG. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0438\u0445 \u0437\u0430\u043c\u0435\u043d\u044b \u043d\u0430 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 SVG-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 3: \u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432 \u0432 Figma<\/h4>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0431\u044b\u043b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u00a0<code>exportAsync<\/code>\u00a0\u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c\u00a0<code>svgIdAttribute<\/code>\u00a0\u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u0423 \u0447\u0430\u0441\u0442\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f, \u0438 \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u043e \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 Figma. \u041d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u0432 SVG-\u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0441\u043e\u0431\u044b\u043c\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438 \u0431\u044b\u043b\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u043a\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438. \u0422\u043e\u0433\u0434\u0430 \u0432 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 ID \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u0441\u00a0sequential-\u043d\u0435\u0439\u043c\u0438\u043d\u0433\u043e\u043c, \u0442.\u0435. \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 Figma ID \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a:\u00a0<code>Vector_1<\/code>\u00a0\u0438\u00a0<code>Vector_2<\/code>,\u00a0<code>Ellipse_1<\/code>\u00a0\u0438\u00a0<code>Ellipse_2<\/code>.<\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0442\u0430\u043b\u043e \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u0435\u0432\u0435\u043d\u0442\u0438\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0445 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e\u00a0sequential-\u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u042d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043b\u043e \u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u043c\u0451\u043d \u043c\u0435\u0436\u0434\u0443 Figma \u0438 SVG, \u0438 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u043b\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<pre><code class=\"javascript\">function uniqueifyChildrenNames(node: ComponentNode) {   const sequences = {};    const stack: SceneNode[] = [node];   const visited = new Set();    while (stack.length &gt; 0) {     const vertex = stack.pop()!;      const name = vertex.name;      if (!visited.has(vertex)) {       if (!sequences[name]) {         sequences[name] = 1;       } else {         sequences[name]++;         vertex.name = `${vertex.name}_${sequences[name]}`;       }        visited.add(vertex);        if (\"children\" in vertex) {         for (const child of vertex.children) {           stack.push(child);         }       }     }   }    return node; }<\/code><\/pre>\n<h3>\u0423\u0447\u0438\u043c\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c HEX-\u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u0442\u043e\u043a\u0435\u043d\u044b \u0438\u0437 UI-\u043a\u0438\u0442\u0430<\/h3>\n<h4>\u0428\u0430\u0433 1: \u0418\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u0430 \u043b\u0438 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f, \u0432 Figma \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<a href=\"https:\/\/www.figma.com\/plugin-docs\/api\/node-properties\/#boundvariables\">boundVariables<\/a>. \u041e\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0430\u0441\u044c \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435\u00a0<code>boundVariables<\/code>\u00a0\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0445\u043e\u0442\u044c \u0441 \u043e\u0434\u043d\u0438\u043c \u043a\u043b\u044e\u0447\u043e\u043c \u2014 \u0437\u043d\u0430\u0447\u0438\u0442, \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">\/**  * \u041c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435  * \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043a \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0432 \u043c\u0435\u0442\u043e\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443  *\/<\/code><\/pre>\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-444463","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/444463","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=444463"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/444463\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=444463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=444463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=444463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}