Уроки Figma | Пуленепробиваемые иконки. [Фигма]
Vložit
- čas přidán 28. 05. 2020
- Рубрика «Быстрые пистоны». Делаем смарт-иконки в Фигма.
ВАЖНОЕ:
Figma-чат
t.me/figmachat
Моя фигма-страница
figma.com/@vandesign
Книга «Руководство по Figma»
/ figma-guide
Фигма.хелп
figma.help
🧰 Уроки Figma на русском.
Фигма - это бесплатная онлайн программа для дизайна web и UI. Приложения для Windows, Mac OS, Android (Material design) и iOS. Программу можно скачать на сайте www.figma.com. Торрент не нужен! ))
• Как сделать в Фигме свой первый сайт.
• Как использовать сетки и направляющие в вашем проекте.
• Что такое компоненты и фреймы в Фигме.
• Самые интересные плагины (plugins) Фигмы.
• Горячие клавиши для Windows и Mac OS.
• Анимация, шрифты (Google Fonts) и иконки.
• Как создать свои UI Kit и шаблоны (templates).
• Сравнение с Sketch и Adobe XD.
Потихоньку всё сложится в курс по дизайну в Figma.
-----
👍 Поддержать канал: / zendesigner
![Уроки Figma Auto Layout. Полное руководство по автолейаут. [Фигма уроки]](http://i.ytimg.com/vi/R4Wq-YVWEvc/mqdefault.jpg)
![Уроки Figma Auto Layout. Полное руководство по автолейаут. [Фигма уроки]](/img/tr.png)
😊 Есть уточнение. На шаге создания icon-container может быть недоступна кнопка Union. Это происходит когда исходная иконка уже сшита (Flatten). Решение - после создания компонента icon-container добавить дополнительно любой шейп на одном уровне с инстансом иконки. Выделить их и сделать Union. Потом из Union удалить лишний шейп.
i.imgur.com/poRYXeF.png
Виктор привет, не могу в этом пункте никак разобраться, когда нет кнопки юнион (ведь она появляется, когда выделяется несколько шейпов для булевых операций), после создания компонента, невозможно же внутрь положить любой шейп, он как бы заблокирован, а если сверху сшивать, то получается огромная вложенность (до 5 слоев у меня почему то получается), все работает, но бывает что вылазят косяки в других иконках. Есть ли какие то другие варианты? Или мог бы записать видео, когда юнион кнопка не доступна, будем очень благодарный, спасибо! Тем более 2 года прошло, может уже эти костыли как то пофиксили, но никак не могу найти решение
@@FORSX можно нарисовать дополнительный шейп, выделить вместе, сделать юнион и потом удалить первый
Виктор в очередной раз большое спасибо. Такие крутые штуки, что не сразу понимаешь куда и как их применить. Рост в плане скила, с вашими уроками читай (пистонами), не по дням а по минутам.
P. S. Наставил запятых как неграмотный. Это всё эмоции от увиденного.
запятых много не бывает! )
Видимо автор отлично знает, что настоящие дизайнеры не спят в два часа ночи.
Настоящие не спят никогда!
как же это охрененно! давно искал решение перекрашивания иконок
Буба-луба-дап-дапфт 🚀
а как же крекс-пекс-фекс?
Ахренеть! Я намучался с этими иконками! А тут вон оно чо! Супер! Спасибо!
Это что-то нереальное!!!! Пушка, бомба! СПАСИБО 😃
Пуленепробиваемый Виктор.😁 Спасибо как всегда чётко и понятно. Удачи!
Спасибо большое, все как всегда, выше всех похвал!
Ох ну наконец-то, раза с 25го получилось, не хотело все перекрашиваться, при юнионе все становилось одноцветным, но в итоге - ура, работает))) спасибо!
Ура!
Спасибо Виктор!
Отлично! Спасибо.
Класс, спасибо!
Полезно!
Агонь 🔥
Большинство недодизайнеров на ютюбе даже не поймут зачем это нужно, а тебе респект за уникальный контент)
Cool!
Хоп хоп!
Виктор, спасибо за ваши видео! Информация подается без лишней воды и с юмором. Интересно смотреть. По этому видео возник вопрос, правильно ли я понимаю, контейнер нужно делать для каждой группы иконок своего размера и стиля и использовать именно контейнер для вставки иконок выбранной стилистики в файл? То есть контейнер в данном случае выступает неким шаблоном, который мы корректируем от иконки, к иконке, верно?
По данному рецепту - да.
Заметил один момент - если мастер компоненты иконок не подготовлены по выравниванию, то при замене иконки она будет деформироваться что бы вписаться в контейнер Union-container. Нужно что бы Constraints был центр-центр.
Если взять иконку например с шаттера, закинуть и сразу сделать их компонентами, то по умолчанию будет скейл-скейл.
Это так. Но хорошая практика готовить отдельно иконки. В своих одинаковых контейнерах. Я экспорт с них делаю.
Доработано: Если делаем компонент "иконка+текст" с вариантами, то инстанс иконки оборачиваем в юнион в уже собранном компоненте "иконка+текст" ну и делаем варианты... это позволит избежать промежуточного шага с иконкой, а результат останется тем же. На боковой панели в вариантах можно будет быстро сменять иконки не проваливаясь много много раз, чтобы достучаться, как было бы если мы бы сделали юнион иконки и только потом собирали компонент "иконка+текст".
Либо пользуемся бета-функцией выноса настройки вложенных компонентов на уровень выше
Интересный метод! Можно ли как-то «поженить» его с Variants? Свойства: размер (чтоб динамически менялся) и стиль (обводка/заливка). У меня ничего не вышло
Сложно говорить не предметно. Можешь найти меня в телеграме - подумаем
а сейчас юнион опция недоступна?, или я что то не так делаю, данная опция сейчас не доступна для компонента у меня, и у местер компонента и дочернего, увидел уточнение, спасибо за урок большое!
Закреплённый коммет может помочь
Привет, спасибо за урок! Важный момент а можно ли в фигме сделать из контурной иконки залитую?
Почему нет? Нужно просто понимать как векторное изображение работает. Разобраться с булевыми операциями (Union, Subtract и т.д. Автоматом конечно не получится.
@@zen-designer потыкалась прежде чем писать сюда, как то не получилось.. Может у вас есть урок на эту тему, чтобы поизучать?
найдите меня в телеграме -- попробуем разобраться. t.me/vandesign
Подскажите, когда захожу внутрь компонента и применяю юнион, всю рамку заливает черным.. не получается
Подозреваю речь о иконках Material из плагина. В них есть ненужный шейп-контейнер. Его можно и нужно удалить в исходных иконках.
@@zen-designer спасибо, буду пробовать.
@@zen-designer подскажите, как его удалить?
@@user-mb8rm5mg5x В материал-иконках присутствует пустой шейп по размеру фрейма. Его и нужно удалить.
Как сделать компонент?
Было бы удобно если горячие клавиши, показали внизу,где субтитры.
Я в этом видео делаю всё без хоткеев. Кнопками интерфейса. А сделать компонент -- Ctrl+Alt+K
@@zen-designer 🤘👍
Виктор, зачем все эти манипуляции? Зачем из инстансы делать новый компонент, который уже есть?
Что с экспортом для разработчиков?!
Со страницы с гайдами например. Я так делаю.
Не могу понять, почему у меня не появляется Union Selection, в иконку провалился, делаю так же.
Сложно сказать не глядя.. Могу посмотреть файл.
Та же проблема, не появлялась кнопка Union Selection, а потом понял, что иконка состояла уже из слитой фигуры. В обще необходимо несколько векторных слоев в иконке для появления Union Selection
@@shved5208 просто закидывает в текущую иконку шейп, потом Union, далее его удаляем, а дальше как в уроке.
@@shved5208 Добавил решение в закреплённом комментарии.
На последних секундах с свг это бага или фича?
О чём речь?
То что при импорте из свг иконка стала из сплошной линии
С учётом того, что для разработки нужны аутлайновые цельные иконки, это очень даже фича!
Для того и все пляски. Иконки из строук -- не кошерно. А тут ты хранишь исходники в строук, а на экспорт уходит филл.
А теперь представьте, что фигмовцы так сделали случайно и даже не подумали про такой сайдэффект. Возьмут и в одном из следующих релизов пофиксят. Нужно быть осторожным с такими подарками, если это не задокументированные возможности.
Почему может не работать? Какая структура внутри у иконки?
На шаге создания icon-container может быть недоступна кнопка Union. Это происходит когда исходная иконка уже сшита (Flatten). Решение - после создания компонента icon-container добавить дополнительно любой шейп на одном уровне с инстансом иконки. Выделить их и сделать Union. Потом из Union удалить лишний шейп.
@@zen-designer доступна, но похоже не так работает, уже на разных иконках проверила
@@zen-designer Получилось, не на том уровне иконки меняла, спасибо.
в телеграме можно меня найти и кинуть файл. Разберёмся
Анна ура 😁
Это какая-то мистика, я сделал все по шагам и у меня не заработало(((
Да ну как так-то((((
не парься. Скоро будет апдейт этого способа