Как заменить иконку в компоненте figma
Перейти к содержимому

Как заменить иконку в компоненте figma

  • автор:

Фигма: как обновить иконку, ничего не сломав

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

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

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

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

Не получится сделать новые компоненты
Не получится скопировать все иконки, перерисовать их, и сделать новые компоненты. Сделать новые не проблема, а вот заменить старые на новые не выйдет. Даже если их заменить (через 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: Удалить старый контур. Выделить ненужные точки:

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

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

Как заменить картинку в компоненте Figma?

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

Вопрос в том, как заменить изображение в дочернем компоненте?

Задача такова, нужно сделать плитку с товарами в магазине. Что бы визуально показать список разных товаров.
Текст у дочернего меняю, а вот с картинкой, что бы они разные были разные не получается.
Засунуть картинку в уже готовый дочерний компонент я не могу!
Если отменить формат дочернего компонента, то он потеряет связь с компонентом родителем.

  • Вопрос задан более трёх лет назад
  • 15767 просмотров

1 комментарий

Средний 1 комментарий

Как заменить иконку в компоненте?

Подскажите, пожалуйста, какой комбинацией клавиш в windows можно заменить одну иконку в конпоненте на другую? (компонент состоит только из иконки). В Mac что-то вроде command (так услышала в видео), но альтернативы в windows не нашла.

  • Вопрос задан более года назад
  • 1171 просмотр

4 комментария

Простой 4 комментария

melpnz

Степан Воеводин @melpnz Куратор тега Figma

а не могли бы дать ссылочку на видео? Т.к. попробовал в Mac и такая функция там отсутствует. Скорее всего нужно прожимать какую-то комбинацию клавиш

AlesyaVV @AlesyaVV Автор вопроса

melpnz

Степан Воеводин @melpnz Куратор тега Figma
Теперь я понял о чем речь.
AlesyaVV @AlesyaVV Автор вопроса
Степан Воеводин, спасибо большое!!
Решения вопроса 1

melpnz

Степан Воеводин @melpnz Куратор тега Figma
UX/UI дизайнер

Чтобы заменить один Instance на другой. Открываете панель Assets (справа от вкладки Layers), зажимаете Alt ( Cmd на Mac) и мышкой зажимаете нужный компонент, потом перетаскиваете на Instance, который хотите заменить, и отпускаете мышку.

Но как мне кажется проще изменить Instance через правую панель. Просто нажав на название компонент и заменить на другой.

10 советов по компонентам Figma

Советы и лучшие практики для работы с компонентами Figma Рекомендация: Повторяйте действия за мной в Figma Используйте созданный мной файл Figma Community.

1. Сочетания клавиш для работы с компонентами

  • OPTION + CMD + K= Создать компонент
  • OPTION + CMD + B= Отсоединить экземпляр
  • OPTION + CMD+ O= Командная библиотека
  • OPTION+ 2= Показать панель активов (option + 1 возвращает вас на панель слоев)

Windows:

  • ALT + CTRL + K= Создать компонент
  • ALT + CTRL + B= Отсоединить экземпляр
  • ALT + CTRL + O= Командная библиотека
  • ALT+ 2= Показать панель активов (option + 1 возвращает вас на панель слоев)

2. Поменять местами компоненты

Открыв панель активов (используя option / alt + 2 или shift + I), вы можете перетащить экземпляры компонентов на холст. Если у вас уже есть компонент, попробуйте использовать эти сочетания клавиш при перетаскивании компонента для замены существующего.

3. Именование компонентов

От того, как вы назовете свои компоненты, будет зависеть их организация. Если вы используете разделение косой чертой, Figma сгруппирует эти компоненты в меню экземпляра, что упростит их поиск. Figma использует следующий путь file / page / frame / ** name ** / для организации наших компонентов. Так, например, если у меня есть раскрывающийся компонент, я бы поместил его в отдельный фрейм Figma под названием «Inputs», а затем назвал бы компонент Dropdown / Active. Figma будет использовать это имя для создания папки «Inputs», а затем внутри папки «Dropdown». Вы также можете назвать свой компонент Inputs / Dropdown / Active, если основной компонент не находится внутри фрейма под названием «Inputs».

4. Создавайте компоненты забавной формы

Используя мощь логических операций для вычитания фигур и установки ограничений для этих фигур, мы можем создать аккуратно выглядящие компоненты (Спасибо Роджи Кингу). Для этого следуйте инструкциям Роджи на YouTube (начало с 32:50).

5. Используйте базовые компоненты

Используя базовые компоненты для наборов вариантов, мы можем внести одну корректировку в базовый компонент, и он внесет изменения во все варианты экземпляров. Для этого создайте базовый компонент со всеми элементами, необходимыми в различных вариантах для значений по умолчанию, иконки слева, иконки справа, наведения, активного состояния, ошибки и т. д. Это так же просто, как скрыть ненужные нам элементы в разных вариантах. Также полезно добавить модификатор перед именем компонента, который скроет его из библиотеки, когда вы будете готовы опубликовать компоненты. Для этого добавьте «.» или «_» перед названием компонента (например, «_Profile Card Base»).

6. Меню быстрой вставки

Добавляйте компоненты за секунды с помощью меню быстрой вставки.

7. Следуйте принципам атомарного дизайна

Атомарный дизайн Брэда Фроста – это методология создания дизайн-систем. Она помогает нам организовать компоненты для эффективного масштабирования нашей дизайн-системы и поддерживать порядок внутри вложенных компонентов. В атомарном дизайне есть пять различных уровней:

Атомы – это основные строительные блоки, такие как метка формы, поле ввода или кнопка.

Молекулы – это группы атомов, связанных вместе, например, метка формы, ввод и кнопка, объединенные вместе в форму.

Организмы состоят из похожих и / или разных типов молекул. Например, организм «шапка сайта» может состоять из различных компонентов, таких как логотип, основная навигация, поиск и список каналов социальных сетей.

Шаблоны конкретны и предоставляют контекст для всех этих относительно абстрактных молекул и организмов. Шаблоны – это то место, где клиенты начинают видеть окончательный дизайн. Со временем повышается точность шаблонов и в итоге они становятся конечным результатом.

Страницы – это особые экземпляры шаблонов. Здесь контент-плейсхолдер заменяется реальным репрезентативным контентом, чтобы дать точное представление о том, что в конечном итоге увидит пользователь. Чтобы узнать больше, посмотрите это видео на YouTube и прочтите книгу Брэда Фроста «Атомарный дизайн»

8. Используйте компоненты слота

Слоты позволяют использовать плейсхолдер, который мы можем заменить нужным нам контентом. Например, создать модальный компонент может быть не просто, потому что не все модальные окна будут иметь внутри себя одинаковый контент. Чтобы решить эту проблему, мы можем использовать технику под названием «слоты» (спасибо, Rogie, Ben Adelt, и Ridd). Просто вставьте компонент слота туда, где вам понадобится гибкий контент, и при необходимости поменяйте его.

9. Используйте несколько библиотек

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

  • мобильные компоненты
  • десктопные компоненты
  • активы бренда и цвета
  • и так далее…

10. Экспериментируйте с компонентами

Загрузите файл сообщества, чтобы поэкспериментировать с ним. Компоненты очень универсальны и могут использоваться для создания самых разных вещей, например, анимации с использованием интерактивных компонентов или забавных паттернов. Используя плагин и компоненты Rotate Copies, можно создавать забавные и динамичные арты прямо внутри Figma!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *