Consta news

🔹NEW Pixso Мы опубликовали несколько библиотек дизайн-системы Consta в Pixso (Beta): На цветовых переменных: – Consta UI-Kit – Consta Table – Consta Graphics На старых цветовых стилях: – Consta Charts – Consta Drill Elements Для обратной совместимости: – Consta Default, Dark, Display Colors – Consta Default Typography – Consta Spaces ⚠️ Почему Beta? Некоторые компоненты могут работать с ошибками. Мы уже знаем о части из них, а про другие можем узнать только от вас :) Будем благодарны за обратную связь. В ближайшие недели постараемся довести библиотеки до максимального сходства с Figma. Ссылка на библиотеки в Pixso Что дальше: Готовим публикацию оставшихся библиотек и параллельно переезжаем на Variables (шрифты, отступы). Еще кое-что для Pixso: Мы сделали плагин Consta Props Styler — он строит таблицу свойств для компонент-сета в один клик (по аналогии с Propstar в Figma). Забрать можно здесь. 🔹NEW Figma – Перевели Consta UI-Kit на цветовые переменные. Теперь в библиотеке нет отдельных версий под каждую тему — переключение делается прямо в настройке Appearance → Variable Mode. – Навигация в менеджере ассетов стала проще. Что дальше: Переезд шрифтов и отступов на Variables. Обновление UI-Kit выйдет в ближайшие пару недель, затем подтянем и остальные библиотеки. 🔹Компоненты в UI-Kit – NEW Banner — статусная плашка с кнопками для закрепленных сообщений. – NEW File Icon — новая иконка формата файла: много предзаготовок + возможность собрать свою. – Tag — иконка теперь настраивается через Boolean-свойство, поправили размеры для S и XS. – Badge — выбор иконки вынесен в список свойств. – Groups — компоненты, у которых есть Group-версия, сделали отдельными от групп, как на портале: – AvatarGroup (добавили настройку View для всей группы разом) – SwitchGroup – BadgeGroup – CheckboxGroup – CollapseGroup 🔹Еще кое-что для Figma Сделали плагин Consta Style Replacer. Он помогает заменить цветовые стили на переменные по совпадению имен. Если библиотека опубликована в вашей команде — заведите у себя переменные и замените стили за пару кликов. В следующей версии добавим возможность работы с переменными из удаленных библиотек. Смотреть в Figma community Стэй тунед!

Мы — Spans Agency, рассказываем истории брендов по-своему: создаём крутые сайты, брендинг и удобный UX. Задачи: — разрабатывать и презентовать дизайн-концепции — проводить аналитику — создавать прототипы — разрабатывать дизайн — адаптировать под разные устройства — взаимодействовать с разработчиками и проводить дизайн-ревью Ожидания: — самостоятельно ведешь дизайн-проекты от начала и до конца — умеешь разрабатывать концепции и создавать визуальные решения для брендов — системно подходишь к работе, обладаешь логическим мышлением и придерживаешься принципа pixel perfect — работаешь с визуальным дизайном на высоком уровне, включая композицию, форму, цвет и типографику — уверенно владеешь инструментами Adobe и Figma на продвинутом уровне, используешь Properties, Variables и Styles — ты составляешь консистентные дизайн-системы и UI KIT Условия: — удаленный формат работы с 10 до 19 по Мск или офис в Москве — оформление как самозанятый или по договору с ИП — зарплата обсуждается по итогам собеседования → Подробнее Контакт для отклика: @Lena_Nag #дизайн

Джос Памбу рассказал о синхронизации токенов, компонентов и документации, дал практические рекомендации по выбору инструментов, а ещё рассказал как эти процессы можно автоматизировать. Как обновление токена в Фигме автоматически попадает в код и документацию. Без автоматизации команды постоянно сталкиваются с рассинхроном: цвет поменяли в дизайне, но забыли в коде. В статье разбирается весь процесс: от настройки токенов через Token Studio до генерации кода через Supernova. Особенно интересна часть про AI, который помогает с именованием сотен токенов и генерацией документации. Джос предупреждает: не автоматизируйте всё сразу одним скриптом, лучше разбить на маленькие шаги. Внутри: – Какие инструменты синхронизируют токены между дизайном и кодом; – Как настроить экспорт из Фигмы в разные форматы кода; – Почему важно разбивать автоматизацию на маленькие шаги; – Где AI может реально помочь с дизайн-системой; – Какие ошибки чаще всего делают при автоматизации; – Пошаговая инструкция настройки через Supernova. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Разрозненные дизайн-макеты, бесконечный круг правок, несогласованный визуал в презентациях и соцсетях — всё это бьёт не только по имиджу компании, но и по бюджету. В новой статье рассказали, как перейти от неуправляемого «ручного» дизайна к масштабируемой системе через шаблоны и дизайн-системы. 🔸Почему брендбук не обеспечивает единый визуал 🔸Как шаблоны ускоряют вывод маркетинговых материалов в 2–5 раз 🔸Опыт крупных компаний: Airbnb, IBM, Audi, Shopify 🔸Пошаговое внедрение шаблонов для роста эффективности команды 👉🏻Читайте, меняйте, применяйте

#Менеджмент Об управлении в дизайне спорят все, кто оказывается на управленческих позициях. Ведь нет идеального руководителя, процесса, компании или продукта. Роль дизайн-менеджера заключается в нащупывании возможностей в рамках текущего контекста. А хороший менеджмент это всегда про решительность, рассудительность и способность идти туда, куда большинство пойти побоятся. — Как превратить проблемы в возможности? Дизайн-менеджмент — это выстраивание рабочих процессов, межличностных коммуникаций и стратегических планов. Чтобы преодолеть ключевые проблемы, нужен системный подход. Рассмотрим шесть пунктов, которые помогут решать эти проблемы комплексно: 1. Дизайн как часть бизнес-стратегии • Включение дизайн-лидеров в стратегические обсуждения развития бизнеса. • Связь UX-метрик (NPS, LTV, Retention) с финансовыми показателями. • Выстраивание производственных процессов, где дизайн участвует в принятии решений с самого начала. 2. Настройка производственных процессов • Организация коротких релизных итераций для быстрой проверки гипотез. • Организация инструментов (Дизайн-системы, базы знаний, пользовательские паттерны) для ускорения работы и обеспечения консистентности. • Роли, функции, зона ответственности в кроссфункциональной команде: (исследователи, разработчики, аналитики, менеджеры, дизайнеры). 3. Коллаборация между командами • Документация, гайды, прототипы, результаты исследований вместо абстрактных ТЗ. • Совместные воркшопы, сессии дизайн-мышления, где все участвуют в генерации идей. • Формат работы и взаимодействия с применением гибких методологий и высокой степенью автономности. 4. Развитие дизайн-команды • Гибкие роли дизайнеров с возможностью переключения между задачами. • Внутреннее обучение и менторинг: курсы по софтскилам (для ведения переговоров и проведения презентаций для бизнеса), курсы по хардскилам (изучение и внедрение новых технических инструментов). • Внешнее обучение: отправка дизайнеров на вебинары, интенсивы и др. типы обучения, согласно персональному плану развития каждого. • Честные KPI: оценка не по количеству нарисованных макетов, а по результативности в принятых решениях и влиянии на продукт. 5. Адаптация к новым технологиям • Регулярный аудит инструментов: что устарело, что пришло этому на смену. Какие AI-инструменты ускоряют реализацию рутинных задач. • Эксперименты с неиспользуемыми цифровыми форматами (AR/VR, голосовые интерфейсы, чат-боты, и т.д.) 6. Доказательство ценности дизайна • Метрики дизайн-эффективности: время на выполнение задач, снижение числа ошибок пользователей. • A/B-тестирование всего: от кнопок до навигации, от логотипов до анимации. • Гипотезы, их подтверждение / опровержение, измерение показателей и фиксация клиентских отзывов после внедрения конкретных дизайнерских решений (новый онбординг, новая панель навигации, новый кей-вижуал). Дизайн-менеджмент — это система Недостаточно просто нанять талантливых дизайнеров. Необходимо выстроить процессы, дать влияние дизайнерам и научиться измерять вклад их работы в общее дело. Дизайн-руководители, которые внедряют эти решения, получают: → Быстрые релизные итерации вместо бесконечных правок дизайна. → Синхронизацию команд вместо конфликтов между дизайнерами и другими специалистами. → Измеримый рост продукта и команды вместо субъективных оценок топ-менеджеров.

