Figma. Плагины для продуктового дизайнера. Ультимативный список.
Vložit
- čas přidán 25. 05. 2021
- #figma #product design
В этом видео выберем лучшие плагины Figma для продуктового дизайнера.
🎞 ОГЛАВЛЕНИЕ
02:11 Master www.figma.com/community/plugi...
03:53 Design-System-Organizer
www.figma.com/community/plugi...
05:36 Style-Organizer
www.figma.com/community/plugi...
06:35 Similayer
www.figma.com/community/plugi...
07:17 Instance-Finder
www.figma.com/community/plugi...
07:51 Select-Layers
www.figma.com/community/plugi...
08:42 Sorter
www.figma.com/community/plugi...
09:33 Quantizer
www.figma.com/community/plugi...
10:15 Swap
www.figma.com/community/plugi...
10:42 Layer-Counter
www.figma.com/community/plugi...
11:09 Retextifier
www.figma.com/community/plugi...
12:14 Copy-and-Paste-Text
www.figma.com/community/plugi...
12:41 Find-&-Replace
www.figma.com/community/plugi...
13:08 Nisa-Text-Splitter
www.figma.com/community/plugi...
13:57 Change-Text-to-Layer-Name
www.figma.com/community/plugi...
14:30 Data-Roulette
www.figma.com/community/plugi...
16:00 Content-Reel
www.figma.com/community/plugi...
16:49 Copypasta
www.figma.com/community/plugi...
17:23 Safely-Delete-Components
www.figma.com/community/plugi...
18:13 SBOL-Typograph
www.figma.com/community/plugi...
19:13 Пилюлька
ВАЖНОЕ:
Моя фигма-страница
figma.com/@vandesign
Figma-чат
t.me/figmachat
🧰 Уроки Figma на русском.
Фигма - это бесплатная онлайн программа для дизайна web и UI. Приложения для Windows, Mac OS, Android (Material design) и iOS. Программу можно скачать на сайте [www.figma.com](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)
Всё. Вадим починил Retextifier. Можно пользоваться и на Windows без всяких ухищрений.
Почему 90% уроков снимается на экранах 1920 × 1080? У большинства людей нет таких мониторов. Люди, которые не могут себе позволить платное обучение с наставником - смотрят бесплатные уроки на ноутбуке с 15,6" монитором с разрешением 1366 × 768. Попробуйте посмотреть своё видео на таком. Вы сможете все надписи разглядеть в вашем видео не упираясь носом в экран? Было бы неплохо переключать разрешение вашего экрана на 1280 × 720 (16:9) на период записи видео, если есть цель записать урок для всех. Спасибо.
@@Computer_Engineer1 смотрю уроки на 4К мониторе. Тут скорее надо масштаб системы для записи видео менять, а не разрешение.
Если поставить 150%, то всё будет крупным, но при этом не будет пикселей.
Спасибо! Поскольку много приходится работать с дизайн-системами для мобильных интерфейсов, нужно постоянно перекрашивать светлые объекты в соответствующие темные. Потому один из часто используемых плагинов - Lights. Он быстро переназначает стили из светлой темы в темную и наоборот. Главное, чтоб они были названы одинаково и имели префиксы Light/ и Dark/. Рекомендую всем мобилоинтерфейсникам.
а это удобнее чем через переменные?
почти 19 минут чистого кайфа, спасибо
Спасибо за выпуск! Соскучились уже!
Я тоже соскучился 😊
Не забывайте делиться годнотой!
Спасибо Виктор.Очень полезный контент
Спасибо, только начал в продукте работать. Крутая подборочка 👍🏽😉
Удачи в продукте
Отличная подборка!
Оч крутые видео!!!
Просто огонь, некоторые пересмотрел по много раз.
Оч жду видео о том как выстраивать ДС, нейминг слоев, и т.д. Ибо ошибки на начальных этапах очень дорого обходятся дизайнерам и продуктовым командам.
Виктор, спасибо! Подборка - огонь. Первые три плагина, чувствую, сильно пригодятся при предстоящем переходе команды со Скетча на Фигму.
Пригодятся все 😊 Главное не цепляться за старое и пересобирать компоненты используя фичи Figma - автолейауты, варианты и т. д.
От Бога, как всегда) Спасибо!
Спасибо за видео) очень интересно послушать как вы работаете в команде
Очень полезно. Спасибо!
Виктор, большое вам спасибо! Наконец-то вы вернулись дабы мы могли просвещаться =)) Пилюлька сегодня вообще в точку попала!
Своевременно принятая пилюлька - залог здоровья )
Супер, спасибо!
очень офигенная подборка и легкая подача для видео для восприятия.
плагины наше все!
голова и руки - наше всё, а плагины позволяют выиграть время )
один из полезнейших роликов по плагинам
Чикатило спасибо за видео!
За Retextifier особый респект))
Спасибо!
Прикольный ты чувак, спасибо тебе за уроки!
Виктор, поздравляю с новым местом работы! Спасибо за видео. С интересом глянул бы подробное видео о вашей ДС.
Надеюсь у вас все хорошо, очень ждем новые видео!
Спасибо. Надеюсь выкрою время для новых видосов
Спасибо за ролик, надеюсь, увижу вас на Ozon Camp!
Надеюсь я услышу про Ozon Camp 😂
Благословит тебя бог дизайна!
И тебя!
Спасибо за полезную подборку. Многое использую тоже - многое забрал в копилочку. Всем рекомендую обратить внимание на Swap, мой самый топовый плагин. Он поменял весь мой рабочий процесс :)
кэйдж крут)
Вы супер.
Не «вы», а «ты»
@@zen-designer ты супер!
@@roman.musatkin и ты, не забывай! 😁
Виктор, спасибо! Отличная подборка! а что за классная прога стоит для работы с буфером обмена?
)) Это штатная функция Win10 -- win+V
Виктор, если вы не сделаете видосик по обсидиан. А буду вводить против вас санкции! )
Спасибо за видео, было бы круто если остановились на каждом плагине еще подробнее, а то пришлось первые два плагина пересматривать и вникать, что, зачем и для чего. И Таймлайны не помешали бы :)
Таймлайны?
@@zen-designer таймкоды 🤦🏻♂️
@@Mark-ry9lu так они же в описании ролика
Хочу с тобой поработать и поучиться у тебя!
Здравствуйте, Виктор подскажите пожалуйста, как расположить текст с значками по кругу в фигме? про to path знаю, но там ток текст можно, может ссылку на видео скинете, буду благодарна)
Давно вас не слышно :)
Очень хочется узнать от вас о системах нейминга слоев, блоков, элементов, многоуровневой вложенности. Хотелось бы увидеть наиболее удобный по вашему мнению пример системы. В интернете по неймингу практически нет информации
Как раз сейчас занимаюсь дизайн-системой. Коплю опыт. Как накоплю достаточно и проверю его валидность, сделаю видео.
@@zen-designer жду с нетерпением) уже текут слюньки от контента))
Давно не общались!
Ну вот и свиделись
Возвращайтесь! У вас самый годный контент по фигма!
Спасибо. Когда уже полноценный курс по фигме?
Для этого придется уволиться из Ozon, а я пока не готов 🙃
Привет, интересно было бы посмотреть про продуктовую работу. Как вы в команде берете таски на спринт, по какому принципу распределяете. Как храните версионность мокапов, к примеру был у вас мокап home page на него добавили 1 кнопку в навигационную панель, меняете ли все потом мокапы которые от этого зависят
Тут даже внутри нас разные пайплайны. Наша команда работает без спринтов, у нас канбан-доска. Задачи распределяет тим-лид. Но у всех свои основные направления. Версионность внутри файла, на отдельных страницах. Если кнопку добавили в навпанель, она скорее всего в сценарной либе и прольётся на другие макеты. Если не в либе - обновляем актуальные макеты и потихоньку расчищаем техдолг по остальным.
@@zen-designer спасибо
Приветствую! А будут ещё интересные видео, что то тихо стало...
Виктор, здравствуйте. Не по теме ролика. Но хотела бы у вас уточнить, может вы знаете, как перенести проект из одного пространства одной компании в пространство другой компании, и при этом чтобы сохранилась связь с компонентами.
К сожалению не сталкивался. Спроси в чатике t.me/figmachat
П.С. мы тут не выкаем )
вместо Retextifier - Many Paster))
Хороший плагин. Но мне Retextifier больше нравится. Paster требует выделять текстовые блоки, а Retextifier умеет их сам находить внутри выделения.
А есть ли смысл использовать в нейменге БЭМ, дабы не изобретать велосипед?
Почему бы не попробовать? Может у вас в проекте это взлетит. Мы не используем
Спасибо за информацию!
Но, что со звуком? Я до сих пор щелчки в ушах слышу) это единственный минус данного видео.
Может кто-нибудь поподробнее рассказать про плагин Master? Не особо понимаю принцип работы и его полезность
Привязать инстанс к другому мастеру с сохранением всех оверрайдов. Посмотри ссылки на странице плагина.
+
Виктор, т.к. ты в OZON дизайнишь продукт - огромная просьба UX. Добавьте к товарам в карточку информацию о весе как тех поле! Вот я хочу купить орехи например. Это невозможно сделать из страницы товаров! В большинстве описаний нет грамовки, поэтому чтобы сравнить цену за кг я лезу в каждую карточку и достаю калькулятор т.к. где-то 500 гр, в другой 850 а в третьей это вообще оказывается 3 упаковки по 200! Отсутствие цены за кг делает инфу о скидках и цене за позицию бесполезной и поджигает кресло подо мной уже не первый день.
Передам соответствующим специалистам
Что то стало тихо на канале. Будут ли новые видео? Было очень интересно.
Прости, что молчу. Совсем нет времени. Новая работа, новые вызовы. Но я не оставляю надежду вернуться к вам
@@zen-designer Новая работа. Это хорошо! Удачи вам! Буду ждать новостей.
ого только о тебе подумал- и видео выкатил!
Всё не просто так в этом мире
Я что-то очень туплю.
Дано: файл с локальными компонентами, библиотека с этими же компонентами, но уже изменёнными.
Задача: заменить всем инстансам локальных компонентов мастер компонент на библиотечный.
Как это сделать?
Ладно, я понял, что могу это сделать выделяя компоненты по одному, а затем используя Master. Не уверен, что это самый эффективный способ, но точно лучше, чем вообще потерять компоненты или держать 2 разных. Если есть лучше, то подскажите.
Ещё можно пробовать Design System Organizer
Объясните пожалуйста кто-нибудь, что значит "Умеет перелинковывать инстансы к новому мастер компоненту, сохраняя все оверрайды"
Мне не понятны значения слов инстансы и оверрайды.
Инстанс - экземпляр мастер-компонента. Оверрайд - изменение относительно мастер-компонента. Например текст или цвет.
@@zen-designer Боже я понял) спасибо тебе добрый человек. Именно этот плагин я ищу, столкнулся с этой проблемой на днях и вспомнил про этот обзор
@@zen-designer порекомендовал ваш канал у себя в школе Design Spot School 2021
Продолжайте и дальше делиться знаниями)))) Вы оказываете неоценимый вклад в развитие дизайна в русскоговорящей среде
@@oleksiibiriuchynskyi6721 спасибо. Продолжаю 🌝
По верхам. В первых двух плагинах куда больше возможностей.
Конечно по верхам. Это же не туториал, а хитпарад.
@@zen-designer Обязательно сделайте подробный обзор первых двух плагинов. Правда, я думаю, что данный функционал в Figma добавят уже в этом году.
@@user-sv6dy8pk2q про Master я уже рассказывал. А вообще у обоих плагинов хорошая документация и отзывчивые авторы.
@@zen-designer поиском по каналу "master" не смог сразу найти однозначного ответа) Буду очень благодарен за ссылку на ролик. Очень хочется разобраться с этим плагином.
Тут есть немного.
czcams.com/video/DRupAaEnIX4/video.html
Вообще у Master хороший хелп.
куда пропал автор?
Виктор, вот интересный видосик czcams.com/video/6EWUpa-5lSo/video.html (надеюсь не нарушаю правил)
Вы принадлежите к тем 90% авторов уроков, которые записывают экраны в 1920 × 1080 и 2560 × 1440? У большинства ваших зрителей нет таких мониторов. Люди, которые не могут себе позволить платное обучение с наставником, - смотрят бесплатные уроки на ноутбуке с 15,6" монитором с разрешением 1366 × 768. Попробуйте посмотреть своё видео на таком. Сможете ли вы все надписи разглядеть в вашем видео? Было бы неплохо переключать разрешение вашего экрана на 1280 × 720 (16:9) на период записи видео, если есть цель записать урок для всех. Спасибо.
Хорошее замечание. Подумаю над этим
@@zen-designer можно ставить масштаб 200% в Windows или MacOS на время записи. Всё будет крупным, но не будет пикселить, как при 720.
@@MrSmith42 хорошая мысль