Официальная справка Figma подтверждает: импортированный файл .sketch становится отдельным файлом Figma, а Symbols преобразуются в компоненты, но исходная библиотека не переносится в готовую командную библиотеку автоматически (описание импорта Sketch в Figma). Поэтому ошибки после импорта Sketch в Figma нельзя исправлять массовой заменой вслепую.
Симптом → быстрый способ исправления
Макет выглядит иначе → сохраните исходник, импортированную копию и эталонные скриншоты, затем проверьте шрифты, компоненты, стили и ресурсы по отдельности.
Не сходятся Symbols, эффекты или сам импорт не завершается → вернитесь к исходному файлу в нативном Sketch, подготовьте копию и повторите перенос после очистки.
Кому нужен этот разбор
Этот материал предназначен UI-дизайнерам, которые переносят исторические проекты из Sketch в Figma.
Он также пригодится фрилансерам на Windows, получающим .sketch для правок, и руководителям продуктовых команд, оценивающим объём миграции дизайн-системы.
Начните с изоляции ошибки, а не с полной переделки
После загрузки проекта не редактируйте сразу все страницы. Сначала создайте отдельную папку или рабочую область с четырьмя объектами:
- оригинальным файлом
.sketch; - копией исходника для возможной очистки;
- импортированным файлом Figma;
- статическими изображениями ключевых экранов.
Исходный файл нужен не только как резервная копия. Он показывает, была ли проблема создана импортом или уже существовала в проекте. Если исходник давно не открывали, часть шрифтов, библиотек или изображений могла отсутствовать ещё до переноса.
Для первичной проверки выберите представительские страницы:
- экран с длинными текстовыми блоками;
- экран с несколькими состояниями компонентов;
- страницу с масками, градиентами и тенями;
- экран, где используются изображения и экспортируемые иконки.
Не называйте страницу «эталоном» только потому, что она визуально похожа на исходник. Эталон должен иметь сохранённый скриншот, понятное состояние интерфейса и отметку о том, какие шрифты и библиотеки использовались.
Ошибку удобно разделить на три типа:
- Общий сдвиг — весь экран кажется крупнее или меньше, но отдельные элементы сохраняют взаимные пропорции. Проверьте масштаб просмотра и фрейма.
- Локальное расхождение — изменились перенос строки, тень, компонент или изображение. Исправляйте конкретный слой.
- Устаревший источник — импорт отличается от текущего макета Sketch, потому что в Figma перенесли старую копию. Сначала установите, какой файл является актуальным.
Такой порядок экономит время: вам не придётся заново собирать корректные части проекта из-за одной проблемной группы.
Исправьте шрифты до выравнивания блоков
Самая заметная причина смещения макета — не найденный или заменённый шрифт. Figma указывает, что локальные шрифты должны быть доступны рабочему окружению; для браузерного сценария также важны локальные сетевые разрешения (инструкция Figma по добавлению локального шрифта, требования к локальному доступу в браузере).
Проверяйте не только название семейства. Зафиксируйте:
- точное имя шрифта;
- начертание и вес;
- версию установленного файла;
- наличие нужных символов;
- режим работы — настольное приложение Figma или браузер;
- локальную доступность шрифта на компьютере каждого участника.
Одинаковое имя не означает одинаковую геометрию текста. Разные версии могут иметь другие метрики, а похожее начертание может заменить отсутствующий вес. В результате меняются переносы, высота текстового блока, положение кнопки и расстояние до соседних элементов. Дополнительные сведения о проверке текста и шрифтов приведены в официальном руководстве Figma по текстовым слоям.
Рабочая процедура выглядит так:
- Откройте список заменённых или отсутствующих шрифтов.
- Сверьте семейство, вес и стиль с исходным Sketch.
- Установите нужный файл шрифта в проверяемой среде.
- Перезапустите Figma или обновите доступ к локальным шрифтам.
- Сравните переносы строк на представительских страницах.
- Проверьте высоту текстовых контейнеров и размеры кнопок.
- Запишите затронутые текстовые слои.
- Только после этого исправляйте ручные отступы.
Не начинайте с массовой замены на системный шрифт. Это может визуально исправить один экран и одновременно разрушить остальные. Если оригинальный шрифт недоступен по лицензии, зафиксируйте согласованный заменяющий вариант и отдельно отметьте, какие экраны потребовали ручной корректировки.
Напоминание: визуально похожий текст ещё не означает структурно корректный текстовый слой. Перед сдачей проверьте не только внешний вид, но и семейство, вес, переносы и возможность повторного редактирования.
Восстановите Symbols и проверьте архитектуру компонентов
После импорта Sketch Symbols обычно становятся компонентами Figma. Это не равно полному переносу дизайн-системы. Figma создаёт самостоятельный документ, а публикация и использование компонентов в команде требуют отдельной настройки библиотеки (основы коллекций компонентов и библиотек Figma).
Проверяйте компоненты сверху вниз:
- найден ли главный компонент;
- связаны ли экземпляры с правильным главным компонентом;
- сохранились ли переопределения текста и изображений;
- остались ли вложенные компоненты;
- не превратилась ли часть экземпляров в независимые группы;
- совпадают ли состояния, варианты и названия;
- использовалась ли внешняя библиотека Sketch.
Особенно осторожно работайте с внешними Sketch Library. По названию нельзя надёжно определить, какой компонент был источником. Два элемента с одинаковым именем могут иметь разные размеры, состояния и правила переопределения. Если источник библиотеки неизвестен, откройте исходный проект в Sketch и проверьте связь там. При необходимости сопоставьте компоненты по визуальному состоянию, структуре слоёв и назначению, а не только по названию.
Для небольшого проекта иногда достаточно вручную подключить экземпляры к восстановленным главным компонентам. Для дизайн-системы такой подход нужно оценивать отдельно. Если компоненты массово потеряли вложенность, варианты или переопределения, быстрее может оказаться контролируемая реконструкция библиотеки, чем исправление каждого экрана.
Плюсы исправления в Figma:
- не требуется возвращать весь проект в исходный редактор;
- удобно сразу проверить совместную работу команды;
- легко вести список расхождений рядом с макетом.
Ограничения:
- импорт не восстанавливает автоматически исходную архитектуру библиотеки;
- одинаковый внешний вид может скрывать разорванную связь;
- ручное восстановление увеличивает объём проверки;
- ошибки в главных компонентах распространяются на множество экранов.
Проверьте стили и сложные эффекты по назначению проекта
Общие цвета и текстовые стили нужно сопоставлять отдельно от компонентов. Figma описывает стили как самостоятельные переиспользуемые сущности, которые создаются и распространяются в рамках её собственной модели (руководство Figma по стилям). Поэтому визуальное совпадение цвета не доказывает, что связь со стилем сохранена.
Создайте журнал проверки с такими колонками:
| Объект | В исходном Sketch | После импорта в Figma | Решение |
|---|---|---|---|
| Цветовые стили | имя, значение, область применения | сохранён, изменён или локальный цвет | оставить, пересоздать или подтвердить |
| Текстовые стили | семейство, вес, размер, интерлиньяж | совпадает или требует замены | проверить на ключевых экранах |
| Тени | параметры и порядок эффектов | визуально совпадает или отличается | принять или настроить вручную |
| Градиенты | остановки цвета и направление | сохранены частично или изменены | пересобрать при необходимости |
| Маски | структура и область действия | корректна или нарушена | проверить на экспортируемом экране |
| Изображения | источник и масштабирование | доступны или отсутствуют | заменить, перелинковать или запросить ресурс |
Сначала определите цель миграции. Для статичной презентации приоритетом является визуальное совпадение ключевых экранов и корректный экспорт. Для поддерживаемой дизайн-системы этого недостаточно: важны имена стилей, повторное использование, главные компоненты, состояния и понятная структура.
Сложные эффекты проверяйте на контрастных фрагментах. Тень может выглядеть почти так же на светлом фоне, но отличаться на цветном. Градиент может сохранить общий оттенок, но потерять точное направление. Маска может выглядеть правильной в редакторе и дать ошибку при экспорте. Не отмечайте такой объект как «исправленный» только по беглому просмотру.
Разберите проблемы с импортом и ресурсами
Если Figma не импортирует .sketch, начните не с повторных попыток, а с проверки исходника. Sketch рекомендует открывать и просматривать документы в нативном приложении; сведения о создании и открытии документов собраны в официальной документации Sketch.
Порядок действий:
- Сделайте копию исходного файла и не работайте на единственном экземпляре.
- Откройте копию в стабильной версии Sketch.
- Проверьте, отображаются ли все страницы и артборды.
- Найдите пустые изображения, отсутствующие библиотеки и повреждённые группы.
- Сохраните очищенную копию под новым именем.
- Если файл большой или содержит много исторических страниц, разделите копию по функциональным блокам.
- Импортируйте части по очереди и фиксируйте, на каком блоке появляется сбой.
- Сравните проблемный блок с исходником и решите, нужно ли пересобрать его до переноса.
Документация Sketch отдельно описывает возможности импорта и экспорта, но это не является гарантией беспроблемного переноса любого исторического файла (документация Sketch по импорту и экспорту). Большой документ может не пройти импорт из-за повреждённых данных, отсутствующих ресурсов или особенностей старой версии. Точный источник проблемы нужно устанавливать на конкретной копии.
Если изображения отсутствуют, запросите оригинальные ассеты и проверьте их разрешение, формат и способ размещения. Не подменяйте их случайными файлами только ради того, чтобы экран выглядел заполненным. Такая подмена исказит результаты приёмки.
Проведите приёмку и выберите маршрут исправления
После локальных правок не проверяйте только главную страницу. Составьте маршрут по типам риска. Минимальный набор должен включать текстовый экран, экран с компонентами, сложный визуальный эффект и страницу с ассетами.
Используйте чек-лист перед передачей проекта:
- [ ] Исходный
.sketchсохранён без изменений. - [ ] Рабочая копия Sketch подписана отдельно от оригинала.
- [ ] Импортированный Figma-файл сохранён как самостоятельная версия.
- [ ] Эталонные скриншоты привязаны к конкретным страницам и состояниям.
- [ ] Проверены семейства шрифтов, веса и версии.
- [ ] Сопоставлены переносы строк, высота текстовых блоков и кнопки.
- [ ] Найдены главные компоненты и проверены их экземпляры.
- [ ] Проверены переопределения и вложенные связи.
- [ ] Цветовые и текстовые стили отмечены как сохранённые, пересозданные или локальные.
- [ ] Проверены тени, градиенты, маски и режимы наложения.
- [ ] Изображения открываются и экспортируются без замены «на глаз».
- [ ] Зафиксированы нерешённые расхождения и ответственные за них.
- [ ] Сохранены статические эталоны для последующей проверки.
По результатам выбирайте один из трёх маршрутов.
Исправление внутри Figma. Подходит, если проблема локальная: один шрифт, несколько цветов, отдельные изображения или небольшая группа компонентов. Сохраняйте список изменений, чтобы следующий дизайнер понимал, что было исправлено вручную.
Повторная проверка через удалённый Mac. Нужна, если отсутствует собственный Mac, а источник нельзя открыть и проверить на Windows. В среде MACCOME можно временно получить доступ к настоящему Mac через VNC, SSH или веб-консоль. Такой вариант оправдан для разовой миграции, проверки библиотеки, подготовки исходника и повторного импорта.
Перед использованием проверьте варианты аренды Mac mini для вашего региона. Для команды, которой важен конкретный маршрут подключения, можно отдельно изучить доступные площадки MACCOME.
Реконструкция дизайн-системы. Выбирайте её, если импортированный файл визуально похож, но компоненты, стили и состояния больше нельзя надёжно поддерживать. В этом случае не маскируйте проблему ручным выравниванием страниц. Сначала определите базовые токены, главные компоненты и правила использования, затем переносите экраны на проверенную основу.
Что делать, если Mac нет совсем
Без собственного Mac вы можете продолжать работу с импортированным файлом Figma, если проблема ограничена уже перенесёнными слоями и у вас доступны нужные шрифты. Но вы не сможете полноценно проверить исходный .sketch в среде, для которой предназначен этот рабочий процесс. Это важно, когда нужно выяснить, была ли ошибка в источнике, библиотеке или самом импорте.
Временный удалённый Mac имеет смысл, когда:
- исходник нужно открыть и пересохранить;
- требуется проверить внешнюю Sketch Library;
- нужно сравнить оригинальные Symbols с импортированными компонентами;
- файл не импортируется и его необходимо разделить;
- дизайнер работает на Windows, но отвечает за финальную приёмку.
У такого решения есть ограничения. Качество работы зависит от задержки соединения, передачи файлов и доступа к локальным шрифтам. Поэтому сначала проведите короткую проверку: откройте исходник, найдите ключевую библиотеку, проверьте шрифты и экспортируйте один контрольный экран. Только после этого переносите весь проект.
Не выбирайте аренду, если вы постоянно поддерживаете крупную систему, нуждаетесь в физических периферийных устройствах или хотите выполнять длительную тяжёлую работу каждый день. В этих случаях собственный Mac может быть предсказуемее. Для редких миграций временная среда обычно рациональнее покупки отдельного компьютера, который большую часть времени простаивает.
Зафиксируйте результат для следующего участника
Финальная папка проекта должна позволять восстановить ход миграции без устных пояснений. Передайте:
- исходный Sketch-файл;
- рабочую копию после проверки;
- импортированный файл Figma;
- таблицу расхождений;
- список отсутствующих шрифтов и ресурсов;
- статические эталоны;
- решение по компонентам и стилям;
- отметку о том, какие элементы проверялись в нативном Sketch;
- перечень нерешённых ограничений.
Особенно полезно разделять «визуально принято» и «структурно принято». Экран может выглядеть правильно, но содержать локальные цвета, отсоединённые компоненты или заменённый шрифт. Для презентации это может быть допустимо. Для дизайн-системы — нет.
Если текущий процесс строится вокруг Windows и только иногда требует открытия Sketch, постоянная локальная покупка Mac создаёт лишние расходы на устройство, обслуживание и обновление рабочего места. При этом браузерный Figma не решает проблему проверки исходного файла, а попытка исправить всё вручную повышает риск незаметных расхождений в шрифтах, компонентах и эффектах. В таком сценарии временная аренда Mac через MACCOME даёт более узкое и управляемое решение: открыть оригинал, подготовить копию, проверить перенос и вернуть команде документ с понятным журналом приёмки. Начать можно с регионального оформления аренды Mac mini в MACCOME, а затем решить, нужен ли вам долгосрочный Mac-процесс.
Главное правило миграции простое: не заменяйте исходник импортированным файлом. Сначала установите источник расхождения, затем исправляйте только подтверждённую проблему и завершайте работу проверкой, которую сможет повторить другой участник команды.