Алевтина Чугунова (владелец продукта дизайн-системы) и Дарья Каткова (QA-инженер) из Сбера рассказали, как они создают и тестируют дизайн-систему для сотен команд. До внедрения системы интерфейсы iOS и Android выглядели как разные приложения, а веб-версия вообще жила своей жизнью. Теперь же скорость разработки выросла на 40%, а количество визуальных багов снизилось на 85%. Команда создала собственные инструменты для тестирования: Debug Overlay показывает границы и отступы всех компонентов прямо поверх интерфейса Android, а Theater автоматически генерирует видео работы интерфейсов из кода за 5 минут вместо часов съёмки. Кайф, что у них есть «Лаборатории», где можно проверить, как шрифты и тени ведут себя в реальных условиях, потому что в макете всё выглядит одним образом, а в приложении совершенно иначе. Внутри: – Почему стартапам можно без дизайн-системы, а большим компаниям нельзя; – Как работает Debug Overlay для Android и что он показывает; – Зачем нужны "Лаборатории" для проверки шрифтов и теней; – Как Theater снимает видео про интерфейсы без оператора; – Почему Safari стал особенной болью для команды; – Какие цифры получились после внедрения системы. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

🏡 домклик — продуктово-технологическая компания, а её команда — это большая продуктовая тусовка внутри экосистемы сбера. ребята создают удобные и надёжные цифровые сервисы в сфере недвижимости и делают всё, чтобы путь к дому мечты был не болью, а удовольствием: от поиска вариантов до финальной сделки, включая ипотеку, аренду и лайфстайл-решения вроде клининга а ещё сейчас у ребят открыты вакансии! будущих коллег ждёт классная стартап‑атмосфера с ресурсами крупного игрока 📍 сотрудники оценивают домклик (как работодателя) на 4,71 из 5 📍 93 % человек (по рейтингу habr) рекомендуют компанию своим друзьям 📍 в 2024 году ребята взяли золото в рейтинге лучших работодателей Forbes (уау!) 💬 если хочется узнать больше — у дизайн-команды домклика есть telegram-канал @domclickdesign, где можно подсматривать, как они живут внутри продукта: делятся кейсами, факапами, находками, и будут рады всем (особенно если вы в теме ux/ui, дизайн-систем и креатива)

🔗 Figma Community ▫️ #ui

#цвета #палитра #организация

lalomts.com/lineage Retro Figma

После месяцев усилий по построению библиотек и гайдов хочется увидеть отдачу. Но дизайн‑система — не музейный экспонат, а живой организм, который должен развивать продукт и экономить время команды. Откуда узнать, что он действительно работает? Ответ прост: мерить. 📎 Читать пост → Подписаться | Закрытый клуб

Универсальный набор иконок для интерфейсов. Подходит для дизайн-систем и веб-проектов. #icons ОТКРЫТЬ

Слава Каграманов рассказал, почему команды путались в ролях и теряли качество, а дизайн долг рос и превращал продукт в заплатки. Он показал, как вернуть порядок через признание долга на уровне руководства, время на craft, живую дизайн систему и регулярные совместные ревью. Дальше он предложил считать задачи по RICE, фиксировать решения, вести отдельные ретроспективы по качеству и мерить зрелость через UX score, coverage, скорость исправления визуальных багов и eNPS. Такой подход дал прозрачные приоритеты, снизил выгорание и вернул дизайну влияние на продукт. Внутри: – Почему копился дизайн долг; – Craft дни и дизайн система как продукт; – Совместные ревью и ретроспективы качества; – Приоритизация через RICE и фиксация решений; – Метрики зрелости и общий дашборд; – Риски вроде кладбища тикетов и как их закрывать. ➡️ Читать статью (medium, надо vpn) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Дизайн-система которая подходит для разных проектов Dezzigners

Гибкий генератор цветовых палитр для компонентов Radix UI. Можно кастомизировать и подстроить цвета под свой дизайн-системный стек. Работает быстро и без лишней возни. #цвета #palette #ui #дизайн #компоненты #ресурсы #интерфейсы Посмотреть 🔗

Сеть магазинов Пятёрочка создала флагманскую СТМ Выручай. Наша команда разработала дизайн-систему для новой марки Нам было необходимо создать зонтичный бренд, охватывающий более 20 категорий и объединяющий разрозненные СТМ под одним зонтом, и разработать гибкую визуальную систему 📍 Глобальной целью было увеличение продаж продуктов, ранее выпускавшихся под другими СТМ, и омоложение аудитории 👉Флагман уже вышел на полки супермаркетов сети. Узнать больше о нашей совместной работе можно по ссылке #depot_case

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

Ссылочка: Minimal E-Commerce App Теги: #полезное #макеты #UIKit #материалы Figma от 0 до 1

Коллекция готовых дизайн-систем для Figma с кодом и кейсами. Полезна для команд, которые хотят быстро масштабировать интерфейсы и держать визуал в едином стиле. #figma #дизайн_система #ui #компоненты #кейсы #ресурсы #интерфейсы Посмотреть 🔗

#цвета #переменные #палитры