Стажёры тут? Ваше время пришло

Design Camp для UX/UI дизайнеров от цифрового юнита Прагматики. Это бесплатная практика для продуктовых и ux/ui-дизайнеров. Участники пройдут два спринта c задачами от vk и прагматики, получат фидбек от лидов и шанс попасть в студию или продукт на стажировку. ❤️ Что вас ждет: - 2 спринта практических задач от ВК/Прагматики; - Регулярный развернутый фидбек от дизайн-лидов Прагматики 1 раз в неделю в Zoom и асинхронно в чатах в течение недели по доработкам - дата асинхронного фидбека зависит от ментора; - Встреча с заказчиком для брифинга и обратной связи. ❤️ Что ждут от вас: - Знаете, что такое Figma и умеете работать с компонентами; - Понимаете, как строится UI; - Имеете минимум 2-3 проекта в своем портфолио; - Готовы уделять кэмпу время каждую неделю. 🔘 Как проходит: – Делаете тестовое задание и записываете короткий лум на 3-5 минут. – Отвечаете на вопросы из анкеты – При положительном результате с вами свяжутся и добавят в чат Длительность: 1 месяц Старт: 10 ноября Формат: онлайн из любой точки мира, созвоны с заказчиками и менторами по московскому времени И да, успевайте, заявки принимают до 5 ноября, 12:00 по мск 🔜 А если остались какие-то вопросы или что-то не понятно, пишите сюда: @sladkiy_pirozhok ➡️ Податься на кэмп ➡️ Податься на кэмп ➡️ Податься на кэмп

Figma Community • #ui

Коллекция компонентов и страниц с функцией авто-расстановки. Предназначена для упрощения процесса создания интерфейсов, помогая дизайнерам быстрее собирать макеты и поддерживать их адаптивность. В набор входят разнообразные элементы, готовые к использованию Install 🖼️ Figma Дизайн

Наткнулся на 21st — открытую площадку, где разработчики публикуют готовые React-компоненты и целые экраны. Это что-то вроде Figma Community, только для кода. На платформе много решений, собранных с реальных маркетинговых страниц популярных SaaS-сервисов. Например, на обложке — блок с главной страницы Linear. Помимо вдохновения: если ваша команда работает с React и придерживается подхода shadcn/ui, можно просто отправить ссылку на компонент — разработчики возьмут код и адаптируют его под ваш дизайн. Единственное: сейчас платформу обновляют — похоже, на её базе делают отдельный продукт. Поэтому возможны баги, а в навигации пока легко потеряться. Вам на страницу Community в раздел Components. 📎 Ссылка на площадку

Саша рассказала о своём пути от графического дизайнера до продуктового, работая над ERP-платформой. Будучи единственным дизайнером на проекте без опыта работы с большими продуктами, она столкнулась с хаосом из сотен экранов без консистентности и структуры. Главной проблемой стало отсутствие базовых инструментов: переменных, системы отступов, методологии. Она самостоятельно освоила современные возможности Figma через YouTube-ролики и эксперименты, создав Systematic Color Workflow с 400+ токенами. Правда, позже поняла, что можно было ограничиться только реально используемыми стилями и не усложнять работу фронтенда. Внутри: – Как создать Color Mixer для формирования консистентной палитры; – Почему текстовый компонент может перегружать макеты при сотнях экранов; – Зачем сразу определять правила отступов и брейкпоинты; – Как Variants, Boolean и Auto Layout ускоряют работу; – Почему пришлось аргументировать переход на платную версию Figma; – Какие ошибки можно было избежать с опытным ментором. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Узнайте, как 180 экранов, 120+ компонентов и три ключевые роли пользователей обеспечивают эффективное взаимодействие на веб-платформе для покупателей, дилеров и банков Читать на дизайнерс | #кейс

Как использовать: 1. Выберите узел (лучше всего работает с компонентом) 2. Запустите плагин 3. Отрегулируйте значения строк, столбцов, интервалов и смещений. 4. Нажмите «Создать». #сетка #паттерны

👉 Библиотека ресурсов для Figma 👉 Генератор палитры оттенков 👉 Библиотека компонентов, паттернов и решений 👉 Коллекция мобильных и веб паттернов 👉 Макет Figma в виде веб-сайта 👉 Генератор мокапов 👉 Библиотека аватаров 👉 Коллекция иконок 👉 Генератор шейпов Источник #подборки

Если вы часто создаете симметричные объекты и хотите иметь удобную возможность редактировать их, то просто превратите половинку вашей иллюстрации в компонент #figma #лайфхак

