SXL Studio — новый бесплатный набор инструментов для дизайнеров дизайн-систем, альтернатива Token Studio, быстрее и функциональнее. Поддерживает:

→ Database — маппинг слоев в фигме с backend данными из JSON, CSV, вставка картинок по https// ссылкам. → Tokens — применение, экспорт, поддержка более 35 типов токенов: number, sizing, spacing, dimenstion, typography, transition, image, color, fill, shadow, glass и другие. → Генерация component и componentSet из JSON (через ИИ можно конвертировать любой компонент (VUE3, React) в JSON и на основе этого кода сгенерировать в Figma точно такой же компонент) → Интеграция дизайна в Storybook → Экспорт переменных из JSON в CSS, Swift, Kotlin прямо из плагина → Поддержка GitHub и GitLab → Поддержка Dev Mode для Frontend разработчиков → Восстановление связей с master компонентом или подключение открепленных инстансов к мастер компоненту → Поддержка Remote соединения с Agent AI Install plugin

С AI в разработке почти у всех один и тот же цикл. В первой сессии он быстро собирает красивый экран, во второй начинает придумывать новые токены, в третьей путает отступы, а к десятой у вас уже ощущение, что продукт собирали три разные команды. Проблема не в том, что модель «плохая», а в том, что она не читает дизайн-систему так, как читает ее человек. В статье предлагают довольно практичный подход: сделать дизайн-систему понятной для LLM через спецификации, закрытый слой токенов, обязательный аудит и инструкции для каждой новой AI-сессии. То есть не надеяться, что модель сама догадается, какой у вас синий, какой радиус у кнопки и как должен собираться layout, а дать ей это в явном виде. На примере с Atlassian после такого подхода убрали 418 хардкодных значений из 28 файлов и свели их к системе токенов и спецификаций. Внутри: – Почему LLM не мыслят дизайн-системами и постоянно начинают с нуля; – Как из-за этого в прототипах копятся сотни мелких визуальных расхождений; – Зачем проекту нужны spec-файлы, которые модель читает в каждой сессии; – Почему закрытый слой токенов лучше, чем «разумные» догадки модели; – Как аудит ловит хардкодные цвета, отступы и другие нарушения до коммита; – Зачем связывать AI-инструкции, токены и CI в одну систему; – Как устроена структура спецификаций: foundations, tokens, components, patterns; – Почему такой подход особенно важен для больших прототипов и длинных AI-итераций. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Про 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, а какие пока не стоит 😇 Эфир пройдёт в закрытом тг-канале: подписаться

А пока я загружаю дизайн-систему туда, напишу про заявленную доступность Claude: • Аудит компонентов на соответствие WCAG 2.1 / 2.2 (A, AA, AAA) — контрастность, фокус, таб-порядок, размеры тач-таргетов • Проверка и генерация корректной ARIA-разметки (roles, states, properties, live regions) • Проверка работы с клавиатурой и фокуса • Анализ семантики HTML, heading hierarchy, landmark-регионов • Проверка alt-текстов • Генерация A11y-документации для компонентов дизайн-системы (do's/don'ts, примеры использования) Есть набор Accessibility Agents — специализированных агентов для Claude Code, GitHub Copilot и Claude Desktop, которые проверяют код на соответствие WCAG 2.2 AA, покрывают i18n/RTL, дата-визуализации, email, медиа, web components Пока сама не тестировала, попробую попозже )

Install ️Figma Дизайн

