Detach Variables — плагин для отделение переменных применяемых к фреймам, группам и разделам

Install

Про AI в дизайне сейчас говорят очень много. Но если честно, большая часть контента до сих пор крутится вокруг промптов и генерации картинок. А вот как встроить все это в реальный продуктовый процесс, со своей дизайн системой, компонентами и живым прототипом, про это говорят сильно реже. На демках все обычно выглядит красиво. Один запрос, и у тебя готовый экран. А когда открываешь свой продукт, начинается уже другая история: компоненты не те, переменные мимо, логика ломается, руками потом переделываешь половину. ⏱ 22 апреля в 18:00 мск Даниил Шишко из Pixel Perfect проведёт бесплатный эфир как раз про нормальный рабочий процесс. На реальном продукте покажет связку Figma MCP и Claude Code. Агент будет видеть variables и компоненты прямо из Figma, собирать экраны строго по дизайн системе, а дальше из этого же процесса соберут живой React прототип. Плюс отдельно разберут Claude Design. Что он уже умеет, где реально помогает и где пока рано ждать магии. 🥰 Какую пользу получите Поймёте, как настроить агента под свою дизайн систему, какие задачи уже можно отдавать AI, а какие лучше пока держать под контролем. И главное, увидите не просто красивую демку, а рабочий пайплайн, который можно потом применить у себя. Если хотите разобраться, как AI использовать не для твиттер демо, а в нормальном боевом процессе — рекомендую 👌 Эфир будет в закрытом канале, приходите, чтобы не пропустить 🔠 Подписаться на закрытый канал 🔠 Подписаться на закрытый канал 🔠 Подписаться на закрытый канал

Про AI в дизайне сейчас говорят очень много. Но если честно, большая часть контента до сих пор крутится вокруг промптов и генерации картинок. А вот как встроить все это в реальный продуктовый процесс, со своей дизайн системой, компонентами и живым прототипом, про это говорят сильно реже. На демках все обычно выглядит красиво. Один запрос, и у тебя готовый экран. А когда открываешь свой продукт, начинается уже другая история: компоненты не те, переменные мимо, логика ломается, руками потом переделываешь половину. ⏱ 22 апреля в 18:00 мск Даниил Шишко из Pixel Perfect проведёт бесплатный эфир как раз про нормальный рабочий процесс. На реальном продукте покажет связку Figma MCP и Claude Code. Агент будет видеть variables и компоненты прямо из Figma, собирать экраны строго по дизайн системе, а дальше из этого же процесса соберут живой React прототип. Плюс отдельно разберут Claude Design. Что он уже умеет, где реально помогает и где пока рано ждать магии. 🥰 Какую пользу получите Поймёте, как настроить агента под свою дизайн систему, какие задачи уже можно отдавать AI, а какие лучше пока держать под контролем. И главное, увидите не просто красивую демку, а рабочий пайплайн, который можно потом применить у себя. Если хотите разобраться, как AI использовать не для твиттер демо, а в нормальном боевом процессе — рекомендую 👌 Эфир будет в закрытом канале, приходите, чтобы не пропустить 🔠 Подписаться на закрытый канал 🔠 Подписаться на закрытый канал 🔠 Подписаться на закрытый канал

Про AI в дизайне говорят везде. А встроить в рабочий процесс сложнее, чем кажется 🤩 Демо в твиттере впечатляют: один промпт, и готовый интерфейс за 30 секунд. Но садишься делать сам и понимаешь, что между демо и твоим продуктом огромная дистанция. Как вайбкодить, чтобы агент работал с твоими компонентами? Как перестать переделывать за AI каждую генерацию? 😎 22 апреля в 18:00 мск Даниил Шишко из Pixel Perfect проведёт бесплатный эфир. Покажет, как работает связка Figma MCP + Claude Code на реальном продукте. Агент напрямую видит Variables и компоненты из Figma, поэтому создаёт экраны строго по дизайн-системе. А дальше завайбкодит прототип одной командой. В конце разберёт возможности и ограничения новинки Claude Design. Что заберёшь с эфира: · рабочий пайплайн Figma MCP → Claude Code → Прототип · настройку агента под твою дизайн-систему · понимание, какие задачи можно отдать AI, а какие пока не стоит 😇 Эфир пройдёт в закрытом тг-канале: подписаться

Плагин для удобного создания цветовых тем и сохраняя их в переменные. Скачать плаги🎨 #plugin

Install plugin

