Скетч-дизайнер

#плагины №16 Symbol Swapper: подменяем библиотеку в макетах

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

Теперь UI-кита стало два: UI-kit_old.sketch, и UI-kit_new.sketch.

Проблема: все символы в макетах по-прежнему тянутся из UI-kit_old, а нам нужно делать новые макеты по новому киту. Переключать каждый символ в макете вручную на новую библиотеку UI-kit_new — это не наш метод. На помощь придёт плагин Symbol Swapper, который умеет сканировать весь файл на наличие символов и массово переключать им источник мастера.

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

Плагин доступен в Раннере или на Гитхабе. Поблагодарить автора можно через Пейпал.

Учимся его использовать на кошках

Я подготовил две простейшие библиотеки с единственным символом, смотри архив. В библиотеках иконка звезды разных цветов, в старом она зелёная, в новом синяя. В файле maket.sketch звезда используется много раз и выделить все экземпляры неудобно, потому что мешают посторонние элементы. Переключать её вручную неэффективно. Наша задача — заменить символ звезды за минимум действий.

1. Скачиваем файлы примера: maket.sketch, library-star-old.sketch, library-star-new.sketch.

2. Подключаем последние два как библиотеки: Preferences → Libraries → Add Library...

3. Открываем maket.sketch. В нём символ с зелёной звездой, который тянется из библиотеки UI-kit_old.

4. Вызываем окно Plugins → Symbol Swapper → Symbol Swap Libraries.

5. В нём видим библиотеку, которая используются в этом файле. Их может быть несколько. Переключаем библиотеку на library-star-new.

6. Ждём, пока загорится кнопка Library Updates Available. Это может занять до 5 секунд. Делаем апдейт. Теперь символ звезды тянется из library-star-new и поэтому везде становится синим.

—

#для_профи