Пока в проекте живут цвета вроде #0055FF и отступы, прописанные руками, все кажется нормальным ровно до первого большого изменения. Потом начинается боль: что где используется, что можно трогать, как менять тему, почему один и тот же цвет называется тремя разными способами. В этот момент токены перестают быть «темой для системщиков» и становятся базовой гигиеной продукта. Дима очень хорошо раскладывает это через три слоя: примитивы, семантику и компонентные токены. Самое полезное здесь не теория, а логика: семантика отвечает на вопрос «зачем», компонентный слой на вопрос «где», а правильный нейминг делает систему понятной и для дизайнеров, и для разработчиков. Плюс есть нормальный блок про темную тему, deprecated-токены и версионирование, то есть не только про создание, но и про жизнь системы после запуска. Внутри: – Как устроена трехслойная архитектура токенов и зачем нужен каждый слой; – Чем семантические токены отличаются от компонентных; – Как собирать нейминг от общего к частному, чтобы не путаться потом; – Какие категории и свойства чаще всего используются в системе токенов; – Почему состояние default обычно не нужно писать явно; – Как токены помогают нормально поддерживать светлую и темную темы; – Что делать с устаревшими токенами, чтобы не ломать прод; – Почему без токенов любая масштабируемость быстро превращается в технический долг. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

С 20 по 26 апреля проводим Fast Track* для продуктовых дизайнеров — мероприятие быстрого найма в команды Yandex Cloud и Yandex Infrastructure. Все встречи — онлайн, рекрутер заранее договорится с вами об удобном времени. Ждём дизайнеров с опытом от 3 лет. Будет плюсом, если вы работали с интерфейсами для сложных экосистем, B2E- или SaaS-продуктами и участвовали в развитии дизайн-систем в том числе в опенсорс-проектах. Как получить офер: 🟣до 17 апреля зарегистрируйтесь на сайте; 🟣до 19 апреля выполните тестовое задание; 🟣20–26 апреля пройдите вайтборд, познакомьтесь с командами и получите офер. 🔸 Подробности и регистрация — по ссылке. Задачи сложные, масштаб впечатляет — присоединяйтесь!

Щепотка настроения вам с прода Сбола. Выше рассказывал, что у нас есть кайфарики которые концептят на постоянке, но не только они. Эмоции, салютики, микроанимации, изинги в анимашках, могут быть и на проде благодаря богатой дизайн-системе, например такой как наша Nova. @nice2mitya_chuk

С 20 по 26 апреля проводят Fast Track* для продуктовых дизайнеров — мероприятие быстрого найма в команды Yandex Cloud и Yandex Infrastructure. Все встречи — онлайн, рекрутер заранее договорится с вами об удобном времени. Ждут дизайнеров с опытом от 3 лет. Будет плюсом, если вы работали с интерфейсами для сложных экосистем, B2E- или SaaS-продуктами и участвовали в развитии дизайн-систем в том числе в опенсорс-проектах. Как получить офер: — до 17 апреля зарегистрируйтесь на сайте; — до 19 апреля выполните тестовое задание; — 20–26 апреля пройдите вайтборд, познакомьтесь с командами и получите офер. Подробности и регистрация — по ссылке. Задачи сложные, масштаб впечатляет — присоединяйтесь!