В этом году я писал не так много — постов и длинных текстов было меньше, чем обычно. Весь фокус ушёл в основную работу и два сезона подкастов. Поэтому вместо классических итогов года — просто аккуратно разложу, что вообще случилось и чем этот год запомнился. 🎙 Этот ваш дизайн В этом году у подкаста случился новый этап — целый сезон из 14 эпизодов и новая соведущая — Лавруш. Мы много пробовали, экспериментировали, спорили, смеялись и, кажется, наконец нащупали свой ритм. Вот несколько выпусков, которые вы слушали чаще всего: ☺️HR-бренд компании и личный бренд сотрудника ☺️Что взять с собой на собеседование ☺️Как собрать единорога в одиночку: взрослый разговор про нейросети ☺️Эмоции, метаданные и бренд, который выбирают ☺️Системный подход к личной продуктивности ☺️Как появляются девайсы: исследования, идеи и физический дизайн А ещё в этом сезоне появились циферки — от прослушиваний до денег. Про них тоже рассказал отдельно. 🎙 Дизайн Тусовка Отдельное событие этого года — сезон из пяти выпусков вместе с Зелёным Банком. Про людей, работу, сомнения и реальность между дизайном и менеджментом: ☺️Дружитес: как дизайнеру и продакту найти коннект ☺️Будущее на колёсах: как работает автономный транспорт ☺️Реальная жизнь между дизайном и менеджментом ☺️Обучение без боли. Как не бросить всё после второго занятия ☺️Как считать деньги в дизайн-системе ❤️ Записи Без лонгридов, заметок и мнений тоже конечно же не обошлось (осторожно, много букав): ☺️Подробный разбор переменных Figma Variables ☺️Как быстро подготовиться к защите решения ☺️Киберпсихология и ИИ: как дизайнеру писать тексты с помощью нейронок ☺️Пути продуктового дизайнера ☺️Когда нейросеть стала соавтором, может ли дизайнер остаться креатором? ☺️Ошибки дизайн-лида ☺️Как появляются инсайты, реально меняющие продукт: взгляд исследователя Очень хочется верить, что ваш год был если и не простым, но в жоском росте. С наступающим, друзья 🥂 Пусть в 2026 будет больше спокойствия, ясности и ощущения, что вы на своём месте. Увидимся в новом году ❤️

Плагин для удобного создания цветовых тем и сохраняя их в переменные Install 🖼️ Figma Дизайн

Figma Community • #tools

Figma Community • #colors

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

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

Плагин для удобного создания цветовых тем и сохраняя их в переменные. 🎨 Скачать плагин 🎨 #plugin

Шрифт Climate Crisis с переменными (variables) опубликован в Google Fonts, и соответственно доступен в фигме бесплатно. Лицензия open font — можно использовать даже в коммерческих целях. С движением ползунка в параметах буквы постепенно «тают», а год в перемнной соответствует уровню истоических наблюдений ледяного покрова и прогнозу до 2050 года. Это крутой пример того, что переменные не обязательно должны обозначать классические типографские насыщенность и плотность (ширину). По сути в переменную шрифта можно зашить почти любое поведение, которое поддерживают веб технологии. На сайте шрифта плакатики приятные тоже: https://kampanjat.hs.fi/climatefont/ #fonts@cogload #находки@cogload

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

Подходит для: — Размеров шрифтов. — Жирности шрифтов. — Семейства шрифтов. — Высоты строк. #переменные #стили #текст

🔗 Figma Community ▫️ #tools

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

Плагин «Цвета в именованные переменные» Figma для преобразования всех используемых цветов в переменные цвета в Figma. #figma #plugin

Inter сам по себе прикольный базовый шрифт, многие дизы его любят! Но оказывается можно сделать его еще круче, с помощью таких настроек: Figma version: – В настройках шрифта зайди в Details – Включите Stylistic alternates – Включите single-storey "a" (буква a станет однопалочной) – Трекинг на -2 и всё сразу выглядит собранно и стильно! – Там же в настройках зайдите во вкладку Variable и поиграйте с настройками. Можно задавать толщину/вес (от 100 до 900) и наклон от 0 до -10 градусов Интересные факты: - Первое название шрифта было "Interface", потому что он создавался именно для UI-дизайна – Шрифт создан дизайнером Расмусом Андерссеном при работе над интерфесом для Figma, он делал подобную задачу впервые! Так что Inter это системный шрифт Figma, а так же основной шрифт платформы Notion и многих других диджитальных продуктов – У него полностью открытая лицензия (SIL Open Font License) можно использовать и в коммерческих проектах, и в продакшене без ограничений 💫 Как вы относитесь к этому шрифту? Успел надоесть как Montserrat или пока ещё нет?