Плагин Lo-Fier — это ваш секретный инструмент для быстрого превращения детализированных дизайнов в лёгкие и понятные вайрфреймы за секунды.

Друзья, приглашаем вас на онлайн-занятие «Как сделать кликабельный прототип Figma для тестирования сценария работы продукта», которое проведёт Ирина Хафизова, дизайн-директор в Grids.

🗓 25 июня 16:00-18:00 (МСК) Это практическое онлайн-занятие предназначено для тех, кто хочет научиться самостоятельно создавать кликабельные прототипы простых вайрфреймов в Figma без помощи технического или продуктового дизайнера. В результате занятия должен получиться готовый кликабельный прототип (≈ 10 экранов). 🎯 На занятии: Теоретическая часть: • что такое кликабельный прототип в Figma, зачем он нужен и т.д.; • что такое сетка, зачем она нужна; • зачем нужен горизонтальный вертикальный шаг; • что такое базовая единица, как она применяется; • показываем готовый сценарий или остановимся на создании структуры в FigJam. Большая практическая часть: • Вайрфреймы. Как их рисовать: - нарисуете 1-2 основных экрана со всеми основными элементами. • Создание прототипа: - как в режиме прототипирования в Figma между собой объединять варфреймы по нашему готовому сценарию; - как сделать базовую анимацию перехода между экранами; - участники попробуют сделать несколько экранов в прототипе; - в режиме реального времени показываем создание прототипа. ✨ Занятие будет максимально полезным для: • UX-исследователей, которые хотят научиться работать с Figma, базовыми функциями прототипирования, аналитики, бизнес-аналитики; • менеджеров продукта. ✏️ Записывайтесь на занятие Ждём вас!)
Изображение поста

⚡️🧭 Что бы делала я, если бы хотела сменить работу и повысить оклад?

Рынок сейчас, мягко говоря, кризисный, поэтому стратегии пятилетней давности просто не работают. Ребята, которые несколько лет назад устраивались в компанию по одному собесу, сейчас не могут дойти даже до этапа собеседований — не то что пройти дальше. Рынок конкурентный, и приходится играть по его правилам. Ниже — стратегия, которую я считаю сложной, но рабочей. Именно её я бы использовала, если бы сейчас искала работу и хотела выйти на новый уровень дохода. 🔡Шаг 1 Смотрим на рынок, компании, количество вакансий, требования заранее До того, как ты оказался на морозе с голой жопой есть возможность доучиться, доработать портфолио, дособирать метрики и более спокойно общаться с другими компаниями. Время поиска работы сейчас растягивается до 6 месяцев, и это средний показатель. 🔡Шаг 2 Изучаем вакансии, выписываем ключевые слова, оформляем резюме К сожалению, без качественного резюме вы просто не проходите автоматические фильтры на HH, и ваше резюме не видят. Вчера вышел пост про метрики и достижения в резюме, используй. 🔡Шаг 3 Переделываем портфолио Делаем сочные подачи: кратко, но чётко описываем бизнес-цель, свою роль, процесс и результат. Нет исследований? Идём в поля и прямо сейчас общаемся с пользователями хотя бы в пет-проекте. Работаем со сторителлингом, визуализацией данных и общей подачей информации. Никакой воды, никаких серых вайрфреймов и бесполезных юзерфлоу. Всё чётко, по делу, по структуре — и красиво. Дизайнера в первую очередь берут за UI и UX. Вы не менеджеры, чтобы строить таблички — вы дизайнеры, и продавать нужно именно этот навык. Если сложно оценить качество своего портфолио — обращайся за помощью к ментору или карьерному консультанту. Кстати, 13 июня я проведу эфир с разбором портфолио продуктовых дизайнеров. Приходи и присылай свои материалы для разбора. 🔡Шаг 4 Готовимся к собесам Будь то техническое интервью или whiteboard — нужно подготовить презентации кейсов, отрепетировать ответы на вопросы, быть готовым показать больше, чем просят. 🔡Шаг 5 Становимся проактивными Нужно мониторить вакансии, знакомиться с рекрутерами и лидами, обходить системы, находить рефералки. Строить воронки поиска, вкладываться в процесс отклика, строить личный бренд. В общем, хочешь жить — умей вертеться. Сейчас это как никогда уместно. Смена работы сегодня — это в первую очередь смена мышления. Без этого будет сложно не только найти классную работу, но и выйти на повышение. На днях у меня был звонок со старшим HR Катей, мы обсуждали, как строится процесс найма "на той стороне". Дизайнеру сейчас очень важно уметь себя продавать и упаковывать, важно иметь стратегию поиска. В противном случае можно затеряться среди других кандидатов. С тебя лайкос ❤️‍🔥 @design_awesome
Изображение поста

