Случился глюк и потёрлись комментарии. Там было много приятного. Приношу извинения. Но не будем плакать.. ) Из важного: - Для чего Union, почему не оставить только Vector? - Потому что такая структура позволяет перерисовать или заменить иконку (Vector) и не сбросить цвета всем во всех макетах. Мы же про большую дизайн-систему говорим. --- - Хочу оставить линиями (Stroke) - Вам сюда ruclips.net/video/5FynbpRIJIs/видео.html --- - 20 минут рассказывать о Compound Path? - Это видео не про «правильный» вектор, а про продуктовые иконки в Figma ---
Виктор, примите мою благодарность от всего сердца. Смотрела его еще давно, но не применяла этот приём, т.к. еще училась и не особо это нужно было. А тут на реальном кейсе застряла, и сразу вспомнила этот туториал. Круто! Продолжайте, пожалуйста!
Да уж, а я мучился )) постоянно проблема была, что на сложных иконках какая-то деталька не красилась, я конечно способ нашел как побороть, но тут куда лаконичнее, спасибо! И про удаление точек через Shift+Del не знал, ваши видео как всегда полны пользы ))
Витя, ты псих в хорошем смысле этого слова. Что ни видео по фигме, так забираю себе в арсенал какой-нибудь хак) Ctrl+j на точках имба просто, а shiftl+del вообще спасение. Да и в целом крутое полезное видео!
Виктор, спасибо за ролик. Использую этот метод для иконок. Еще есть способ быстрее переименовать Union в Vector (13:40). Просто выделить Union и через Rename Заменить на Vector, но нужно быть внимательным, потому что могут встречаться Vector(Stroke) вместо Union.
Виктор, спасибо! По делу все! Единственное не очень понял, зачем делать именно Union, почему нельзя оставить просто Vector? Есть какие-то слабости, если не обернуть в Union?
Привет, Виктор! В нашей ДС использую только один слой Vector без обертки Union, подскажи для чего нужен еще один обертывающий слой? Цвета ведь не слетают, все работает
Большое спасибо за видео! Для меня оно было очень полезно, записала основные моменты в блокнотик и пошла внедрять :) Видела, что в комментариях спрашивали, актуально ли еще использовать Union или Vector всё и так держит. Скажите, удалось ли проверить этот момент?
Отступы для Иконок. Это же прям как про окрошку на чём делать - делать ли отступы у векторного слоя иконки или нет? Контейнер 24 px, отступ и там ужо вектор. По мнению моего несостоявшегося работодателя тепловские иконки без отступа доказывают, что он лох в дизайне, это выдаёт его непрофессионализм :)
Непрофессионализм - это бездумно следовать правилам которые даже не сам придумал. А то, что я лох в дизайне, общедоступная информация. Именно поэтому я продолжаю учиться )
32px x 32px - Размер иконки (фрейма) , отступы 2px, толщина линии 2px, если в иконке много объектов или линий к примеру отпечаток пальца, то используется 1.5px толщина. Далее по аналогии: размер фрейма 24px x 24px, отступ 1.5px, толщина 1.5px. Размер фрейма 20px x 20px, толщина линии 1.25 и отступ 1.25. Размер фрейма 16px x 16px, толщина и отступ 1px. Можно задать любое из этих значений: 32, 24, 20, 16 и выставить правильный отступ внутри. К примеру берем 24px на 24px фрейм, отступ делаем 1.5px (важно чтобы отступ был хотя бы с одной позиции: верх/низ или право/лево, бывает отступ верх/низ 1.25, а право/лево 2) главное чтобы был не меньше 1.25. И тогда при увеличении/уменьшении иконки у нас будет отступ как я описал выше. Лучше всего делать с размером 32х32, чтобы задать отступ внутри 2px, а потом уменьшать уже если нужно. Просто на видео фрейм 24х24, а отступ 1px, что нарушает систему. Если мы зададим фрейму размер 32х32, то отступ будет не 2px. Есть система, который никто не придерживается, точнее единицы. Странно почему.
![[0024] Практика. Figma. Рисуем иконки (начало)](http://i.ytimg.com/vi/Wsog2seZjus/mqdefault.jpg)
![[0024] Практика. Figma. Рисуем иконки (начало)](/img/tr.png)
Случился глюк и потёрлись комментарии. Там было много приятного.
Приношу извинения. Но не будем плакать.. )
Из важного:
- Для чего Union, почему не оставить только Vector?
- Потому что такая структура позволяет перерисовать или заменить иконку (Vector) и не сбросить цвета всем во всех макетах. Мы же про большую дизайн-систему говорим.
---
- Хочу оставить линиями (Stroke)
- Вам сюда ruclips.net/video/5FynbpRIJIs/видео.html
---
- 20 минут рассказывать о Compound Path?
- Это видео не про «правильный» вектор, а про продуктовые иконки в Figma
---
Солнышко, ты вернулся! Ну наконец то! Очень соскучились по этим милым рубрикам про пистончики и штепсельки (надеюсь, тоже будут!).
Очень круто, даже удаление точек с шифтом для меня открытие было. Огромное спасибо!
Как же приятно, когда строго по делу и без тупых шуточек
Это очень крутой гайд) спасибо!!! узнала несколько крутых лайф хаков❤ Автор, лучи любви тебе от коллеги
Как всегда огонь! Каждый раз жду ваши уроки!
Виктор, примите мою благодарность от всего сердца. Смотрела его еще давно, но не применяла этот приём, т.к. еще училась и не особо это нужно было. А тут на реальном кейсе застряла, и сразу вспомнила этот туториал. Круто! Продолжайте, пожалуйста!
Очень грамотный и наглядный туториал. Большое спасибо за видео!
Спасибо за такую полезную информацию 😊 Недавно только мучалась, а тут еще один подход к решению. Ну и тебя, как обычно, очень приятно слушать)
Залитое сердечко не переименовал) Спасибо, Вить, за порядок и годноту!
заметил поздно и решил не переписывать уже видос. Печеньку за наблюдательность
Да уж, а я мучился )) постоянно проблема была, что на сложных иконках какая-то деталька не красилась, я конечно способ нашел как побороть, но тут куда лаконичнее, спасибо! И про удаление точек через Shift+Del не знал, ваши видео как всегда полны пользы ))
Только вчера обсуждали с коллегами, мол, как жаль, что у тебя не 48 часов в сутках и ты не можешь вести канал чаще 😂
Благодарствую добрый человек что поделился опытом!
Виктор, спасибо за видео!) Как всегда понятно и познавательно!
Круто! Думал, что хорошо знал фигму, рад ошибаться)
Витя, ты псих в хорошем смысле этого слова. Что ни видео по фигме, так забираю себе в арсенал какой-нибудь хак) Ctrl+j на точках имба просто, а shiftl+del вообще спасение. Да и в целом крутое полезное видео!
Было полезно. Я не знал таких нюансов. Спасибо!
Витя, огромное спасибо! Твои видео - это просто пушка
Автор красава! Большое спасибо за информативное видео! 🔥
А дизайн-системы Озона нет в публичном доступе поглядеть и обалдеть от проделанной работы?
Нет. Не публичим. Это отдельная боььшая задача, не всегда оправданная
👏 божественно круто, впрочем как всегда))
Просто топ! Наконец-то мне не придется страдать!
Спасибо за Ваш труд
Отлично! Все понятно. Еще и новые функции фигмы вплетаются (swap instance), в прошлых пуленепробиваемых иконках вроде такого не было еще.
В прошлом решении можно использовать вынос настроек вложенных компонентов на уровень родителя
Виктор, спасибо за ролик. Использую этот метод для иконок.
Еще есть способ быстрее переименовать Union в Vector (13:40). Просто выделить Union и через Rename Заменить на Vector, но нужно быть внимательным, потому что могут встречаться Vector(Stroke) вместо Union.
Спасибо, полезный хак!
Cool! Thank you, Viktor.
крутой мужик. Всегда смотрю)
не устаю благодарить!
Решение с Union огонь!
забыл объяснить что значит пуленепробиваемость иконок
Виктор, спасибо! По делу все!
Единственное не очень понял, зачем делать именно Union, почему нельзя оставить просто Vector? Есть какие-то слабости, если не обернуть в Union?
Возможно это рудимент. Нужно провести испытания
Жду от вас видео на тему AI 😊
Круто, спасибо 😌
Спасибо!
очень хочется посмотреть подход: состояния иконок через маску (сама иконка + bg)
Хмм... Решение интересное. Но я просто блокирую иконку внутри фрейма и фронт, при инспекте, никогда не промахивается. Выбирает всегда фрейм с иконкой.
Привет, Виктор! В нашей ДС использую только один слой Vector без обертки Union, подскажи для чего нужен еще один обертывающий слой? Цвета ведь не слетают, все работает
Чтобы можно было заменить сам глиф (vector). При обновлении иконки.
Витя ты гений
спасибо
Круто как всегда, спасибо за гайд, влетело в подкорочку
спасибо! а у вас есть специальные сетки для иконок (grids)?
У нас есть рекомендованные охранные зоны
Большое спасибо за видео! Для меня оно было очень полезно, записала основные моменты в блокнотик и пошла внедрять :) Видела, что в комментариях спрашивали, актуально ли еще использовать Union или Vector всё и так держит. Скажите, удалось ли проверить этот момент?
@@AnastasiaBodrova-n8c у юнион есть и другая задача. Он позволяет изменять глиф иконки без потери оверрайдов в сценариях
@@zen-designer пришлось использовать чатгпт чтобы перевести этот комментарий)
Метод хороший, но мне не помогло. У меня есть мастер кнопки и отдельно 4 фрейма варианта. Так вот там при ресайзах цвет не передается
Приветствую! Спасибо за видео по фигме. Будут ли видео о Zettelkasten и Obsidian как раньше?
Если найду время
Этот подход ещё актуален?
как так ловко проваливаться в слои у нескольких выделенных обхектов? искала такой хоткей, но не нашла.
спасибо за видео!
Так Enter. А Shift+Enter вываливаться
Годно
А у иконок с обводками есть способ добиться пуленепробиваемости?
У меня на канале есть видео про такие иконки
Виктор, привет! Спасибо за видео. Расскажи пожалуйста, в чём основные плюсы и минусы двух способов: этим и с использованием icon-container
Этот более надёжный, но и более трудоёмкий
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Отступы для Иконок. Это же прям как про окрошку на чём делать - делать ли отступы у векторного слоя иконки или нет? Контейнер 24 px, отступ и там ужо вектор. По мнению моего несостоявшегося работодателя тепловские иконки без отступа доказывают, что он лох в дизайне, это выдаёт его непрофессионализм :)
Непрофессионализм - это бездумно следовать правилам которые даже не сам придумал. А то, что я лох в дизайне, общедоступная информация. Именно поэтому я продолжаю учиться )
32px x 32px - Размер иконки (фрейма) , отступы 2px, толщина линии 2px, если в иконке много объектов или линий к примеру отпечаток пальца, то используется 1.5px толщина. Далее по аналогии: размер фрейма 24px x 24px, отступ 1.5px, толщина 1.5px. Размер фрейма 20px x 20px, толщина линии 1.25 и отступ 1.25. Размер фрейма 16px x 16px, толщина и отступ 1px. Можно задать любое из этих значений: 32, 24, 20, 16 и выставить правильный отступ внутри. К примеру берем 24px на 24px фрейм, отступ делаем 1.5px (важно чтобы отступ был хотя бы с одной позиции: верх/низ или право/лево, бывает отступ верх/низ 1.25, а право/лево 2) главное чтобы был не меньше 1.25. И тогда при увеличении/уменьшении иконки у нас будет отступ как я описал выше. Лучше всего делать с размером 32х32, чтобы задать отступ внутри 2px, а потом уменьшать уже если нужно. Просто на видео фрейм 24х24, а отступ 1px, что нарушает систему. Если мы зададим фрейму размер 32х32, то отступ будет не 2px. Есть система, который никто не придерживается, точнее единицы. Странно почему.
А зачем Union? Почему мы не могли просто Vector оставить и менять параметры цвета у него?
ЧТобы потом сувать туда чистый любой вектор и ничего не сломалось
А ведь это хороший вопрос. Так сложилось исторически. Возможно я пропустил момент когда Figma починила баг со сбросом цвета. Нужно провести испытания
Ответ в закреплённом комменте
Спасибо за полезное видео! Вопрос, но как в таком методе с flatten сохранять исходник иконки? В будущем может быть необходимо изменить её.
Оставлять дубликат перед обработкой
@@zen-designer хранить его в слоях? Я в рабочем проекте, делал как раз так. Без флаттен просто работал с Union объекта.
Union может безбожно глючить@@AndrewAstract
Виктор, изменилось ли у вас чтото в ведении личной базы знаний? Так интересно!
Особо ничего не изменилось. Obsidian хорошеет сам по себе
заметил, что сегодня перестало работать union
Может ты пытаешься один объект срастить
А размеры векторов не обязательно к целым значениям приводить?
Пиксель перфект наше всё. Но всегда есть исключения
За юнион понятно, а что делать если иконка двухцветная?
В каком плане «что делать»? Сделать аккуратный вектор, раскрасить, отдать фронтам.
Спасибо за урок. А почему цвет сбрасывался иконок в компонентах? Это баг какой то?
Особенности Figma
@@zen-designer у меня постоянно цвета сбрасывались или одна линия одного цвета, а другая другого. Буду переучиваться на ваш способ! Спасибо!!!
@@1vohr3 если нужно оставить линии, есть другой способ. Поищи на канале у меня
@@zen-designer понял, спасибо!