UiKit, который поможет тебе собирать таблички за считанные секунды Внутри 297 стилей 258 компонентов 204 вариантов 15 готовых табличек Кит тут

Владимир Макеев из Surf протестировал генерацию UI-компонентов в Claude 4 по методу one-shot UI. Простые компоненты вроде кнопок ИИ создаёт без ошибок, экономя до 80% времени. Сложные интерфейсы требуют доработки, но всё равно ускоряют работу на 25-30%. Главное открытие: без контекста ИИ выдаёт хаотичный код. Модель не понимает, что делает, а просто оперирует вероятностями. Поэтому нужен метод one-shot UI: загрузить максимум ограничений сразу, чтобы получить чистый результат с первой попытки. Автор описывает пять шагов: от загрузки правил и подключения линтеров до использования MCP для Figma и golden-тестов. Внутри: – Почему без контекста ИИ открывает десятки файлов и выдаёт случайный результат; – Как правила и линтеры доводят код до стандарта команды; – Зачем нужен master rule для повторяющихся задач; – Как MCP для Figma передаёт точные стили и размеры; – Почему golden-тесты помогают достичь pixel perfect; – На сколько процентов ИИ ускоряет работу с разными типами задач. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Узнайте, как правильно называть компоненты в дизайне. Отличие между Badge, Label, Chip, Tag и Pill. Помните одно простое правило! Читать на дизайнерс | #статья

Узнайте, как правильно называть компоненты в дизайне. Отличие между Badge, Label, Chip, Tag и Pill. Помните одно простое правило! Читать на дизайнерс | #статья

• 5 типов в 2 стилях • Компоненты бесплатны, в том числе для коммерческих целей • Светлая и темная тема #components Открыть в Figma Источник

• Компоненты для формирования внешнего вида карты #components Открыть в Figma Источник

🔶 Lunacy Приложение для графического дизайна со множеством функций, в том числе с поддержкой ИИ для рутинных задач. Есть онлайн- и офлайн-режимы, командная работа, прототипирование и т.д. 🔶 NinjaMock Платформа для создания прототипов интерфейсов мобильных приложений, веб-приложений и сайтов. Рабочие макеты выглядят как нарисованные от руки эскизы. Есть опция совместной работы. 🔶 Structura.app Российский конструктор прототипов сайтов позволяет создать макет одним из четырёх способов, в том числе и с помощью краулинга — уникальной фичи сервиса. С ней можно скопировать структуру любого сайта и взять для своего проекта. 🔶 Penpot На платформе можно создавать прототипы бесплатно. Здесь открытый исходный код, есть возможность командной работы онлайн, но обучающих материалов немного. 🔶 Webflow Облачная платформа для создания сайтов без использования кода. Проекты можно интегрировать с сервисами аналитики и платёжными системами. Сервисом пользуются дизайнеры и разработчики, а также маркетологи и предприниматели. 🔶 Pixso Редактор для командной работы с облачным хранением и своей онлайн-библиотекой компонентов. Нейросеть AI Assistant сможет сама сгенерировать многие элементы. В бесплатной версии можно открыть доступ к редактированию трёх файлов. 🔶 Sketch Профессиональный векторный графический редактор подойдёт начинающим и опытным дизайнерам. Базовую коллекцию функций можно дополнять плагинами. Работает только на macOS. 🔶 Zeplin Упрощает совместную работу дизайнеров и разработчиков. Инструментов для создания проекта с нуля нет, но можно импортировать свои макеты, а программа сгенерирует для них программный код. 🔶 Visme Онлайн-редактор графического контента поможет с простым дизайном, презентациями, при планировании контента. 🔶 Turbologo Инструмент для автоматической генерации логотипов онлайн. Можно выбрать сферу деятельности и палитру, а система предложит разные варианты и покажет на разных носителях. [Фабрика Дизайна]

