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

Ситуация

У нас в одном из продуктов был пакет иконок, которые мы хотели обновить. С момента создания иконки в пакете потеряли консистентность, некоторые и сразу были нарисованы не очень удачно.

Задача была обновить иконки, не потеряв оверрайды в макетах.

Допустим, иконки выглядит вот так (слева — старая, справа — новая):

Нужно обновить все иконки сразу
Перерисовывать иконки по одной прямо в компонентах — не вариант: в макеты пролезут недоделанные варианты. Хочется сначала нарисовать их, сравнить со старыми, проверить и отладить, а потом уже обновить все иконки сразу.

Не получится сделать новые компоненты
Не получится скопировать все иконки, перерисовать их, и сделать новые компоненты. Сделать новые не проблема, а вот заменить старые на новые не выйдет. Даже если их заменить (через Select All with Same Instance), то все инстансы компонентов потеряют оверрайды цвета. При замене компонента на другой из всех оверрайдов фигма сохраняет только текст, все остальное сбрасывается. Можно воспользоваться плагинами Reattach Instance или Master, но все равно это достаточно муторно.

В фигме нет очевидного способа заменить внутренности иконки
Если удалить старый shape и заменить его на новый, то слетят цвета всех оверрайдов — задолбаться исправлять. Будет вот так:

Для замены контура иконки не помогает ни union (добавить новый контур, сделать union со старым, удалить старый), ни flatten (добавить новый контур, сделать ему flatten со старым). Все способы добавления нового контура не работают, нужно использовать именно старый.

Решение

На помощь приходят Vector Networks. У фигмы в одном контуре могут быть сложные конструкции, которые называются Vector Networks. Можно воспользоваться ими, покажу на картинках.

Шаг 1: Скопировать старый контур. Нужно зайти в режим редактирования контура (Enter ):

Выделить все точки (⌘ + A ) и скопировать их (⌘ + C ):

Шаг 2: Добавить новый контур к старому. Нужно зайти в режим редактирования контура в компоненте (Enter):

Выделить все точки (⌘ + A ) и скопировать их (⌘ + C ):

Сдвинуть выделенные точки контура куда-нибудь подальше:

Добавить точки из буфера обмена (⌘ + V ). Обратите внимание, что новый контур добавился и не сломал оверрайды (два кольца одинакового цвета):

Шаг 3: Удалить старый контур. Выделить ненужные точки:

И удалить их (⌫ ):

Вуаля.

На всякий случай скринкаст: