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

20.08.2020

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

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

2 ответа на пост

# 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":"

Если ваш проект поддерживает темную тему, нужно создавать отдельный файл с UI-компонентами, где будет находиться темная цветовая палитра и темные иллюстрации.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Цвета

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В Figma-файле цвета должны быть оформлены как цветовые стили и опубликованы в Team Library. Для удобства разработчиков желательно сделать таблицу всех цветов, где будет указано, какой цвет и где используется.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"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":"

Иконки

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В Figma-файле должен быть Frame с именем Icons. В этом Frame должны находиться компоненты для каждой иконки. Пример:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"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":"

Иллюстрации

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В Figma-файле должен быть Frame с именем Illustrations, который содержит компоненты для каждой иллюстрации. Пример:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"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":"

Благодаря FigmaExport мы избавились от множества проблем при работе с Figma. Экспорт ресурсов теперь занимает секунды. Несколько примеров, как нам облегчило жизнь использование утилиты.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

1. В одном из проектов было 52 иконки. Дизайнер решил, что их все нужно привести к единому стилю. После того, как он их обновил, нам предстояло их обновить у себя.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Как бы мы их обновляли вручную: экспортировали все иконки из Figma как zip-файл, переименовали 52 файла, перенесли иконки в проект, проставили все необходимые свойства, проверили, что ничего не забыли. На это бы ушло не менее часа времени.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Как мы их обновили c FigmaExport: запустили команду figma-export icons. Через 10 секунд все изменения подтянулись, мы запустили приложение на симуляторе и увидели, что все иконки заменились.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

2. На одном из спринтов мы решили сделать новую фичу. В UI-Kit дизайнер добавил четыре новые иконки, удалил две старые иконки, добавил два новых цвета.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Вместо того чтобы потратить один час времени на обсуждение с дизайнером, что он изменил в UI-Kit, ручном экспорте иконок и цветов, мы просто запустили команду figma-export colors и figma-export icons и через Git увидели что удалилось, что добавилось, а что изменилось. Сразу стали верстать макеты, используя новые иконки и цвета.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

3. Делали фичу, в которой надо было сделать расширенный онбординг с 4 разделами, в каждом из которых до 7 страниц с картинками.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"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":"

Ручной экспорт занял бы много времени. Выполнив команду figma-export images мы менее, чем за минуту, получили в проекте все эти картинки, готовые к использованию.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"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":"

Планы:

"}},{"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":"

Скачать FigmaExport на GitHub.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Буду рад, если вы попробуете мою утилиту. Вопросы, пожелания, фидбек — пишите мне на d.subbotin@redmadrobot.com

"}},{"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":"

#приложения #мобильнаяразработка #figma #ios #android #redmadrobot

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":5,"favorites":199,"reposts":2,"views":15,"hits":15673,"reads":null,"online":0},"dateFavorite":0,"hitsCount":15673,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/dev/151601-figmaexport-kak-avtomatizirovat-eksport-ui-kit-iz-figma-v-xcode-i-android-studio-proekty","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"}],"lastModificationDate":1764946007,"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,"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"},"reactions":{"counters":[{"id":1,"count":55}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"ogTitle":null,"ogDescription":null,"isAnonymized":true}};