На задачу чуть сложнее добавления кнопки легко уходит до двух недель. Не потому что команда медленная, а потому что между идеей и релизом слишком много шагов: уточнить требования, собрать первую версию, обсудить с разработкой, доработать, проверить на дизайн-систему, подготовить UX-тесты, потом еще раз все довести до финала. Элиза Буренок из Точки рассказывает, как они сократили этот путь почти вдвое. Вместо того чтобы сначала долго искать идеальное решение в Фигме, они параллельно собирают рабочие прототипы в Cursor, быстрее находят пробелы в логике, показывают идею команде, тестируют на пользователях и только потом переводят все в финальную раскадровку. На один экран у нее уходит до часа, на сценарий до дня. Внутри: – Почему на обычный дизайн-процесс легко уходит до 10 этапов и 2 недель; – Как прототип в Cursor помогает быстрее найти пробелы в задаче и корнер-кейсы; – Зачем дизайнеру готовить проект через правила, команды, токены и компоненты; – Как режим Plan помогает декомпозировать задачу перед реализацией; – Как связка Cursor и MCP Figma ускоряет сборку экранов; – Что помогает уменьшить галлюцинации модели и не потерять контроль; – Почему прототипы в Cursor удобнее для UX-тестов, чем сырые макеты; – Чем Cursor отличается от Lovable, Replit, Bolt и Figma Make по точности, стоимости и контролю. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Старая система у студии была слишком тяжелой, негибкой и годилась в основном для грубого вайрфрейминга. На ней было сложно собирать нормальные высокодетализированные прототипы, приходилось постоянно что-то править на ходу, а первое впечатление от работы могло страдать просто из-за плохого визуала и топорных компонентов. В какой то момент команда решила не латать это бесконечно, а пересобрать все с нуля. Завели токены, пошли через атомарный дизайн, начали с самых частых элементов вроде кнопок, инпутов и выпадающих списков, а потом нарастили библиотеку до рабочего инструмента, который ускоряет и проектирование, и дизайн. В итоге выиграла и студия, и клиенты: меньше ручной рутины, быстрее концепты, проще кастомизация под конкретный продукт. Внутри: – Почему старая дизайн-система тормозила работу и съедала ресурсы; – Чем дизайн-система отличается от обычного UI-kit; – Как команда собирала новую систему через токены и атомарный дизайн; – Почему начали с малого, а не пытались охватить все сразу; – Как переиспользуемые компоненты ускорили проектирование интерфейсов; – Почему скорость не превращает проекты в однотипные шаблоны; – Что получает клиент, когда у студии есть нормальная дизайн-система; – Как токены помогают адаптировать одну систему под разные продукты. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Дизайн-система обычно начинает ломаться не тогда, когда она маленькая, а когда команда начинает обходить ее сама. Где-то отцепили инстанс, где-то сделали еще 12 вариантов карточки, где-то собрали отдельный модал только потому, что в базовом компоненте не хватило свободы. В Фигме для этого запустили слоты. По сути это способ оставить структуру компонента стабильной, но менять содержимое внутри без detatch. Зои Адельман и Сара Келли показывают, что лучше всего это работает на меню, модалках, карточках, панелях и даже крупных layout-компонентах. Для дизайн-систем это меньше вариантов и поддержки, для дизайнеров больше свободы внутри системы. Внутри: – С каких компонентов лучше начинать внедрение слотов, чтобы эффект был заметен сразу; – Когда слот должен быть пустым, а когда лучше сразу давать дефолтный контент; – Как preferred instances помогают не превратить свободу в хаос; – Почему слоты полезны не только для мелких элементов, но и для целых layout-блоков; – Как слоты сокращают количество вариантов и уменьшают поддержку библиотеки; – Почему связка со структурой кода делает handoff понятнее; – Как слоты помогают не detatch-компоненты там, где раньше без этого не обходилось; – Почему для автоматизации и AI это тоже важный шаг, потому что структура становится явной. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Если сейчас открыть вакансии, картина в целом понятная. Фигма уже давно база, насмотренность тоже. А вот дальше почти везде начинают мелькать Курсор, Клод, Мижорня и другие AI инструменты. То есть AI навыки из «будет плюсом» довольно быстро перешли в категорию «ну это уже надо уметь». Но проблема даже не в этом. Названия инструментов знают уже почти все. А вот нормально встроить их в рабочий процесс умеют пока немногие. Обычно как бывает. Нагенерил интерфейс, на первый взгляд вроде ок. А потом смотришь внимательнее: компоненты не из твоей библиотеки, токены кривые, стили живут своей жизнью и половину все равно приходится пересобирать руками. В итоге времени потратил много, токены сжег, а профита не так уж и много. 🗓 7 апреля в 18:00 мск Даниил Шишко из Pixel Perfect проведет бесплатный эфир как раз про это. Покажет не абстрактные советы, а нормальный процесс на реальной задаче. Возьмет кейс от крупной красной корпорации из РФ: сложный интерфейс, сайдбар с вложенными сервисами, два типа пользователей и своя дизайн система. В общем, та самая история, на которую обычно уходит несколько дней только на макеты, а потом еще ждешь, пока все это закодят. 🔥 Что покажет? На эфире соберет это за час через Antigravity с Claude Code внутри. Покажет, как перенести дизайн систему так, чтобы AI сам подтягивал правильные компоненты, и как быстро собрать прототип, который уже можно тестировать. Плюс отдельно покажет, как вкатиться в такой агентский воркфлоу без лишних затрат. Если давно хотели понять, как AI реально использовать в продуктовой работе, а не просто гонять красивые картинки, выглядит полезно и актуально на текущий год точно) Эфир будет у ребят в канале, вэлком 🔠 Смотреть эфир 🔠 Смотреть эфир 🔠 Смотреть эфир

Для каждого дизайнера есть свой пул инструментов: Kling, Midjourney, ChatGPT, Codex и другие. Но до сих пор многие не до конца понимают, как встроить их в рабочий процесс Сейчас, вдобавок к обычным чатам, становятся популярнее Codex / Antigravity / Claude — потому что с их помощью можно делать свои продукты или прототипы. Но проблема, с которой сталкиваются люди (в том числе писали в комментариях в этом канале) — это непонимание, как связать компоненты между Figma и продом. Я сам пока не нашёл оптимальное решение, но уже знаю про несколько рабочих вариантов 😇 Как раз на эту тему Даниил Шишко из Pixel Perfect проведёт бесплатный эфир, где покажет полный процесс. Возьмёт реальную задачу от одной большой «красной» корпорации из РФ: нужно спроектировать сайдбар с вложенностью, разными типами пользователей и своей дизайн-системой. Это очень близкий формат задачи в продуктовой команде Когда? 7 апреля в 18:00 МСК Всё будет в лайв-формате, инструмент — Antigravity с Claude Code внутри. Что именно будет: - Перенос дизайн-системы так, чтобы AI сам брал правильные компоненты - Вайбкодинг рабочего прототипа через Claude Code, готового к тесту - Дополнительно покажет способ вкатиться в агентский воркфлоу, который работает бесплатно Я сам планирую пойти, потому что хочется посмотреть на подход 🔥 Эфир будет в закрытом тг-канале, подписывайтесь: https://t.me/+SpH0wTjuA0A1YmUy

HUMAN — агентство, которое уже 10+ лет делает не просто креатив, а создает смыслы: кино, фестивали, арт-объекты, ивенты и рекламные кампании для топовых брендов. Ищут арт-директора, который сможет брать сложные проекты с нуля, задавать сильное визуальное направление, развивать команду дизайнеров и держать высокую планку качества на каждом этапе работы. 📍 Москва, гибрид 🕐 Полная занятость 👀 Что ожидают: – Опыт Senior специалиста и портфолио - Опыт ведения проектов под ключ: от идеи до финальной сдачи клиенту - Сильный арт-дирекшн и умение давать четкие, структурированные правки, которые реально улучшают результат - Экспертное владение Figma и Adobe Suite (Photoshop, Illustrator и др.) - Глубокое понимание адаптации графики под разные носители: digital, офлайн, широкоформатная печать - Опыт с предпечатной подготовкой, оптимизацией файлов, дизайн-системами и мастер-макетами - Насмотренность и системный подход к референсам: не просто “красиво”, а с пониманием, почему это работает - Умение быстро находить визуальные решения в разных стилистиках: от классики до экспериментальной типографики - Осмысленное использование нейросетей как инструмента ускорения с последующей ручной доработкой - Лидерство, умение делегировать, поддерживать команду и выстраивать приоритеты - Сильные коммуникационные навыки и способность защищать визуальные решения перед клиентом и внутри команды 💎 Чем будете заниматься: - Выстраивать процесс так, чтобы финальный визуальный продукт стабильно соответствовал высокому уровню агентства - Проверять и направлять работу дизайнеров на всех этапах проекта - Брать на себя сложные проекты с нуля: формулировать визуальную идею, собирать мудборды и референсы, задавать направление команде - Развивать дизайнеров: помогать лучше чувствовать типографику, сетку, композицию, ритм и иерархию - Помогать команде не закапываться в лишний перфекционизм там, где важнее скорость и точность - Внедрять эффективные инструменты и улучшать внутренние процессы - Участвовать в презентациях идей внутри агентства и с клиентами - Переводить обратную связь в понятные задачи и решения 🦋 Что предлагают: - Оформление по ТК РФ - ДМС - Гибридный формат работы с фокусом на удаленку - Зарплату по итогам собеседования - Полную занятость с гибкими часами работы - Ежеквартальные бонусы - Возможность расти, учиться у сильной команды и делать по-настоящему крутые проекты: от креативов 360 до создания айдентики фестивальных фильмов и м/н фестивалей - Теплую атмосферу без офисного формализма - Важно: бывают периоды высокой загрузки, когда нужно подключаться в выходные, праздники или вне стандартного графика 🔠 Почта для отклика: valerieklabukova@wearehuman.ru

