Figma или Illustrator: три заказа и приёмка показывают выбор инструмента по типу результата. Экран оплаты с состояниями собирается в Figma Design. Печатная панель с trim 80×40 мм и вылетами 3 мм живёт в Illustrator. Иконка 24×24 передаётся отдельным SVG, а подпись к ней создаётся текстовым слоем в Figma. Ниже — три заполненных заказа, исходники, выходы и ручные проверки.
Заказ P-01: экран оплаты в Figma
Это учебный заказ редакции: приложения не запускались, соответствие реальной печати не проверялось. Вход описан точно, чтобы читатель мог повторить сборку в своём файле.
Вход P-01: экран оплаты 1440×1024, сумма 2400 ₽, состояния Empty, Error, Success. Решение — Figma Design. Собираются три фрейма: Pay_Empty, Pay_Error, Pay_Success. Кнопка делается главным компонентом PayButton, а на фреймах размещаются его экземпляры. В документации Figma компонент описан как элемент, который переиспользуется в дизайне, а экземпляр связан с главным компонентом и получает его обновления (help.figma.com, «Guide to components in Figma»). Для создания и правки компонентов нужен доступ на редактирование файла.
Передача и ручной эталон. Прототип связывает три состояния: Empty → Error по «Оплатить»; Error → Empty по «Исправить»; Empty → Success по демонстрационной кнопке «Заполнить и оплатить». Это навигационный макет. В документации Figma прототип описан как сеть фреймов и связей: первая связь между двумя фреймами создаёт точку старта потока (help.figma.com, «Guide to prototyping in Figma»). Исходный текст «2400 ₽» остаётся текстом. PNG трёх состояний — только дополнительный просмотр.
Проверка 1. Пройдите вручную все указанные связи P-01 и замените текст суммы. Отказом считается отсутствие одного состояния или сведённая картинка на месте текстового слоя.
Порядок сборки:
- Создайте фрейм 1440×1024 и назовите его Pay_Empty.
- Соберите кнопку, превратите её в главный компонент PayButton, разместите экземпляры на трёх фреймах.
- Свяжите фреймы в режиме Prototype: Empty → Error, Error → Empty, Empty → Success.
- Оставьте сумму «2400 ₽» текстовым слоем и проверьте её замену.
- Экспортируйте PNG трёх состояний как дополнительный просмотр.
Частая ошибка: собрать состояния как три несвязанные картинки. Тогда проверка связей не проходит, и заказ возвращается на доработку.
| Элемент P-01 | Значение | Как проверить |
|---|---|---|
| Размер экрана | 1440×1024 | Размер фрейма |
| Сумма | 2400 ₽ | Текст остаётся текстом |
| Состояния | Empty, Error, Success | Три фрейма |
| Кнопка | PayButton и экземпляры | Связь с главным компонентом |
| Связи | Empty → Error → Empty, Empty → Success | Проход по прототипу |
Заказ P-02: печатная панель в Illustrator
Вход P-02: лицевая панель коробки. Условная спецификация заказчика: trim 80×40 мм, вылет 3 мм с каждой стороны, CMYK, профиль ISO Coated v2 (ECI), PDF по согласованной с типографией спецификации. Решение — Illustrator, исходник panel.ai. Артборд 80×40 мм, Document Bleed 3 мм, фон продолжается до зоны вылетов. Профиль — входное требование учебного заказчика.
В документации Adobe раздел Marks and Bleeds описывает вылеты как продолжение изображения за линией реза, чтобы при резке не появлялись белые полосы. Там же указано, что четыре поля вылета задаются отдельно, а опция Use Document Bleed Settings применяет значения из File > Document Setup (helpx.adobe.com, «PDF marks, bleeds, and color output options»). Для коммерческой печати в документе приведён ориентир 0.125 дюйма (9 pt) со всех сторон и рекомендация сверять требования с типографией.
Выход panel.pdf: TrimBox 80×40 мм; изображение с вылетами покрывает 86×46 мм. При экспорте PDF включите документные вылеты и сверьте output profile с заданным. Реальные требования, шрифты и PDF-стандарт согласовываются с типографией отдельно; учебная арифметика не является цветопробой.
Проверка 2. У P-02 отдельно сверьте trim 80×40, четыре вылета по 3 и заданный профиль. Размер 86×46 относится к области с вылетами.
Порядок экспорта:
- Задайте артборд 80×40 мм.
- В Document Setup установите Document Bleed 3 мм и продолжите фон до зоны вылетов.
- В Export Adobe PDF включите Use Document Bleed Settings.
- Сверьте output profile с профилем из спецификации.
- Проверьте TrimBox в готовом PDF.
| Параметр P-02 | Значение | Где смотреть |
|---|---|---|
| Trim | 80×40 мм | Артборд и TrimBox |
| Вылет | 3 мм с каждой стороны | Document Bleed |
| Область с вылетами | 86×46 мм | Изображение с вылетами |
| Цвет | CMYK | Настройки документа |
| Профиль | ISO Coated v2 (ECI) | Output profile |
| Выход | panel.pdf | TrimBox и профиль |
Частая ошибка: принять 86×46 за размер готовой панели. Это область с вылетами; trim остаётся 80×40 мм.
Заказ P-03: иконка и подпись
Вход P-03: иконка 24×24, один замкнутый контур цвета #2457A7, подпись «Оплатить» должна меняться в UI. Решение: в Illustrator создаётся icon.ai с контуром без эффектов, маркеров и pattern. Затем icon.svg — только иконка. В Figma появляются Icon_Vector и отдельный текстовый слой Pay_Label «Оплатить».
Передача и ручной эталон. Импортируйте SVG в Figma; измените точку пути и цвет, убедитесь, что это вектор. Подпись создаётся отдельным текстовым слоем в Figma и меняется на «Продолжить». Через SVG автоматическое сохранение нативного текстового слоя не обещается.
В документации Figma обмен между инструментами описан через SVG: формат назван lossless, поэтому его рекомендуют для импорта и экспорта ассетов. Там же указано, что элементы marker и pattern в импорт не включаются (help.figma.com, «Copy assets between design tools»). Это объясняет требование к контуру: без маркеров и pattern он переносится предсказуемее.
Проверка 3. У P-03 измените узел Icon_Vector и текст Pay_Label независимо. Изменение формы букв не засчитывается как редактирование текста.
Порядок работы:
- В Illustrator нарисуйте один замкнутый контур 24×24 цвета #2457A7.
- Уберите эффекты, маркеры и pattern.
- Сохраните icon.ai и экспортируйте icon.svg с одной иконкой.
- Импортируйте SVG в Figma и проверьте, что слой редактируется как вектор.
- Добавьте отдельный текстовый слой Pay_Label «Оплатить» и смените его на «Продолжить».
| Элемент P-03 | Значение | Как проверить |
|---|---|---|
| Размер иконки | 24×24 | Размер контура |
| Контур | один замкнутый | Число контуров |
| Цвет | #2457A7 | Заливка |
| Исходник | icon.ai | Файл Illustrator |
| Обмен | icon.svg | Импорт в Figma |
| Вектор | Icon_Vector | Правка точки пути |
| Подпись | Pay_Label | Отдельный текстовый слой |
Текст и кривые: разные выходы
Текст и кривые — разные выходы, и заказчик выбирает один из них. Если заказ требует редактировать символы после переноса, сохраняют текст, обеспечивают шрифт и проверяют принимающий слой; при неудаче используют согласованный нативный текстовый слой. Если требуется только точный вид, outlines разрешают отдельно: получится редактируемый вектор, но не текст.
В документации Figma преобразование текста в векторные пути описано как разрушительное действие: после него нельзя редактировать содержимое текста и свойства типографики. Там же приведены два способа — Flatten и Outline stroke, и указано, что при Outline stroke каждый глиф становится отдельным векторным слоем (help.figma.com, «Convert text to vector paths»). В документации Illustrator в разделе сохранения SVG есть опция Convert To Outlines, которая переводит текст в векторные пути для сохранения внешнего вида во всех SVG-просмотрщиках (helpx.adobe.com, «How to save artwork in Illustrator»).
Практический вывод для P-03: иконка идёт вектором, подпись — текстом. Для P-02 outlines допустимы, поскольку заказ требует точного вида панели.
| Задача | Текст | Кривые |
|---|---|---|
| Правка символов после переноса | Подходит | Не подходит |
| Точный внешний вид | Зависит от шрифта | Подходит |
| Смена подписи в UI | Подходит | Не подходит |
| Иконка без подписи | Не применяется | Подходит |
Clipboard issue: версии 29.7.1 и 29.8.1
Официальный документ Figma о копировании векторов из Illustrator отдельно указывает проблему версии 29.8.1, которая мешает копировать и вставлять векторы в Figma. Там же сказано, что начиная с Adobe Illustrator 29.7.1 код SVG по умолчанию не включается при копировании векторов, из-за чего при вставке в Figma векторы превращаются в статические изображения (help.figma.com, «Copying vectors from Adobe Illustrator into Figma»). Как обходной путь документ предлагает экспорт artwork в SVG.
Это ограничение описанных версий. Универсальный дефект эффектов при переносе утверждать не следует: в брифе такое обобщение убрано. Для заказа P-03 выбран явный SVG-файл, поэтому вопрос буфера обмена не влияет на передачу.
Порядок действий при встрече с проблемой:
- Проверьте версию Illustrator в разделе About.
- Если это 29.7.1 или 29.8.1, перейдите к экспорту SVG.
- Сохраните icon.svg с одной иконкой.
- Импортируйте файл в Figma и проверьте вектор.
- Подпись добавьте отдельным текстовым слоем.
| Версия Illustrator | Поведение при копировании | Рекомендация |
|---|---|---|
| 29.7.1 | SVG-код не включается по умолчанию | Экспорт SVG |
| 29.8.1 | Копирование векторов в Figma нарушено | Экспорт SVG |
Частые вопросы
Figma или Illustrator выбрать для экрана оплаты?
Для P-01 выбран Figma Design: три фрейма состояний, главный компонент PayButton и экземпляры, связи в прототипе. Экран 1440×1024 с суммой 2400 ₽ собирается как навигационный макет. Платёжная интеграция в этот заказ не входит.
Как сохранить trim 80×40 мм и вылеты 3 мм?
Артборд задаётся 80×40 мм, Document Bleed — 3 мм с каждой стороны. При экспорте PDF включите документные вылеты и сверьте output profile. Область с вылетами покрывает 86×46 мм, а trim остаётся 80×40 мм.
Почему outlines не считаются текстовым слоем?
Преобразование текста в пути в Figma описано как разрушительное для текста и типографики. После него правка символов недоступна. Если заказ требует менять подпись, сохраняют текст и проверяют принимающий слой.
Что делать с ошибкой копирования из Illustrator в Figma?
Документ Figma указывает проблему версии 29.8.1 и изменение буфера начиная с 29.7.1. Обходной путь — экспорт artwork в SVG. Для P-03 выбран явный SVG-файл, поэтому буфер обмена не используется.
Как принять работу по трём заказам?
Проверка 1: пройти связи P-01 и заменить текст суммы. Проверка 2: сверить trim 80×40, четыре вылета по 3 и профиль. Проверка 3: изменить узел Icon_Vector и текст Pay_Label независимо. Отсутствие состояния или сведённая картинка вместо текста — отказ.