Уроки Figma | Пуленепробиваемые иконки. [Фигма]

Рет қаралды 14,683

Жыл бұрын

Рубрика «Быстрые пистоны». Делаем продуктовые иконки в Фигма.
ВАЖНОЕ:
Figma-чат
t.me/figmachat
Моя фигма-страница
figma.com/@vandesign

Пікірлер: 81

@zen-designer Жыл бұрын

Случился глюк и потёрлись комментарии. Там было много приятного. Приношу извинения. Но не будем плакать.. ) Из важного: - Для чего Union, почему не оставить только Vector? - Потому что такая структура позволяет перерисовать или заменить иконку (Vector) и не сбросить цвета всем во всех макетах. Мы же про большую дизайн-систему говорим. --- - Хочу оставить линиями (Stroke) - Вам сюда kzfaq.info/get/bejne/a6ypocWht6-ueac.html --- - 20 минут рассказывать о Compound Path? - Это видео не про «правильный» вектор, а про продуктовые иконки в Figma ---

@user-vl6rc7fe8e Жыл бұрын

Солнышко, ты вернулся! Ну наконец то! Очень соскучились по этим милым рубрикам про пистончики и штепсельки (надеюсь, тоже будут!).

@dmitrykand5142 Жыл бұрын

Очень круто, даже удаление точек с шифтом для меня открытие было. Огромное спасибо!

@sunuvugun 10 ай бұрын

Как же приятно, когда строго по делу и без тупых шуточек

@bend3r Жыл бұрын

Витя, ты псих в хорошем смысле этого слова. Что ни видео по фигме, так забираю себе в арсенал какой-нибудь хак) Ctrl+j на точках имба просто, а shiftl+del вообще спасение. Да и в целом крутое полезное видео!

@1vohr3 Жыл бұрын

Как всегда огонь! Каждый раз жду ваши уроки!

@Aleksey2342 Жыл бұрын

Очень грамотный и наглядный туториал. Большое спасибо за видео!

@Spirit741979 Жыл бұрын

Залитое сердечко не переименовал) Спасибо, Вить, за порядок и годноту!

@zen-designer Жыл бұрын

заметил поздно и решил не переписывать уже видос. Печеньку за наблюдательность

@just_funk8923 Жыл бұрын

Витя, огромное спасибо! Твои видео - это просто пушка

@user-xz5zd4nm8m Жыл бұрын

Виктор, спасибо за видео!) Как всегда понятно и познавательно!

@anku_onku Жыл бұрын

Спасибо за такую полезную информацию 😊 Недавно только мучалась, а тут еще один подход к решению. Ну и тебя, как обычно, очень приятно слушать)

@yury3548 Жыл бұрын

Только вчера обсуждали с коллегами, мол, как жаль, что у тебя не 48 часов в сутках и ты не можешь вести канал чаще 😂

@valentin9455 Жыл бұрын

👏 божественно круто, впрочем как всегда))

@dobryikot7920 Жыл бұрын

Было полезно. Я не знал таких нюансов. Спасибо!

@iNemezis Жыл бұрын

Да уж, а я мучился )) постоянно проблема была, что на сложных иконках какая-то деталька не красилась, я конечно способ нашел как побороть, но тут куда лаконичнее, спасибо! И про удаление точек через Shift+Del не знал, ваши видео как всегда полны пользы ))

@stascov Жыл бұрын

Благодарствую добрый человек что поделился опытом!

@_GreenSnake_ Жыл бұрын

Спасибо за Ваш труд

@vovanparmesan Жыл бұрын

Круто! Думал, что хорошо знал фигму, рад ошибаться)

@dobryikot7920 Жыл бұрын

крутой мужик. Всегда смотрю)

@lk6618 5 ай бұрын

забыл объяснить что значит пуленепробиваемость иконок

@RodionCebotari Жыл бұрын

Cool! Thank you, Viktor.

@Apricarto Жыл бұрын

Просто топ! Наконец-то мне не придется страдать!

@IrinaVizner-Laur Жыл бұрын

не устаю благодарить!

@IKolpikov Жыл бұрын

Спасибо, полезный хак!

@coooward Жыл бұрын

Автор красава! Большое спасибо за информативное видео! 🔥 А дизайн-системы Озона нет в публичном доступе поглядеть и обалдеть от проделанной работы?

@zen-designer Жыл бұрын

Нет. Не публичим. Это отдельная боььшая задача, не всегда оправданная

@user-bz9go4jy2z Жыл бұрын

Круто, спасибо 😌

@user-mi6mg7nz8x 11 ай бұрын

Виктор, спасибо за ролик. Использую этот метод для иконок. Еще есть способ быстрее переименовать Union в Vector (13:40). Просто выделить Union и через Rename Заменить на Vector, но нужно быть внимательным, потому что могут встречаться Vector(Stroke) вместо Union.

@andreyb3835 Жыл бұрын

Решение с Union огонь!

@timurpozharskiy4880 Жыл бұрын

Отлично! Все понятно. Еще и новые функции фигмы вплетаются (swap instance), в прошлых пуленепробиваемых иконках вроде такого не было еще.

@zen-designer Жыл бұрын

В прошлом решении можно использовать вынос настроек вложенных компонентов на уровень родителя

@Niksenges Жыл бұрын

Виктор, спасибо! По делу все! Единственное не очень понял, зачем делать именно Union, почему нельзя оставить просто Vector? Есть какие-то слабости, если не обернуть в Union?

@zen-designer Жыл бұрын

Возможно это рудимент. Нужно провести испытания

@Evgeni_Feelsogood Жыл бұрын

Спасибо!

@atomicrus Жыл бұрын

Круто как всегда, спасибо за гайд, влетело в подкорочку

@katerinakr1 Ай бұрын

очень хочется посмотреть подход: состояния иконок через маску (сама иконка + bg)

@imyafamiliya9227 Жыл бұрын

Жду от вас видео на тему AI 😊

@alekseisharonov4477 Жыл бұрын

Витя ты гений

@Zagubluk9 Жыл бұрын

Приветствую! Спасибо за видео по фигме. Будут ли видео о Zettelkasten и Obsidian как раньше?

@zen-designer Жыл бұрын

Если найду время

@tantara0686 Жыл бұрын

спасибо

@nsadovski Жыл бұрын

Хмм... Решение интересное. Но я просто блокирую иконку внутри фрейма и фронт, при инспекте, никогда не промахивается. Выбирает всегда фрейм с иконкой.

@orljoy Жыл бұрын

Виктор, привет! Спасибо за видео. Расскажи пожалуйста, в чём основные плюсы и минусы двух способов: этим и с использованием icon-container

@zen-designer Жыл бұрын

Этот более надёжный, но и более трудоёмкий

@byGERart 4 ай бұрын

Метод хороший, но мне не помогло. У меня есть мастер кнопки и отдельно 4 фрейма варианта. Так вот там при ресайзах цвет не передается

@MrMisha9898 3 ай бұрын

Привет, Виктор! В нашей ДС использую только один слой Vector без обертки Union, подскажи для чего нужен еще один обертывающий слой? Цвета ведь не слетают, все работает

@zen-designer 3 ай бұрын

Чтобы можно было заменить сам глиф (vector). При обновлении иконки.

@user-td1zz6hf8m Жыл бұрын

как так ловко проваливаться в слои у нескольких выделенных обхектов? искала такой хоткей, но не нашла. спасибо за видео!

@zen-designer Жыл бұрын

Так Enter. А Shift+Enter вываливаться

@kkashaev Жыл бұрын

спасибо! а у вас есть специальные сетки для иконок (grids)?

@zen-designer Жыл бұрын

У нас есть рекомендованные охранные зоны

@lepermessia4 Жыл бұрын

Годно

@wolfich4684 10 ай бұрын

Виктор, изменилось ли у вас чтото в ведении личной базы знаний? Так интересно!

@zen-designer 10 ай бұрын

Особо ничего не изменилось. Obsidian хорошеет сам по себе

@joker__joker_why_so_seriou2520 Жыл бұрын

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

@AndrewAstract 6 ай бұрын

Спасибо за полезное видео! Вопрос, но как в таком методе с flatten сохранять исходник иконки? В будущем может быть необходимо изменить её.

@zen-designer 6 ай бұрын

Оставлять дубликат перед обработкой

@AndrewAstract 6 ай бұрын

@@zen-designer хранить его в слоях? Я в рабочем проекте, делал как раз так. Без флаттен просто работал с Union объекта.

@zen-designer 6 ай бұрын

Union может безбожно глючить@@AndrewAstract

@Shevchenkoserj Ай бұрын

Этот подход ещё актуален?

@sackboy7521 Жыл бұрын

А размеры векторов не обязательно к целым значениям приводить?

@zen-designer Жыл бұрын

Пиксель перфект наше всё. Но всегда есть исключения

@user-vl6rc7fe8e Жыл бұрын

А у иконок с обводками есть способ добиться пуленепробиваемости?

@zen-designer Жыл бұрын

У меня на канале есть видео про такие иконки

@djeidi009 Жыл бұрын

Спасибо за урок. А почему цвет сбрасывался иконок в компонентах? Это баг какой то?

@zen-designer Жыл бұрын

Особенности Figma

@1vohr3 Жыл бұрын

@@zen-designer у меня постоянно цвета сбрасывались или одна линия одного цвета, а другая другого. Буду переучиваться на ваш способ! Спасибо!!!

@zen-designer Жыл бұрын

@@1vohr3 если нужно оставить линии, есть другой способ. Поищи на канале у меня

@1vohr3 Жыл бұрын

@@zen-designer понял, спасибо!

@Lucifer360tech Жыл бұрын

За юнион понятно, а что делать если иконка двухцветная?

@zen-designer Жыл бұрын

В каком плане «что делать»? Сделать аккуратный вектор, раскрасить, отдать фронтам.

@Apricarto Жыл бұрын

А зачем Union? Почему мы не могли просто Vector оставить и менять параметры цвета у него?

@AlexanderSorokin7 Жыл бұрын

ЧТобы потом сувать туда чистый любой вектор и ничего не сломалось

@zen-designer Жыл бұрын

А ведь это хороший вопрос. Так сложилось исторически. Возможно я пропустил момент когда Figma починила баг со сбросом цвета. Нужно провести испытания

@zen-designer Жыл бұрын

Ответ в закреплённом комменте

@sslarus Жыл бұрын

Отступы для Иконок. Это же прям как про окрошку на чём делать - делать ли отступы у векторного слоя иконки или нет? Контейнер 24 px, отступ и там ужо вектор. По мнению моего несостоявшегося работодателя тепловские иконки без отступа доказывают, что он лох в дизайне, это выдаёт его непрофессионализм :)

@zen-designer Жыл бұрын

Непрофессионализм - это бездумно следовать правилам которые даже не сам придумал. А то, что я лох в дизайне, общедоступная информация. Именно поэтому я продолжаю учиться )

@user-sh1qr1ih3k Жыл бұрын

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. Есть система, который никто не придерживается, точнее единицы. Странно почему.

@andreyb3835 Жыл бұрын

заметил, что сегодня перестало работать union

@zen-designer Жыл бұрын

Может ты пытаешься один объект срастить