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 в дизайне сейчас говорят очень много. Но если честно, большая часть контента до сих пор крутится вокруг промптов и генерации картинок. А вот как встроить все это в реальный продуктовый процесс, со своей дизайн системой, компонентами и живым прототипом, про это говорят сильно реже. На демках все обычно выглядит красиво. Один запрос, и у тебя готовый экран. А когда открываешь свой продукт, начинается уже другая история: компоненты не те, переменные мимо, логика ломается, руками потом переделываешь половину. ⏱ 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 Пока сама не тестировала, попробую попозже )

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

Михаил Руденко подробно разобрал понятие уникального торгового предложения (УТП), как оно работает и чем отличается от позиционирования. Он разобрал классические примеры, показал, почему они были сильными, и объяснил, что именно делает предложение по-настоящему уникальным, а не просто креативным или броским. В статье есть разбор ошибок, которые часто встречаются в попытках сформулировать УТП, и критерии, по которым можно проверить, есть ли у продукта уникальное предложение. Главное: • УТП отвечает на вопрос: почему человек должен выбрать именно вас? • В основе УТП лежат три компонента: предложение, уникальность и мотивирующая сила • Предложение должно быть таким, какого конкурент не может или не хочет дать • Предложение должно быть сильным, чтобы привести в движение множество людей • УТП нельзя сконструировать из воздуха — его основа должна быть в самом продукте • Хорошее УТП не просто уникально, но и трудно воспроизводимо • При создании УТП нужно выявить проблему клиента, а затем найти в продукте уникальное свойство, которое позволит эту проблему решить #статья@zhurnalus_lite

На задачу чуть сложнее добавления кнопки легко уходит до двух недель. Не потому что команда медленная, а потому что между идеей и релизом слишком много шагов: уточнить требования, собрать первую версию, обсудить с разработкой, доработать, проверить на дизайн-систему, подготовить 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 реально использовать в продуктовой работе, а не просто гонять красивые картинки, выглядит полезно и актуально на текущий год точно) Эфир будет у ребят в канале, вэлком 🔠 Смотреть эфир 🔠 Смотреть эфир 🔠 Смотреть эфир

Ваня Замесин, автор методологий AURA и Advanced JTBD, курса «Как делать продукт» и основатель сервиса подбора психотерапевтов «Мета» Задачи: — выстраивать визуальную систему YouTube-канала — превью, обложки, плашки — делать шаблоны для Telegram в едином стиле — оформлять макеты для Stories, Reels, Shorts — держать консистентность бренда на всех платформах Ожидания: — Figma + умение строить компонентные системы — знание технических параметров соцсетей — размеры, безопасные зоны — базовый Photoshop или аналоги — актуальное портфолио с примерами для соцсетей — используешь вайбкодинг в работе Условия: — удалёнка, GMT+3 — part-time с перспективой перехода на full-time — результат важнее количества часов — фикс обсуждаем индивидуально — платим по рынку — доступ к методам и подходам из курсов Вани Замесина → Почитать подробнее и откликнуться #дизайн

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

Install

• 130+ виджетов Install ️ Figma Дизайн

Install

🔶 Настраиваемая система с анатомически точными векторными иллюстрациями в разных ракурсах. Благодаря набору можно отдельно создавать все системы организма человека по деталям. 🔶 Адаптивный набор из более 1 700 изображений в урбанистическом стиле. Иллюстрации выполнены в двух цветах: чёрном и голубом. Здесь можно найти картинки по разным темам: бизнес, обучение, здоровье и другим. 🔶 Более 1 000 минималистичных чёрно-белых иллюстраций из 20 категорий. Векторные пикчи в авторской стилистике подойдут для лайфстайл-проектов с долей юмора. 🔶 Векторные картинки выполнены в нейтральной цветовой гамме. Иллюстрации с разными сюжетами из офисной жизни отлично подойдут для презентации или простого лендинга. 🔶 3D-эмодзи с изображениями людей. Есть PNG-файлы и SVG-версии (цветная и плоская), а также набор с высокой контрастностью. 🔶 Скетчи в стилистике бельгийского комикса «Тинтин». Простые линейные рисунки в светлых оттенках, юмористичные сюжеты с ситуациями из жизни. 🔶 Люди в процессе чтения и обучения. Цветные картинки в популярном плоском, геометрическом стиле. 🔶 Двухцветный набор в духе азиатских комиксов. Герои векторных дудлов изображены в саду, самолёте, за работой и в других ситуациях. Набор подойдёт, если нужно рассказать стройную историю, используя рисованных персонажей. 🔶 Настраиваемый пак с простой чёрно-белой графикой. Можно создать своего персонажа, используя разные компоненты, или взять готовый рисунок. Пригодится, если для проекта нужны разные городские типажи. 🔶 3D-персонаж для иллюстрации рабочего процесса. Герой в чёрной водолазке выступает перед графиками, читает или работает в кресле-мешке. 🔶 Забавные цветные аватарки. С помощью конструктора можно создать уникальный характерный юзерпик из предлагаемых блоков. 🔶 Люди и спорт в самых разных его вариантах. Плоская графика, серо-голубая гамма, гипертрофированные формы для лёгких, неперегруженных макетов. [Фабрика Дизайна]

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

Ваня Замесин — технологический предприниматель, автор методологий 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 • Результат важнее количества часов • Фикс обсуждаем индивидуально — платим по рынку • Доступ к методам и подходам из курсов Вани Замесина 👉Изучи вакансию подробнее и откликайся

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