Wireframes Kit

Набор из более чем 50 компонентов различных вайрфреймов, которые пригодятся вам при создании новых дизайнов Install 🖼 Figma Дизайн
Изображение поста
IMPAKT Wireframe Kit — бесплатный набор для создания вайрфреймов.
🟩 Rectangle. Подписаться
Изображение поста
IMPAKT Wireframe Kit — бесплатный набор для создания вайрфреймов.
Изображение поста
🔗 Dravter
Библиотека для Figma: юзерфлоу, вайрфреймы, компоненты и стартовая дизайн-система в одном пакете. Отличный фундамент для быстрых запусков. #figma #дизайн_система #вайрфреймы #юзерфлоу #ui #инструменты #стартапы Посмотреть 🔗
Bulk Desaturate: Black & White Image Fills
Мгновенно делает любые изображения чёрно-белыми. Удобно, если нужно проверить тон, убрать лишний визуальный шум или собрать вайрфрейм. Работает с множественным выбором, быстро справляется с тяжёлыми файлами и не трогает оригинальное изображение — ч/б заливку добавляет как новый слой. #фото #эффекты #цвет Людочка, плагины – отборные плагины в Фигме
Комплект пользовательского интерфейса с вайрфреймами
• 500+ компонентов • 50+ экранных карточек • 250+ иконок #DesignSystems #UIkit  Открыть в Figma Иконки Figma
Плагин Lo-Fier — это ваш секретный инструмент для быстрого превращения детализированных дизайнов в лёгкие и понятные вайрфреймы за секунды.
FlatInk
Превращает вектор в стильный монохромный лайн-арт одним кликом. Идеально для вайрфреймов, принтов или минималистичных макетов. Просто выберите иллюстрацию, запустите плагин и нажмите «Apply Magic» — остальное он сделает сам. #иллюстрации Людочка, плагины – отборные плагины в Фигме
Плагин Wireframe
Для создания макета нужно запустить файл и собрать из SVG-заготовок каркас будущего дизайна. Инструмент полностью бесплатный, коллекция вайрфреймов постоянно пополняется. #плагины #прототипы Установить плагин 🔗 🗳 Плагины Figma
Изображение поста
👋 Салют! Хочу запустить дизайн-сериал, в котором буду показывать весь процесс создания дизайна — от идеи до готового проекта.
Сегодня делюсь первыми наработками по концепции. Мои студенты начали свои проекты неделю назад, действуют они по методике коммерческих проектов: — составили техническое задание, — сделали функциональный прототип, — провели конкурентный анализ, — сделали вайрфреймы, — собрали референсы и мудборд. И сейчас они уже приступили к проработке главной страницы. Темы у всех учеников разные, как и опыт. Кто-то делает дизайн впервые, кто-то пришёл с графическим бэкграундом. Но сама методика подходит для всех — это мой рабочий подход, по которому я обучал сотрудников и по которому я сам регулярно делаю коммерческие проекты. К концу недели планирую собрать первые полноценные страницы студентов и поделиться с вами результатами. ➡️ Смотреть разбор в хорошем качестве Если интересно следить за этим процессом — напишите в комментах, что именно хотелось бы видеть: этапы, логику, типичные ошибки, советы? Все покажу и подробно расскажу в следующем разборе 😊 И проголосуйте реакциями, как вам такой контент: 🔥 — супер, крутая тема ❤️ — поддерживаю ребят в их проектах 👀 — тоже так хочу
IMPAKT Wireframe Kit — бесплатный набор для создания вайрфреймов.
Изображение поста
Плaгин Higherframer — позволяет превратить детализированные экраны в вайрфреймы одним кликом! Выберите экран, настройте параметры — и готово.
Handmade Wireframe Kit
UI Kit с базовыми формами и компонентами в скетчевом стиле, чтобы быстро собирать симпатичные вайрфреймы. Пригодится и на старте проекта, и для оформления в портфолио) #прочее Людочка, дизайн – ресурсы для дизайнеров
Изображение поста
Немного больше ниже:
⠀ Во-первых, мы все путаем вайрфрейм и прототип. Прототип - это КЛИКАБЕЛЬНЫЙ макет дизайна сайта, в нем есть интерактивность (в отличии от вайрфрейма, который показывает структуру блоков). Не перепутай! ⠀ Кернинг от трекинга отличается тем, что в первом регулируется расстояние между определенными символами в тексте, а во втором - между всеми одинаково. ⠀ Чекбокс позволяет выбрать один или несколько объектов сразу, или не выбирать вообще, в радиокнопка - только один и никак иначе. ⠀ В типографике много своих терминов: ⠀ асцендер - часть буквы, которая выходит за верхнюю границу высоты строчных букв, например, буква "h" десцендер - за нижнюю, например буква "р" ⠀ В дизайне много умных слов, но ты привыкаешь к ним и используешь каждый день. А какие слова ежедневно используешь ты и никто тебя не понимает?
Продуктовая страница. 2025
Сегодня приступаем к новой задаче — разработка продуктовой страницы. 01 Мой бенч — сайт эпл. Следуя за лучшим всегда получаешь хороший результат. По этому, для практик выбираем аналог. Что актуально в рынке у нас? Где есть открытые вакансии дизайнеров? Что можно полжить в портфолио и постучть с таким кейсом в работодателя? 02 СберДивайсы, Умные колонки от Яндекс, продукты ВК и mail. Колонки, капсулы, часы, телевизоры, умный дом. Умный дизайнер идет туда, где тренд. 03 Выбираем продукт, например — колонку SberBoоster и делаем для нее лимитную серию. Поводов полно: версия Pro или лайт, дополнительная функция или ограниченный цвет, серия городов или для дня города, рождения, себя или компании. Выбрав продукт и тему уникализации можно создавать лендинг, который представит продукт во всей красе. 04 Фреймворк вот: 1. Фич-лист 2. Сторителлинг 3. Контент (структура) 4. Рефы для варфрейма 5. Варфрейм 6. Рефы для дизайна 7. Дизайн-концепт (итерация 1) 8. Дизайн доработка (итерация 2) 9. Финализация 10. Секретный ингридиент 05 Профессиональный дизайнер в 2025 году для первых трех пунктов использует нейронки. Работу с рефами мы уже проходили и знаем как их искать быстро. Вайрфрейм, об этом расскажу подробнее. Концепт дизайна в первой итерации делаем по выбранным референсам. Всё как всегда просто. 06 Буду делиться ходом работы здесь. Вместе с Оксаной делаем крутую продуктовую страницу для дизайнеров. А как вы создаёте лендинги? Какой фрейм или план используете? Когда подключаете нейросети? Делитесь в комментариях)
Изображение поста
Wireframes Kit Набор из более чем 50 компонентов различных вайрфреймов, которые пригодятся вам при создании новых дизайнов
Изображение поста
Привет, комьюнити!
На связи — Алёна Ереско и её GAME UX KIT! _____ 🎮✨Делюсь своим Game UX Kit! Этот проект созрел в рамках моей небольшой студии и дозрел на нашем челлендже #guitober 👩🏻‍💻ЧТО ТАКОЕ GAME UX KIT Это набор компонентов и паттернов для создания вайрфреймов игровых интерфейсов в Figma. Кит поможет вам быстрее прототипировать идеи и эффективнее работать над UX игр. 🧑🏻‍🍳 СОСТАВ - Foundations: базовые элементы дизайн-системы - Components: основные компоненты интерфейса - Patterns: готовые паттерны для типичных игровых экранов - Examples: примеры использования компонентов 🎨 КАК ИСПОЛЬЗОВАТЬ 1. После добавления кита к себе не стесняйтесь подстроить его под свои нужды. Так как этот кит используется моей студией, в нем много акцентного фиолетового цвета. Вы можете поменять его на любой другой, например, на акцентный цвет вашего проекта, а также полностью кастомизировать второстепенные цвета. 2. Используйте Local Styles, чтобы иметь быстрый доступ к шрифтам и цветам. 3. Все компоненты респонсивные и имеют Auto Layout, много стейтов. Тем не менее, если вам нужно больше гибкости и свободы, можете детачнуть компоненты и сделать их под себя. Этот кит сделан с большой любовью к игровым разработчикам и полностью БЕСПЛАТЕН. Версия 1.0 покрывает основные компоненты и паттерны, тем не менее в планах добавить больше деталей и расширить кит. Буду рада знать, если вам чего-либо не хватает в ките! 💜 Скачать бесплатно в Figma Community: GAME UX KIT 💜 Для новичков я написала статью, зачем нужны такие киты и чем они полезны - ЧИТАТЬ (на английском) Если кит оказался полезным, буду благодарна за поддержку на KO-FI 💜 #gamedev #uxdesign #figma ___________ Alena Eresko
Изображение поста