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 в этом инструменте на базе переменных. Ожидайте публикацию уже на этой неделе!
Стэй тунед!
Плагин «Color Scale Variables» by Jonny Gwillim
Плагин для удобного создания цветовых тем и сохраняя их в переменные.
🎨 Скачать плагин 🎨
#plugin
Шрифт на основе данных о ледяном покрове земли.
Шрифт Climate Crisis с переменными (variables) опубликован в Google Fonts, и соответственно доступен в фигме бесплатно.
Лицензия open font — можно использовать даже в коммерческих целях.
С движением ползунка в параметах буквы постепенно «тают», а год в перемнной соответствует уровню истоических наблюдений ледяного покрова и прогнозу до 2050 года.
Это крутой пример того, что переменные не обязательно должны обозначать классические типографские насыщенность и плотность (ширину).
По сути в переменную шрифта можно зашить почти любое поведение, которое поддерживают веб технологии.
На сайте шрифта плакатики приятные тоже:
https://kampanjat.hs.fi/climatefont/
#fonts@cogload #находки@cogload
Middle+/Senior UX/UI designer в Spans Agency
Мы — Spans Agency, рассказываем истории брендов по-своему: создаём крутые сайты, брендинг и удобный UX.
Задачи:
— разрабатывать и презентовать дизайн-концепции
— проводить аналитику
— создавать прототипы
— разрабатывать дизайн
— адаптировать под разные устройства
— взаимодействовать с разработчиками и проводить дизайн-ревью
Ожидания:
— самостоятельно ведешь дизайн-проекты от начала и до конца
— умеешь разрабатывать концепции и создавать визуальные решения для брендов
— системно подходишь к работе, обладаешь логическим мышлением и придерживаешься принципа pixel perfect
— работаешь с визуальным дизайном на высоком уровне, включая композицию, форму, цвет и типографику
— уверенно владеешь инструментами Adobe и Figma на продвинутом уровне, используешь Properties, Variables и Styles
— ты составляешь консистентные дизайн-системы и UI KIT
Условия:
— удаленный формат работы с 10 до 19 по Мск или офис в Москве
— оформление как самозанятый или по договору с ИП
— зарплата обсуждается по итогам собеседования
→ Подробнее
Контакт для отклика:
@Lena_Nag
#дизайн
