F4f5f8: статьи и новости по теме

FigmaExport: как автоматизировать экспорт UI-Kit из Figma в Xcode и Android Studio проекты

Даня Субботин, железный iOS-разработчик Redmadrobot, рассказывает, как можно облегчить себе жизнь и начать экспортировать ресурсы из Figma напрямую в Xcode и Android Studio за несколько секунд.

5555

# RegExp pattern for: background, background_primary, widget_primary_background\n icons:\n # RegExp pattern for icon name validation before exporting\n nameValidateRegexp: '^(ic)_(\\d\\d)_([a-z0-9_]+) # RegExp pattern for: ic_24_icon_name, ic_24_icon\n images:\n # RegExp pattern for image name validation before exporting\n nameValidateRegexp: '^(img)_([a-z0-9_]+) # RegExp pattern for: img_image_name","lang":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Темная тема"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003EЕсли ваш проект поддерживает темную тему, нужно создавать отдельный файл с UI-компонентами, где будет находиться темная цветовая палитра и темные иллюстрации.\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E\u003Cb\u003EЦвета\u003C/b\u003E\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003EВ Figma-файле цвета должны быть оформлены как цветовые стили и опубликованы в Team Library. Для удобства разработчиков желательно сделать таблицу всех цветов, где будет указано, какой цвет и где используется.\u003C/p\u003E"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"title":null,"items":[{"title":"","image":{"type":"image","data":{"uuid":"d00efaba-5433-06be-78b0-36dbd3fb9f4b","width":1999,"height":1618,"size":3386011,"type":"png","color":"5c10bd","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E\u003Cb\u003EИконки\u003C/b\u003E\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003EВ Figma-файле должен быть Frame с именем Icons. В этом Frame должны находиться компоненты для каждой иконки. Пример:\u003C/p\u003E"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"title":null,"items":[{"title":"","image":{"type":"image","data":{"uuid":"957cd900-4473-2f3d-0dda-86f823f20be1","width":1980,"height":1010,"size":1358806,"type":"png","color":"e1e1e5","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E\u003Cb\u003EИллюстрации\u003C/b\u003E\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003EВ Figma-файле должен быть Frame с именем Illustrations, который содержит компоненты для каждой иллюстрации. Пример:\u003C/p\u003E"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"title":null,"items":[{"title":"","image":{"type":"image","data":{"uuid":"9d65809c-8034-e9fc-98a7-cd127be21a9b","width":1999,"height":1311,"size":2773045,"type":"png","color":"e6dcde","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Итог"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003EБлагодаря FigmaExport мы избавились от множества проблем при работе с Figma. Экспорт ресурсов теперь занимает секунды. Несколько примеров, как нам облегчило жизнь использование утилиты.\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E1. В одном из проектов было 52 иконки. Дизайнер решил, что их все нужно привести к единому стилю. После того, как он их обновил, нам предстояло их обновить у себя. \u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E\u003Cb\u003EКак бы мы их обновляли вручную:\u003C/b\u003E экспортировали все иконки из Figma как zip-файл, переименовали 52 файла, перенесли иконки в проект, проставили все необходимые свойства, проверили, что ничего не забыли. На это бы ушло не менее часа времени.\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E\u003Cb\u003EКак мы их обновили c FigmaExport:\u003C/b\u003E запустили команду figma-export icons. Через 10 секунд все изменения подтянулись, мы запустили приложение на симуляторе и увидели, что все иконки заменились.\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E2. На одном из спринтов мы решили сделать новую фичу. В UI-Kit дизайнер добавил четыре новые иконки, удалил две старые иконки, добавил два новых цвета. \u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003EВместо того чтобы потратить один час времени на обсуждение с дизайнером, что он изменил в UI-Kit, ручном экспорте иконок и цветов, мы просто запустили команду figma-export colors и figma-export icons и через Git увидели что удалилось, что добавилось, а что изменилось. Сразу стали верстать макеты, используя новые иконки и цвета.\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E3. Делали фичу, в которой надо было сделать расширенный онбординг с 4 разделами, в каждом из которых до 7 страниц с картинками.\u003C/p\u003E"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"title":null,"items":[{"title":"","image":{"type":"image","data":{"uuid":"cf02fbac-9125-a905-6337-a553a6f2259d","width":1999,"height":1604,"size":3610664,"type":"png","color":"f2f2f2","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003EРучной экспорт занял бы много времени. Выполнив команду figma-export images мы менее, чем за минуту, получили в проекте все эти картинки, готовые к использованию.\u003C/p\u003E"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"title":null,"items":[{"title":"","image":{"type":"image","data":{"uuid":"348ddd09-6194-9835-1224-c1cc53cbef7c","width":1830,"height":1856,"size":4263927,"type":"png","color":"e3e3e3","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Несколько минусов"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Необходимо договариваться с дизайнером о том, как надо хранить цвета, иконки, картинки в UI-Kit, чтобы их можно было автоматизировано выгрузить.","Экспорт работает только для тех компонентов, которые добавлены в Team Library, поэтому у дизайнеров должна быть платная подписка на Figma."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003EПланы:\u003C/p\u003E"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["добавить возможность экспорта текстовых стилей,","добавить возможность экспорта растровых картинок для Android,","добавить поддержку SwiftUI."],"type":"UL"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Ссылка на утилиту"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E\u003Ca href=\"https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fgithub.com%2FRedMadRobot%2Ffigma-export&postId=151601\" rel=\"nofollow noopener\" target=\"_blank\"\u003EСкачать FigmaExport на GitHub\u003C/a\u003E.\u003C/p\u003E"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E\u003Ci\u003EБуду рад, если вы попробуете мою утилиту. Вопросы, пожелания, фидбек — пишите мне на \u003Ca href=\"https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fredmadrobot.com&postId=151601\" rel=\"nofollow noopener\" target=\"_blank\"\u003Ed.subbotin@redmadrobot.com\u003C/a\u003E\u003C/i\u003E\u003C/p\u003E"}},{"type":"person","cover":false,"hidden":false,"anchor":"","data":{"image":{"type":"image","data":{"uuid":"cf9e8419-6c19-cfd7-e840-f713e171d488","width":1000,"height":1000,"size":2298670,"type":"png","color":"454545","hash":"","external_service":[]}},"title":"Даниил Субботин","description":"ведущий разработчик iOS Redmadrobot"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"\u003Cp\u003E#приложения #мобильнаяразработка #figma #ios #android #redmadrobot \u003C/p\u003E"}}],"customUri":null,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"commentsSeenCount":null,"counters":{"comments":5,"favorites":199,"reposts":2,"online":0,"views":0,"hits":0,"reads":0,"shares":0,"reactions":0,"timespent":0,"total":16317},"isPinned":false,"isNews":false,"ogTitle":null,"ogDescription":null,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"summaryContent":null,"isExistSummaryContent":false,"reactions":{"counters":[{"id":1,"count":55}],"reactionId":0},"url":"https://vc.ru/dev/151601-figmaexport-kak-avtomatizirovat-eksport-ui-kit-iz-figma-v-xcode-i-android-studio-proekty","repostData":null,"dateFavorite":0,"isFavorited":false,"warningFromEditorTitle":null,"warningFromEditor":null,"subscribedToTreads":false,"author":{"id":199486,"name":"red_mad_robot","nickname":"redmadrobot","description":null,"uri":"/redmadrobot","avatar":{"type":"image","data":{"uuid":"83ed1542-21f4-56b5-b12a-cd79d304faf1","width":800,"height":800,"size":4367,"type":"png","color":"fc0404","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"7de9426c-bd16-505a-9f51-85df0f5e5eea","width":2014,"height":545,"size":236236,"type":"png","color":"b6b8ba","hash":"","external_service":[]}},"cover_y":55},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5223114,"userId":199486,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5223114"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1599027,"userId":199486,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1599027"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":372319,"userId":199486,"count":0,"shareImage":"https://api.vc.ru/achievements/share/372319"}],"collectibles":[{"type":"achievement","data":{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5223114,"userId":199486,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5223114","dateAchieved":1753357087,"isPinned":false}},{"type":"achievement","data":{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1599027,"userId":199486,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1599027","dateAchieved":1753302630,"isPinned":false}},{"type":"achievement","data":{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":372319,"userId":199486,"count":0,"shareImage":"https://api.vc.ru/achievements/share/372319","dateAchieved":1753280917,"isPinned":false}}],"lastModificationDate":1791071277,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":"1ee4281e-b189-6120-a381-4c857ffff841","isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":true,"isPro":false,"yandexMetricaId":null,"badge":"verified","isOnline":false,"tgChannelShortname":null,"category":{"discoveryType":"companies"},"counters":{"subscribers":3569},"favoriteCollectible":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":235819,"name":"Разработка","description":"Сообщество разработчиков: публикации о личном опыте, выдающиеся приёмы при решении рутинных задач, полезные материалы для профессионального роста.","uri":"/dev","avatar":{"type":"image","data":{"uuid":"fef5b5fb-e488-5b7f-8445-e3a26a910b44","width":1200,"height":1200,"size":7757,"type":"png","color":"343434","hash":"04042b2b1c1000","external_service":[]}},"cover":{"type":"image","data":{"uuid":"2a214cc5-35cc-58ca-bc07-fc1c892d2101","width":960,"height":280,"size":177,"type":"png","color":"343434","hash":"","external_service":[]}},"lastModificationDate":1642411346,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"dev","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"donations":{"amount":0,"isDonated":false},"gifts":[],"isBlur":false}}],"ogTitle":null,"ogDescription":null,"isAnonymized":true}};