Ваня Замесин — технологический предприниматель, автор методологий AURA и Advanced Jobs To Be Done. Эксперт #1 среди продакт-менеджеров в России. Вместе с командой мы активно развиваем экосистему продуктов: курс «Как делать продукт», AURA Framework — AI-платформа и сообщество для создателей продуктов, BOOST — интенсив по нейросетям. Что будешь делать • Развивать дизайн-систему: сетки, типографика, компоненты, стили контента • Верстать слайды для воркшопов • Визуализировать процессы так, чтобы сложное становилось понятным • Верстать онлайн-книгу • Адаптировать контент для Telegram Что важно • Уверенный Figma — auto-layout, компоненты, стили • Сильная типографика и вёрстка • Навыки визуализации данных • Системное мышление и скорость без потери качества • Используешь вайбкодинг в работе Условия • Удалёнка, GMT+3, 10:00–19:00 • Part-time с перспективой перехода на full-time • Результат важнее количества часов • Фикс обсуждаем индивидуально — платим по рынку • Доступ к методам и подходам из курсов Вани Замесина 👉Изучи вакансию подробнее и откликайся

На одном из проектов мы активно используем ее, как рабочий прототип. И пожалуй, это первый раз за всю шумиху с нейронками, когда я почувствовала революционное решение. Этот инструмент действительно очень удобен и выполняет невероятные вещи по командам с ИИ-чатом. Раньше для наглядности и проверки флоу нам нужно было линковать все макеты и состояния элементов в обычной Figma, а сейчас на довольно качественном уровне вы можете попросить сделать это Make (текстовым описанием или прикрепленными Figma файлами). Настоящая магия! НО сейчас в проекте мы уперлись в необходимость опоры на дизайн-систему. Из-за отсутствия привязки к какому-то главному Figma макету, наши версии могут немного плясать по дизайну. Только из-за этого неудобства Make сейчас не может стать самостоятельным инструментом. Думаю, это докрутят в ближайшее время. Во всем остальном считаю это прорывом 🖤 Очень советую попробовать! Сейчас пока еще можно поиграться с ней в бесплатной версии. Картиночка взята из статьи

Команды редко тормозят на этапе рисования экранов. Обычно проблема в другом: нужно быстро проверить идею, а потом не разгребать хаос. Сделали экран в Фигме, ушли в AI-инструмент, получили прототип, вернулись и начали менять случайные кнопки и отступы на свои. Полдня ушло. Ромина Кавчич хорошо объясняет, почему так происходит. Проблема не в AI, а в потере контекста. Figma Make дает результат, когда работает внутри вашего файла с дизайн-системой: компонентами, вариантами, переменными и правилами нейминга. Плюс можно подтянуть требования и контент из Notion, GitHub, Jira и других источников, чтобы прототип собирался не по догадкам. Внутри: – Почему без подключенной библиотеки Figma Make почти всегда генерирует общий и нерелевантный UI; – Что нужно сделать перед первым промптом: включить библиотеки, выписать точные имена компонентов, определить границы прототипа; – Как писать промпты, чтобы инструмент использовал ваши компоненты и состояния, а не придумывал новые; – Зачем сразу требовать состояния загрузки, пустого экрана, ошибки и успеха; – Как итерироваться быстрее: править по одному изменению за раз и не копить правки в один запрос; – Как подключать внешний контекст из Notion и GitHub вместо копипаста требований; – Когда есть смысл использовать живые данные и API, чтобы проверить плотность контента и крайние случаи; – Какие варианты выхода есть после сборки: оставить в Фигме, экспортировать код как референс или дать демо-ссылку. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы