Как подготовить печатные макеты из Figma в Adobe Illustrator так, чтобы типография не взвыла? Личный опыт и советы

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

Цель этой статьи – поделиться своим опытом и в комментариях сообщества обсудить ваши лайфхаки. Не претендую на истину в последней инстанции, и понимаю, что профессионалы часто смеются над использованием Figma для предпечатки, как и некоторые иронизируют над использованием Corel Draw.

Давайте разберёмся, что именно может пойти не так при подготовке к печати из Figma и почему.

Дисклеймер!

Оговорюсь сразу — этот способ подходит для простых макетов. Для сложных многослойных макетов с замороченным дизайном, тиснением, лаком — это решение, скорее всего, не подойдёт. У Figma есть весомое преимущество — удобство работы с командой.

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

Мы решили собирать контент и дизайн для упаковок сразу в Figma, так как в ней удобно коллаборировать с остальными исполнителями. За неделю наша небольшая команда из 5 человек создала упаковки для примерно 30 наименований: коробки продуктов, блистеры, флаконы, инструкции по применению на двух языках. Это гигантский объем работы. Если бы мы делали в Illustrator то перекидывать другу другу файлы по цепочке то сроки и стресс просто убили бы нас.

Привычно и быстро. Фармэксперты смогли оперативно внести правки в контент прямо в Figma, оставить комментарии и вот это все, переводчикам легко все проверить, и в дальнейшем быстро согласовать финальный визуал всей линейки продуктов, а это более 180 файлов печатных макетов!

Как передать макет в типографию? Файл будет весьма кривым если просто из Figma сэкспортировать в pdf и потом пересохранить в eps.

Существующие плагины для Figma работают некорректно, мы перерыли все и продолжаем искать. Макет не экспортится с нормальными размерами, цвета плывут, появляется какой то жуткий растр. Все это приводит к дополнительным усилиям по доработке макетов вручную, что сводит на нет смысл использования плагинов.

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

Нужно переделать все объекты из RGB в CMYK. RGB – это цветовая модель для экранов, CMYK – это печатная цветовая модель.

Победить задачу на изи не получится, приходится вручную настраивать каждый цвет в макете в иллюстраторе. В нашем случае цветов было всего 4, и с помощью функции Select > Same > Fill color можно быстро перекрасить объекты полуавтоматически.

Важно — подбор альтернативы RGB цвета в CMYK это огромная и сложная тема, новичкам могу посоветовать пользоваться одним из миллиона онлайн конверторов по типу colorbook.io и подобных, так же почитать какой нужно делать черный цвет.

Фигма считает в пикселях а печатный макет нужно отдать в миллиметрах.

Задаем масштаб изначально в Figma, представим, что 1 px в фигме = 0.1 мм в иллюстраторе. Создаем фрейм в фигме под размер А3 (4200 px на 2970 px) или любой другой, в котором собираем дизайн, этот фрейм станет рабочей областью.

Чтобы не нарушать внешние границы размера — обязательно используйте Stroke > Inside. Не используйте функцию Сlip content внутри фреймов рабочей области, и постарайтесь минимизировать количество фреймов, лучше просто группировать объекты.Дальше создаем в иллюстраторе файл CMYK в размер A3. Импортируем пдф из фигмы, Выделяем массово все объекты, линкуем длину к ширине, и задаем ширину 420 мм.

Учитываем что внутри объектов будут дробные цифры размеров до 0.1 мм, но это устраивает нас и типографию. В результате мы получаем объекты корректных размеров.

Градиенты, тени и другие сложные элементы часто экспортируются некорректно, пропадают или некрасиво растрируются. Растровые картинки по умолчанию в импортируются в RGB, что не подходит.

Мы старались использовать максимально простые объекты при подготовке макетов и минимизировать использование эффектов, а там где без этих штук нельзя обойтись — растрируем еще в фигме, в макет вставляем объекты через ctrl+shift+c / ctrl+shift+v. В иллюстраторе, эти картинки повторно растрируем. Ставим CMYK и 300 dpi. Обязательно проверьте исходное разрешение картинки, и если оно не дотягивает то улучшите качество.

Опытный глаз заметит, что операции по редактированию этих объектов достаточно стандартизированы. Автоматизация? Конечно! В нашем случае мы написали скрипт. Adobe Illustrator отлично понимает JS и с удовольствием делится документацией.

Если коротко — скрипт позволяет автоматизировать все вышеописанные действия, с двумя настройками, которые нужно внести в скрипт заранее.

Бонус, заходите мою телегу и забирайте скрипт

Экспорт макетов из Figma в Illustrator – задача не из простых, особенно для сложных проектов. Пока приходится пользоваться костылями, признаю. Но для простых макетов это вполне рабочее решение, особенно если сроки поджимают. Надеюсь, наш опыт будет полезен. Жду комментариев, чтобы вместе улучшить этот процесс!

Спасибо за огромный рисерч и помощь в поиске решения Артему Ходакову и команде