Spacing Audit — скилл, который проверяет отступы и пропорции в макете. Находит места, где сбилась сетка, появились случайные значения или нарушился ритм между элементами. После проверки подсказывает, что стоит поправить.

# Spacing Audit Check a layout against a 4/8pt spacing scale, report every value that is off the grid, and snap it to the nearest correct step. The goal is consistent, predictable rhythm that is easy to hand off and maintain. ## The scale Base unit is 8. Use 4 only as a half-step for tight, component-internal spacing. Allowed values: 0, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 80, 96. - 8, 16, 24, 32, 48, 64: structural spacing (section gaps, card padding, layout margins). - 4, 12, 20: fine spacing inside a component (icon-to-label, chip padding, tight stacks). - Anything not a multiple of 4 is off-grid and should be flagged. - A multiple of 4 that is not a multiple of 8 at the layout level (e.g. section gap of 20 or 28) should be flagged as "consider 8pt step" but is not a hard error. ## What to check Inspect auto-layout frames and spacing between elements: - Padding inside frames (top, right, bottom, left). - Item spacing / gap between children. - Gaps between sections and between grouped blocks. - Margins around content within a frame. ## How to audit 1. Walk the selected frame (or the whole page if nothing is selected) top-down. 2. For each spacing value, compare it against the allowed scale. 3. For each off-grid value, choose the nearest allowed step. When exactly between two steps, round to the one closer to the surrounding rhythm of that group. 4. Prefer consistency within a group over per-element correctness. If three cards use 14, 16, 16, align all three to 16. ## Rules - Do not change layout structure, sizing behavior (hug/fill), content, or styling. Only adjust spacing values. - Preserve intentional exceptions and do not flag them: 1px borders and hairlines, optical alignment offsets, values driven by hug/fill, and spacing set by a variable or token. - If spacing is already bound to a variable or token, leave it and note it instead of overwriting. - Round icon-to-label and other fine gaps to 4 or 8, not to larger steps. - When a whole group is uniformly off-grid on purpose (e.g. a deliberate 6pt system), flag it once and ask before mass-changing. ## Output 1. Return an audit summary first, before changing anything: - Total elements checked. - A before / after list of every off-grid value, grouped by frame, in the form `Card padding: 14 -> 16`. - Any values you left untouched, with the reason (token, hairline, optical). 2. Apply the fixes only after showing the summary. 3. End with a one-line rhythm note: the dominant step the layout now uses (e.g. "layout now on an 8pt rhythm, fine spacing on 4pt"). ## Do not - Do not resize elements or reflow content to hit a number. - Do not invent a new scale. Stick to the 4/8pt steps above. - Do not touch corner radius, stroke, or type unless the user explicitly asks.

Export styles to CSS variables — экспорт стилей в CSS с заданными параметрами.

Что почитать от designwarmups 👍

🟣 how to reduce digital fatigue in interfaces про то, как интерфейс выматывает не количеством экранов, а количеством усилий — лишнее поле, два одинаково громких сиба, длинный абзац hackernoon.com/how-to-reduce-digital-fatigue-in-interfaces 🟣 the rise of gamification in fintech почему банковские приложения забирают механики у дуолинго и фитнес-трекеров, и где проходит граница между мотивацией и манипуляцией hackernoon.com/the-rise-of-gamification-in-fintech-and-digital-banking 🟣 how to reduce localization time with figma variables практический разбор, как собрать мультиязычный интерфейс на переменных и не пересобирать макеты руками hackernoon.com/how-to-reduce-interface-localization-time-with-figma-variables 💛 а это про нас tech times написали про design warm-ups — как формат разминок работает как обучение через практику и что из этого могут забрать другие индустрии www.techtimes.com/articles/319814/ обсудить всё это — @Designwarmups_chat

==GLYPHS 4 PUBLIC PREVIEW==

_______ к контуру теперь применяются настройки пера, кастомно меняем толщину и угол чтобы толщины и наплывы были только там, где нужны. стыковки штрихов тоже улучшили и теперь можно обойтись без разъединения сегментов. 9 рукописников из 10 ___ сегмент или весь контур можно удалить сразу на всех мастерах (opt+del / opt+shift+del) 8 райнеров из 10. хорошо. очень хорошо ___ новые звёздные точки сохраняют плавность кривой на соединениях. 15 казуалок из 10. интересно к чему это приведет, но факт—редактор стал гораздо удобнее для тех, кто работает с иконками ___ в фонт вью добавили новый режим с расширенной информацией о глифе. удобное. радуемся ___ в фонтинфо можно сворачивать список. радуемся и экономим километры скролла ___ список начертаний стал таблицей начертаний. норм. удобное. 300+ инстансов—новый стандарт ___ мастер можно не удалять, а деактивировать. 20 организованных папок из 10 ___ встроенный слайдер интерполяции убил variable font preview. 999 летающих точек из 10. кстати, за первой точкой больше не нужно следить. радуемся ___ пройдёмся по экспорту. во первых, вариативный cff2, не нужно пока, но нужно будет. а ещё можно экспортировать шрифт сразу sf symbol или как jpg/svg. ребята, пилящие иконки—радуемся ___ плагинов стало столько, что в плагин менеджеров добавили фильтры:) ___ макровиндоу -> скриптинг виндоу. 10 не-ии кодеров из 10. организация вкладок, исправление кода… мммммм, нравится ___ инфо глифов слили с юникод чекером и теперь не нужно никуда переходить чтобы посмотреть как его рисовали в других шрифтах. 7 проектов с незнакомой письменностью из 10 ___ • раскраска слоев больше не сливается при выделении глифов • неэкспортируемые глифы перечеркиваются тонкой линией в окне редактирования • результат вычисления формулы в полуапрошах стал прозрачнее самой формулы • дублированный контур теперь явно маркируется • история запущенных скриптов стала глубже • новый формат для сетов иконок • вращать форму теперь можно за границы объекта • имена глифов теперь пишутся конденсом. называемглифыкакхотимивсеувидим
==GLYPHS 4 PUBLIC PREVIEW==
_______ к контуру теперь применяются настройки пера, кастомно меняем толщину и угол чтобы толщины и наплывы были только там, где нужны. стыковки штрихов тоже улучшили и теперь можно обойтись без разъединения сегментов. 9 рукописников из 10 ___ сегмент или весь контур можно удалить сразу на всех мастерах (opt+del / opt+shift+del) 8 райнеров из 10. хорошо. очень хорошо ___ новые звёздные точки сохраняют плавность кривой на соединениях. 15 казуалок из 10. интересно к чему это приведет, но факт—редактор стал гораздо удобнее для тех, кто работает с иконками ___ в фонт вью добавили новый режим с расширенной информацией о глифе. удобное. радуемся ___ в фонтинфо можно сворачивать список. радуемся и экономим километры скролла ___ список начертаний стал таблицей начертаний. норм. удобное. 300+ инстансов—новый стандарт ___ мастер можно не удалять, а деактивировать. 20 организованных папок из 10 ___ встроенный слайдер интерполяции убил variable font preview. 999 летающих точек из 10. кстати, за первой точкой больше не нужно следить. радуемся ___ пройдёмся по экспорту. во первых, вариативный cff2, не нужно пока, но нужно будет. а ещё можно экспортировать шрифт сразу sf symbol или как jpg/svg. ребята, пилящие иконки—радуемся ___ плагинов стало столько, что в плагин менеджеров добавили фильтры:) ___ макровиндоу -> скриптинг виндоу. 10 не-ии кодеров из 10. организация вкладок, исправление кода… мммммм, нравится ___ инфо глифов слили с юникод чекером и теперь не нужно никуда переходить чтобы посмотреть как его рисовали в других шрифтах. 7 проектов с незнакомой письменностью из 10 ___ • раскраска слоев больше не сливается при выделении глифов • неэкспортируемые глифы перечеркиваются тонкой линией в окне редактирования • результат вычисления формулы в полуапрошах стал прозрачнее самой формулы • дублированный контур теперь явно маркируется • история запущенных скриптов стала глубже • новый формат для сетов иконок • вращать форму теперь можно за границы объекта • имена глифов теперь пишутся конденсом. называемглифыкакхотимивсеувидим
🤓 Локализация интерфейса — это вечная боль: дубли макетов, ручная правка под каждый язык, бесконечные итерации.
Таня собрала практический разбор на Hackernoon — как закрыть это через Figma Variables и перестать плодить копии. Без воды, на реальных кейсах. Если давно хотели навести порядок в мультиязычных макетах — это сэкономит вам часы. Прочитайте и киньте лайк, если полезно 🙏 https://hackernoon.com/how-to-reduce-interface-localization-time-with-figma-variables">https://hackernoon.com/how-to-reduce-interface-localization-time-with-figma-variables
🧩 Какой способ управления размерами иконок в дизайн-системе реально работает
Если в дизайн-системе у иконок ограниченный набор размеров, это почти всегда превращается в отдельную архитектурную проблему. Снаружи всё выглядит просто: ну есть 12, 16, 20 и 24 пикселя, что тут обсуждать. А потом выясняется, что один подход удобен библиотекарю, но раздражает потребителя, второй красиво выглядит в теории, но ломается на вложенных компонентах, а третий требует больше ручной поддержки, зато лучше всего ведет себя в реальной работе. Алиса Пакард очень внятно разбирает эти варианты и приходит к практичному выводу: лучший компромисс сейчас это size-свойство на каждом icon-компоненте, а не отдельные компоненты на каждый размер и не обертка для иконок. Потому что этот способ дает больше контроля там, где он нужен, не ломает опыт потребителя и лучше сочетается с preferred swaps и другими паттернами внутри библиотеки. Внутри: – Почему отдельные компоненты под каждый размер иконки быстро захламляют библиотеку; – Зачем подход с variable modes выглядит заманчиво, но плохо масштабируется; – Чем icon wrapper удобен для поддержки, но неудобен в реальном UI; – Почему вложенные иконки внутри кнопок и других компонентов всё усложняют; – Как size-свойство на каждом icon-компоненте решает проблему гибче; – Почему этот подход лучше для preferred swaps и настройки конкретных компонентов; – Какой компромисс приходится принять библиотекарю при таком решении; – Почему в управлении размерами иконок сейчас важнее опыт потребителя, чем удобство внутренней поддержки. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Detach Variables — плагин для отделение переменных применяемых к фреймам, группам и разделам
✨ Как не отстать в AI для дизайна и в этом разобраться
Про AI в дизайне сейчас говорят очень много. Но если честно, большая часть контента до сих пор крутится вокруг промптов и генерации картинок. А вот как встроить все это в реальный продуктовый процесс, со своей дизайн системой, компонентами и живым прототипом, про это говорят сильно реже. На демках все обычно выглядит красиво. Один запрос, и у тебя готовый экран. А когда открываешь свой продукт, начинается уже другая история: компоненты не те, переменные мимо, логика ломается, руками потом переделываешь половину. ⏱ 22 апреля в 18:00 мск Даниил Шишко из Pixel Perfect проведёт бесплатный эфир как раз про нормальный рабочий процесс. На реальном продукте покажет связку Figma MCP и Claude Code. Агент будет видеть variables и компоненты прямо из Figma, собирать экраны строго по дизайн системе, а дальше из этого же процесса соберут живой React прототип. Плюс отдельно разберут Claude Design. Что он уже умеет, где реально помогает и где пока рано ждать магии. 🥰 Какую пользу получите Поймёте, как настроить агента под свою дизайн систему, какие задачи уже можно отдавать AI, а какие лучше пока держать под контролем. И главное, увидите не просто красивую демку, а рабочий пайплайн, который можно потом применить у себя. Если хотите разобраться, как 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, а какие пока не стоит 😇 Эфир пройдёт в закрытом тг-канале: подписаться
Плагин «Color Scale Variables» by Jonny Gwillim
Плагин для удобного создания цветовых тем и сохраняя их в переменные. Скачать плаги🎨 #plugin
Variable Code Syntax — плагин, который помогает работать с переменными и автоматически задавать им правильные имена для использования в коде.
Салют!
В этом году я писал не так много — постов и длинных текстов было меньше, чем обычно. Весь фокус ушёл в основную работу и два сезона подкастов. Поэтому вместо классических итогов года — просто аккуратно разложу, что вообще случилось и чем этот год запомнился. 🎙 Этот ваш дизайн В этом году у подкаста случился новый этап — целый сезон из 14 эпизодов и новая соведущая — Лавруш. Мы много пробовали, экспериментировали, спорили, смеялись и, кажется, наконец нащупали свой ритм. Вот несколько выпусков, которые вы слушали чаще всего: ☺️HR-бренд компании и личный бренд сотрудника ☺️Что взять с собой на собеседование ☺️Как собрать единорога в одиночку: взрослый разговор про нейросети ☺️Эмоции, метаданные и бренд, который выбирают ☺️Системный подход к личной продуктивности ☺️Как появляются девайсы: исследования, идеи и физический дизайн А ещё в этом сезоне появились циферки — от прослушиваний до денег. Про них тоже рассказал отдельно. 🎙 Дизайн Тусовка Отдельное событие этого года — сезон из пяти выпусков вместе с Зелёным Банком. Про людей, работу, сомнения и реальность между дизайном и менеджментом: ☺️Дружитес: как дизайнеру и продакту найти коннект ☺️Будущее на колёсах: как работает автономный транспорт ☺️Реальная жизнь между дизайном и менеджментом ☺️Обучение без боли. Как не бросить всё после второго занятия ☺️Как считать деньги в дизайн-системе ❤️ Записи Без лонгридов, заметок и мнений тоже конечно же не обошлось (осторожно, много букав): ☺️Подробный разбор переменных Figma Variables ☺️Как быстро подготовиться к защите решения ☺️Киберпсихология и ИИ: как дизайнеру писать тексты с помощью нейронок ☺️Пути продуктового дизайнера ☺️Когда нейросеть стала соавтором, может ли дизайнер остаться креатором? ☺️Ошибки дизайн-лида ☺️Как появляются инсайты, реально меняющие продукт: взгляд исследователя Очень хочется верить, что ваш год был если и не простым, но в жоском росте. С наступающим, друзья 🥂 Пусть в 2026 будет больше спокойствия, ясности и ощущения, что вы на своём месте. Увидимся в новом году ❤️
Изображение поста
Color Scale Variables
Плагин для удобного создания цветовых тем и сохраняя их в переменные Install 🖼 Figma Дизайн
Изображение поста
Variables to Table — плагин преобразует переменные в виде таблицы.
Изображение поста
Palettes Variables — создание и синхронизация цветовых тем используя переменные.
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
Изображение поста