Случился глюк и потёрлись комментарии. Там было много приятного. Приношу извинения. Но не будем плакать.. ) Из важного: - Для чего Union, почему не оставить только Vector? - Потому что такая структура позволяет перерисовать или заменить иконку (Vector) и не сбросить цвета всем во всех макетах. Мы же про большую дизайн-систему говорим. --- - Хочу оставить линиями (Stroke) - Вам сюда czcams.com/video/5FynbpRIJIs/video.html --- - 20 минут рассказывать о Compound Path? - Это видео не про «правильный» вектор, а про продуктовые иконки в Figma ---
Витя, ты псих в хорошем смысле этого слова. Что ни видео по фигме, так забираю себе в арсенал какой-нибудь хак) Ctrl+j на точках имба просто, а shiftl+del вообще спасение. Да и в целом крутое полезное видео!
Да уж, а я мучился )) постоянно проблема была, что на сложных иконках какая-то деталька не красилась, я конечно способ нашел как побороть, но тут куда лаконичнее, спасибо! И про удаление точек через Shift+Del не знал, ваши видео как всегда полны пользы ))
Виктор, спасибо за ролик. Использую этот метод для иконок. Еще есть способ быстрее переименовать Union в Vector (13:40). Просто выделить Union и через Rename Заменить на Vector, но нужно быть внимательным, потому что могут встречаться Vector(Stroke) вместо Union.
Виктор, спасибо! По делу все! Единственное не очень понял, зачем делать именно Union, почему нельзя оставить просто Vector? Есть какие-то слабости, если не обернуть в Union?
Большое спасибо за видео! Для меня оно было очень полезно, записала основные моменты в блокнотик и пошла внедрять :) Видела, что в комментариях спрашивали, актуально ли еще использовать Union или Vector всё и так держит. Скажите, удалось ли проверить этот момент?
Привет, Виктор! В нашей ДС использую только один слой Vector без обертки Union, подскажи для чего нужен еще один обертывающий слой? Цвета ведь не слетают, все работает
Отступы для Иконок. Это же прям как про окрошку на чём делать - делать ли отступы у векторного слоя иконки или нет? Контейнер 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. Есть система, который никто не придерживается, точнее единицы. Странно почему.
![Уроки Figma. Как подготовить файл для печати в CMYK 300 dpi [Фигма уроки]](/img/n.gif)
Случился глюк и потёрлись комментарии. Там было много приятного.
Приношу извинения. Но не будем плакать.. )
Из важного:
- Для чего Union, почему не оставить только Vector?
- Потому что такая структура позволяет перерисовать или заменить иконку (Vector) и не сбросить цвета всем во всех макетах. Мы же про большую дизайн-систему говорим.
---
- Хочу оставить линиями (Stroke)
- Вам сюда czcams.com/video/5FynbpRIJIs/video.html
---
- 20 минут рассказывать о Compound Path?
- Это видео не про «правильный» вектор, а про продуктовые иконки в Figma
---
Солнышко, ты вернулся! Ну наконец то! Очень соскучились по этим милым рубрикам про пистончики и штепсельки (надеюсь, тоже будут!).
Очень круто, даже удаление точек с шифтом для меня открытие было. Огромное спасибо!
Как же приятно, когда строго по делу и без тупых шуточек
Спасибо за такую полезную информацию 😊 Недавно только мучалась, а тут еще один подход к решению. Ну и тебя, как обычно, очень приятно слушать)
Очень грамотный и наглядный туториал. Большое спасибо за видео!
Как всегда огонь! Каждый раз жду ваши уроки!
Витя, ты псих в хорошем смысле этого слова. Что ни видео по фигме, так забираю себе в арсенал какой-нибудь хак) Ctrl+j на точках имба просто, а shiftl+del вообще спасение. Да и в целом крутое полезное видео!
Виктор, спасибо за видео!) Как всегда понятно и познавательно!
Только вчера обсуждали с коллегами, мол, как жаль, что у тебя не 48 часов в сутках и ты не можешь вести канал чаще 😂
Витя, огромное спасибо! Твои видео - это просто пушка
Залитое сердечко не переименовал) Спасибо, Вить, за порядок и годноту!
заметил поздно и решил не переписывать уже видос. Печеньку за наблюдательность
Да уж, а я мучился )) постоянно проблема была, что на сложных иконках какая-то деталька не красилась, я конечно способ нашел как побороть, но тут куда лаконичнее, спасибо! И про удаление точек через Shift+Del не знал, ваши видео как всегда полны пользы ))
👏 божественно круто, впрочем как всегда))
Благодарствую добрый человек что поделился опытом!
Было полезно. Я не знал таких нюансов. Спасибо!
Круто! Думал, что хорошо знал фигму, рад ошибаться)
Просто топ! Наконец-то мне не придется страдать!
Виктор, спасибо за ролик. Использую этот метод для иконок.
Еще есть способ быстрее переименовать Union в Vector (13:40). Просто выделить Union и через Rename Заменить на Vector, но нужно быть внимательным, потому что могут встречаться Vector(Stroke) вместо Union.
Спасибо за Ваш труд
крутой мужик. Всегда смотрю)
Cool! Thank you, Viktor.
Круто, спасибо 😌
Отлично! Все понятно. Еще и новые функции фигмы вплетаются (swap instance), в прошлых пуленепробиваемых иконках вроде такого не было еще.
В прошлом решении можно использовать вынос настроек вложенных компонентов на уровень родителя
не устаю благодарить!
забыл объяснить что значит пуленепробиваемость иконок
Спасибо, полезный хак!
Решение с Union огонь!
Автор красава! Большое спасибо за информативное видео! 🔥
А дизайн-системы Озона нет в публичном доступе поглядеть и обалдеть от проделанной работы?
Нет. Не публичим. Это отдельная боььшая задача, не всегда оправданная
Спасибо!
Витя ты гений
Круто как всегда, спасибо за гайд, влетело в подкорочку
Жду от вас видео на тему AI 😊
Виктор, спасибо! По делу все!
Единственное не очень понял, зачем делать именно Union, почему нельзя оставить просто Vector? Есть какие-то слабости, если не обернуть в Union?
Возможно это рудимент. Нужно провести испытания
очень хочется посмотреть подход: состояния иконок через маску (сама иконка + bg)
Годно
спасибо
Приветствую! Спасибо за видео по фигме. Будут ли видео о Zettelkasten и Obsidian как раньше?
Если найду время
Большое спасибо за видео! Для меня оно было очень полезно, записала основные моменты в блокнотик и пошла внедрять :) Видела, что в комментариях спрашивали, актуально ли еще использовать Union или Vector всё и так держит. Скажите, удалось ли проверить этот момент?
@@AnastasiaBodrova-n8c у юнион есть и другая задача. Он позволяет изменять глиф иконки без потери оверрайдов в сценариях
Привет, Виктор! В нашей ДС использую только один слой Vector без обертки Union, подскажи для чего нужен еще один обертывающий слой? Цвета ведь не слетают, все работает
Чтобы можно было заменить сам глиф (vector). При обновлении иконки.
как так ловко проваливаться в слои у нескольких выделенных обхектов? искала такой хоткей, но не нашла.
спасибо за видео!
Так Enter. А Shift+Enter вываливаться
Метод хороший, но мне не помогло. У меня есть мастер кнопки и отдельно 4 фрейма варианта. Так вот там при ресайзах цвет не передается
Хмм... Решение интересное. Но я просто блокирую иконку внутри фрейма и фронт, при инспекте, никогда не промахивается. Выбирает всегда фрейм с иконкой.
Виктор, привет! Спасибо за видео. Расскажи пожалуйста, в чём основные плюсы и минусы двух способов: этим и с использованием icon-container
Этот более надёжный, но и более трудоёмкий
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
спасибо! а у вас есть специальные сетки для иконок (grids)?
У нас есть рекомендованные охранные зоны
Виктор, изменилось ли у вас чтото в ведении личной базы знаний? Так интересно!
Особо ничего не изменилось. Obsidian хорошеет сам по себе
Спасибо за полезное видео! Вопрос, но как в таком методе с flatten сохранять исходник иконки? В будущем может быть необходимо изменить её.
Оставлять дубликат перед обработкой
@@zen-designer хранить его в слоях? Я в рабочем проекте, делал как раз так. Без флаттен просто работал с Union объекта.
Union может безбожно глючить@@AndrewAstract
Этот подход ещё актуален?
А у иконок с обводками есть способ добиться пуленепробиваемости?
У меня на канале есть видео про такие иконки
Отступы для Иконок. Это же прям как про окрошку на чём делать - делать ли отступы у векторного слоя иконки или нет? Контейнер 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 починила баг со сбросом цвета. Нужно провести испытания
Ответ в закреплённом комменте
Спасибо за урок. А почему цвет сбрасывался иконок в компонентах? Это баг какой то?
Особенности Figma
@@zen-designer у меня постоянно цвета сбрасывались или одна линия одного цвета, а другая другого. Буду переучиваться на ваш способ! Спасибо!!!
@@1vohr3 если нужно оставить линии, есть другой способ. Поищи на канале у меня
@@zen-designer понял, спасибо!
заметил, что сегодня перестало работать union
Может ты пытаешься один объект срастить