Света, дизайнер интерфейсов DNS, рассказала о трансформации внутреннего продукта DNS REDACTOR. На одной странице насчитывалось 6 типов кнопок, каждый дизайнер рисовал страницы по-своему, а разработчики верстали как считали нужным. За 6 месяцев команда создала полноценную дизайн-систему, которая изменила не только интерфейсы, но и процессы работы. Самым сложным компонентом оказался Select, который пришлось переделывать 4 раза. Зато благодаря ему появились подробные гайды использования с описанием всех возможных сценариев. А новый компонент Aside-header освободил пространство сверху экрана, что критично для продукта, где основа интерфейса — таблицы. Внутри: – Почему внутренние продукты — это лицо компании внутри неё; – Как семантические цвета с альфа-каналом решили проблему 50 оттенков серого; – Зачем фильтры переместили в шапку таблицы; – Какие требования к макетам стали обязательными; – Почему визуальное тестирование добавили в процесс QA; – Как система статусов помогает управлять компонентами. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Сергей Галан из Utopia и Елена Рнае из Софториума создали подробный гайд по взаимодействию с дизайнерами. Главная мысль: 80% проблем в проектах возникают не из-за отсутствия таланта у дизайнеров, а из-за сбоев в коммуникации между командой и постановщиками задач. Авторы разбирают частые ошибки: менеджеры перегружают senior-дизайнеров контролем или бросают джунов без опоры, ставят задачи в духе "красиво как у Apple", не фиксируют критерии готовности. В результате проект буксует, а команда получает красивые, но технически нереализуемые макеты или работающий, но неудобный интерфейс. Внутри: – Как оценить уровень дизайнера и выбрать модель взаимодействия; – Структура эффективного брифа с расшифровкой референсов; – Почему архитектору важно видеть дизайн на старте; – Что проверять на демонстрации с участием всей команды; – Какие состояния интерфейса должен передать дизайнер; – Чем плохая работа с компонентами обернётся дорогим обслуживанием. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Китайские исследователи показали SpecifyUI — система, которая помогает в итеративном проектировании пользовательских интерфейсов с использованием структурированных спецификаций и генеративного искусственного интеллекта. Сердце системы — SPEC — структурированное, параметризованное, иерархическое промежуточное представление, в котором элементы пользовательского интерфейса представлены в виде управляемых параметров. Да, звучит сложно. Но это может помочь с генеративным дизайном в будущем. Так что давайте разбираться. Как устроен генеративный дизайн сейчас (и что с ним не так) – Текстовые подсказки рулят сценарием: большинство инструментов просят «объяснить словами» замысел, а потом пытаются угадать структуру макета и компоненты. Итерации линейные: мелкая правка часто «расползается» по макету. – Болезненная точечная правка: без формальной структуры сложно поменять один блок, не тронув остальные. Нужна адресная правка по узлу и атрибуту, а не перегенерация целой страницы. Это и закрывает SPEC: правки вида <операция, путь, значение> — например, заменить палитру только у шапки или превратить таблицу конкретной секции в карточки. – Нет мостика к коду: обычная генерация выдает «картинку вдохновения». SPEC строит мост до инженерии: RAG по базе примеров, агент кода и отладчик доводят результат до исполнимого состояния. Чем SPEC нам полезен? – Контроль: намерение фиксируется как SPEC — структурная запись про сетку, палитру, «язык форм», сценарий и иерархию Страница → Секции → Компоненты. Правки вносятся адресно по пути в структуре, не ломая остальное. – Сборка из референсов: система режет референсы на регионы, достает из них структуру и стиль, склеивает в единый SPEC. Можно брать сетку из А, палитру из В, компоненты из С. – Повторяемость и передача в разработку: SPEC конвертируется в рабочий интерфейс и код (React + библиотека компонентов + графики); есть цикл «сгенерировать — отловить ошибку — починить». Почему это не пустая болтовня На корпусе из ~2000 экранов: меньше визуальных ошибок, выше семантическое сходство, стабильнее структура. В тесте с 16 дизайнерами участники отметили лучшее чувство контроля по сравнению с Google Stitch Где это реально заходит – Продуктовые экраны, каталоги, дашборды, лендинги с повторяющимися блоками. – Когда важно держать стиль и логику дизайн-системы. – Когда итераций много и их нужно фиксировать правилами, а не папкой картинок. Когда можно пройти мимо – Разовый визуальный эксперимент ради идеи. – Очень маленькие страницы, где быстрее нарисовать, чем описывать. – Когда нет ресурса сформулировать правила — SPEC требует дисциплины. Итог Это начало пути, но направление правильное: итеративный дизайн с ИИ под контролем структуры. Меньше случайностей, больше повторяемости.

Среди первых интеграций появилась Figma. Теперь можно быстро создавать визуальные диаграммы в FigJam, такие как блок-схемы, диаграммы Ганта и другие. Просто упомяните Figma в вашем запросе, например: «Figma, создай диаграмму из этого эскиза». Нейросеть понимает структуру проекта через MCP, поэтому взаимодействие происходит на уровне слоёв и компонентов.