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 Стэй тунед!

Costa news

Привет! На связи команда Consta, и мы к вам с новостями. Темизация и цветовые токены Мы готовимся к масштабному обновлению механик работы с темами — как в дизайне, так и в коде. Что изменится: • Откажемся от расчёта оттенков цветов через PostCSS в переменных компонентов. • Вместо этого введём Color Ramps — цветовые шкалы, построенные на базе базовых цветов. Оттенки из Color Ramps будут использоваться внутри компонентов. • Для удобства кастомизации тем разработаем инструмент генерации Color Ramps, чтобы вы могли создавать их самостоятельно. • Расширим набор цветовых переменных и статусных цветов для более гибкой работы с состояниями компонентов. • Обеспечим полную связку дизайна и кода — все цветовые и другие переменные будут синхронизированы. Плавный переход Для комфортного перехода текущие значения переменных перенесём в Figma Variables вместо старых стилей. Со следующей среды начнём публиковать группы компонентов, уже переведённых на переменные. Этот шаг — промежуточный этап перед полным обновлением тем. Пока в Figma Variables мы выносим только цвета, но скоро добавим шрифты, отступы и другие параметры для полной синхронизации с кодом. Кроме того, мы разработали плагин, который позволит быстро заменять стили на переменные в существующих компонентах — это упростит перевод ваших кастомных компонентов на новые цветовые переменные. Consta в Pixso В связи с выходом Pixso 2.0 готовим запуск Consta UI-Kit в этом инструменте на базе переменных. Ожидайте публикацию уже на этой неделе! Стэй тунед!
Изображение поста

UI Kit for Landings — Шаблон с большим количеством компонентов для мобильной и десктопной версии

Изображение поста

Плагин Rombo — значительно упрощает процесс создания анимации для компонентов интерфейса. С помощью предустановленных эффектов взаимодействия вы можете сразу же добавлять динамичные элементы в свои проекты, что делает процесс дизайна более быстрым и увлекательным.

❗️ Новостной дизайн
#news 📱 Figma Slides официально вышла из бета-тестирования #figma #uiux #designtrends #design Figma Slides — теперь доступна для всех тарифных планов и включает новые функции. Такие как интеграция с PowerPoint, улучшенное редактирование видео, компоненты для слайдов и анимации. 📌 Ссылка на источник Поставь реакцию 💕 | 🙍‍♂️ Design News
Бесплатные финансовые компоненты: светлые и темные.
• Легко создавайте и настраивайте финансовые информационные панели, диаграммы и отчеты. #finance #analytics #chart #ui Открыть в Figma Источник
Figma-учебник — секрет продуктивных дизайнеров
Долго возишься с выравниванием элементов? Забываешь, как сделать компонент? 150 хоткеев для работы в Figma сделают твою жизнь проще. Figma-учебник — это Telegram-бот, который всегда под рукой. Он ускорит твою работу в 2–3 раза. 📌 Хоткеи разбиты по темам 📌 Подходят для начинающих и продвинутых дизайнеров 📌 Не надо ничего гуглить или запоминать 📌 Подобраны для macOs и Windows Запускай Figma-учебник
Изображение поста
Figma-учебник — секрет продуктивных дизайнеров
Долго возишься с выравниванием элементов? Забываешь, как сделать компонент? 150 хоткеев для работы в Figma сделают твою жизнь проще. Figma-учебник — это Telegram-бот, который всегда под рукой. Он ускорит твою работу в 2–3 раза. 📌 Хоткеи разбиты по темам 📌 Подходят для начинающих и продвинутых дизайнеров 📌 Не надо ничего гуглить или запоминать 📌 Подобраны для macOs и Windows Запускай Figma-учебник
Изображение поста
Figma-учебник — секрет продуктивных дизайнеров
Долго возишься с выравниванием элементов? Забываешь, как сделать компонент? 150 хоткеев для работы в Figma сделают твою жизнь проще. Figma-учебник — это Telegram-бот, который всегда под рукой. Он ускорит твою работу в 2–3 раза. 📌 Хоткеи разбиты по темам 📌 Подходят для начинающих и продвинутых дизайнеров 📌 Не надо ничего гуглить или запоминать 📌 Подобраны для macOs и Windows Запускай Figma-учебник
Изображение поста
🤖 Автоматизация дизайн-систем: советы и инструменты для старта
Джос Памбу рассказал о синхронизации токенов, компонентов и документации, дал практические рекомендации по выбору инструментов, а ещё рассказал как эти процессы можно автоматизировать. Как обновление токена в Фигме автоматически попадает в код и документацию. Без автоматизации команды постоянно сталкиваются с рассинхроном: цвет поменяли в дизайне, но забыли в коде. В статье разбирается весь процесс: от настройки токенов через Token Studio до генерации кода через Supernova. Особенно интересна часть про AI, который помогает с именованием сотен токенов и генерацией документации. Джос предупреждает: не автоматизируйте всё сразу одним скриптом, лучше разбить на маленькие шаги. Внутри: – Какие инструменты синхронизируют токены между дизайном и кодом; – Как настроить экспорт из Фигмы в разные форматы кода; – Почему важно разбивать автоматизацию на маленькие шаги; – Где AI может реально помочь с дизайн-системой; – Какие ошибки чаще всего делают при автоматизации; – Пошаговая инструкция настройки через Supernova. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Niceverynice — коллекция компонентов, паттернов и решений разных компаний.
niceverynice.com/components
MC UI Componets K
Этот набор содержит более 15 полностью настраиваемых компонентов пользовательского интерфейса с автоматической компоновкой, вариантами, цветами и текстовыми стилями, которые помогут вам запустить ваш проект! #Components ОТКРЫТЬ 👨 Дизайн-телега
Изображение поста
🎉 Вёрстка не поехала: как тестировать интерфейсы без боли
Алевтина Чугунова (владелец продукта дизайн-системы) и Дарья Каткова (QA-инженер) из Сбера рассказали, как они создают и тестируют дизайн-систему для сотен команд. До внедрения системы интерфейсы iOS и Android выглядели как разные приложения, а веб-версия вообще жила своей жизнью. Теперь же скорость разработки выросла на 40%, а количество визуальных багов снизилось на 85%. Команда создала собственные инструменты для тестирования: Debug Overlay показывает границы и отступы всех компонентов прямо поверх интерфейса Android, а Theater автоматически генерирует видео работы интерфейсов из кода за 5 минут вместо часов съёмки. Кайф, что у них есть «Лаборатории», где можно проверить, как шрифты и тени ведут себя в реальных условиях, потому что в макете всё выглядит одним образом, а в приложении совершенно иначе. Внутри: – Почему стартапам можно без дизайн-системы, а большим компаниям нельзя; – Как работает Debug Overlay для Android и что он показывает; – Зачем нужны "Лаборатории" для проверки шрифтов и теней; – Как Theater снимает видео про интерфейсы без оператора; – Почему Safari стал особенной болью для команды; – Какие цифры получились после внедрения системы. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Middle UX/UI-дизайнер в Nimax
Мы — Nimax, создаем brand experience для компаний будущего. Задачи: — создание дизайн-концепций для сайтов и сервисов — работа в Figma, использование автолейаутов, компонентов, вариаций, секций и пр. — масштабирование дизайн-концепций на страницы сайта с опорой на прототип — работа с материалами брендинга — презентация и аргументированная защита концепции перед клиентом — подготовка адаптивов и сборка UI-китов — работа с композицией, сетками, силовыми линиями, акцентами, типографикой — участие в пресейлах Ожидания: — опыт в UX/UI от 2 лет — умеете разрабатывать дизайн-концепции с нуля и на основе брендбука, создаёте UI-дизайн для сайтов и веб-сервисов — опыт с мобильными приложениями будет плюсом — умеете собирать осмысленные мудборды — ведёте проект от идеи до финальной реализации, включая участие в запуске — свободно владеете Figma: используете автолейауты, компоненты, вариации, стили — создаёте и поддерживаете UI-киты и библиотеки компонентов Условия: — зарплата 100 000 - 110 000 руб / на руки — полностью белая зарплата, оформление с первого дня по ТК РФ — полная удалёнка или гибридный формат, если вы в Петербурге — полный рабочий день с гибким началом с 9 до 11 → Подробнее Контакт для отклика: rabota@nimax.ru, HR Кристина #дизайн
Изображение поста
Nucleus: бесплатная библиотека компонентов UI для мобильного приложения.
• Более 300 компонентов (+ варианты) • Более 50+ категорий компонентов (кнопки, переключатели, текстовые поля и т. д.) • 36 скринов для примеров • сетка 4pt #UIk #iOS #app #UI Открыть в Figma
Плагин Jony Eye — находит ошибки в макетах в типографике, стилях, документах и размещении элементов.
📖 Вышел Журналус № 470. Почему пингвинам ничё не надо делать
Вот что мы подготовили на этой неделе: • Цитаты из книги Юрия Гордона «О языке композиции» • В чём заключается метод Duolingo на практике • В чём недостаток интерфейсов ИИ-сервисов • Как синхронизировать токены, компоненты и документацию • Советы для подготовки к собеседованию на позицию UX-дизайнера • Эссе о вайбкодинге и его ограничениях • Почему начинающим дизайнерам ничего не нужно делать • Справочник OpenAI по использованию нейросетей • Интервью с Гердом Фляйшманом о времени, феномене и типографике Баухауза • Когда приложению нужен редизайн и как к нему подготовиться • Аппетитные упаковки мёда • Эстетичный промо-ролик велосипеда
Изображение поста
Набор пользовательского интерфейса.
• Компоненты с вариантами. • Стили текста. • Цветовые стили. #app #mobile #uik Открыть в Figma
Интерфейс браузера macOS.
• Светлая и тёмная темы. • Макеты браузера с векторными фигурами и редактируемыми URL-адресами и значками, масштабируемые на 100%. • Включает компоненты Google Come и Apple Safari (Catalina + Big Sur). • Полностью изменяемый размер и возможность повторного использования в качестве библиотеки компонентов. #browser #ui #UIk #macOS Открыть в Figma 👨 Дизайн-телега
📱 Как в Додо переписали слайдер оплаты на Compose
Дима Максимов из Dodo Engineering рассказал, как команда переписала слайдер быстрой оплаты с MotionLayout на Compose. Старый компонент накопил 15+ багов: слайдеры появлялись с двух сторон, текст просвечивал, а скрыть элементы было почти невозможно. Новый функционал для закрытых кофеен и переливающегося фона добили старую систему окончательно. Решение оказалось проще, чем казалось: создать кастомный Layout Composable вместо сложной структуры из стандартных контейнеров. Результат: контролируемые анимации, чистый код и возможность легко добавлять новые фичи. Плюс шиммер для подсказок и хаптик для тактильной обратной связи. Внутри: – Проблемы MotionLayout с видимостью и сложными сценами; – Выбор между Compound Composable и Layout для слайдера; – Создание каркаса с Thumb и Background компонентами; – Настройка жестов через AnchoredDraggable и якоря; – Измерение динамического контента по правилам дизайна; – Анимации растягивающегося следа и надписей; – Управление состояниями через внешний стейт; – Добавление шиммера и тактильной обратной связи. Статья больше техническая, но довольно интересная. Внутренняя кухня разработки мастхев) Особенно, когда дело касается мелочей в виде слайдера, а проблем тоже хватает 👀 Так что ваш слайдер в фигме за 2 минутки в макетах превращается в кучу кода для разработки)) ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста