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

Но перед этим хотим сказать, что для нас самое важное — это вы! Все, кто читает наши каналы и рассылки, кто пришёл на митап, слушал, шутил и задавал вопросы. Для нас это очень много значит. И, конечно, отдельное спасибо ВКПБ — студиям Deza и Lovemedo, которые всё это организовали. Кстати, на митапе волшебным образом у нас случилась 105% явка. Вот такая шрифтовая магия получается •ᴗ• А теперь сами материалы! Пойдём в порядке лекций: 🐶 Лично от Дениса Васильева: 🌞Большая коллекция бесплатных шрифтов 🌞«Что делать, если нет бюджета на шрифты»  🌞Статья о том, как бесплатно попробовать шрифты 🌞Большая статья о шрифтовых лицензиях 🐶 Красота от Томы Стрельцовой: 🌞О двух техниках древнерусской каллиграфии 🌞Декоративный шрифт Red Klin 🌞Шрифт на основе кириллических букв Сергея Чехонина Список книг, который Тома обещала: 🌞Книга про буквы от Аа до Яя, Юрий Гордон 🌞Designing type, Karen Chang 🌞Основа стиля в типографике, Роберт Брингхерст 🌞Живая типографика, Александра Королькова 🌞The stroke theory of writing, Gerrit Noordzij 🌞Про леттеринг, Джессика Хиш 🌞Искусство каллиграфии, Дэвид Харрис 🌞The origin of the serif, Edward Katich 🐶 Шрифтовая магия от Саши Корольковой: Для начала красивая мысль, с которой Саша начала свою лекцию. Любая достаточно развитая технология неотличима от магии — Артур Кларк 🐶 Глава 1: Нестандартная вариативность 🌞«Тёмная сторона шрифта» — суперлонгрид о технической стороне шрифта (иногда нужен VPN) 🌞Вариативные гротески: Pragmatica Next Circe Contrast 🐶 Глава 2: Оптические размеры Шрифт наполовину состоит из оптических иллюзий 🌞Шрифты с оптическими размерами: Bodoni PT Simon Kudry (с бесплатным начертанием Kudry Weird Headline Stapel Stem PT Sans (бесплатный) PT Serif (бесплатный) 🌞Волшебные слова: Caption — до 12 пт Text — 12-18 Subhead — 18-48 Headline — 48-72 Display — 60+ Poster — 96+ 🐶 Глава 3: Шрифт переодевается 🌞Деликатный геометрический гротеск с большим набором стилистических сетов: Hint Включить сет Grotesque Round в CSS: font-feature-settings: "ss03"; 🌞Статья о Хинте и его стилистических сетах 🐶 Глава 4: внимание к деталям 🌞Шрифт с пропорциональными и моноширинными маюскульными и минускульными цифрами: Bodoni PT Как включить поднятие регистрозависимой пунктуации на all caps в CSS: font-feature-settings: "case"; 🌞Статья о том, как включать стилистические сеты в Фигме и CSS 🐶 Глава 5: странные вещи, которые может шрифт 🌞Шрифт Mojito, который может имитировать почерк и содержит ~1400 знаков 🌞#player">Первая в мире видеоигра в шрифте 🐶 Глава 6: Микротипограф — «что-нибудь полезное» 🌞Микротипограф в шрифте — что это такое и как он работает 🌞Плагин-типограф для Фигмы 🌞Типограф студии Лебедева 🐶 Глава 7: шрифт и нейросети 🌞В шрифт встроили нейросеть 🐶 И на всякий эсэмэмщица напоминает: 🌞«Как разобраться в кириллице» — статья 🌞«Как разобраться в кириллице» — бесплатный курс 🌞Используйте ТЕСТОВЫЕ ВЕРСИИ Главный хайлайт встречи — Саша разрешила произносить Circe как Цирце 👀 Пересматривайте, перечитывайте, пробуйте. А мы всегда на связи: тут в канале или по почте fonts@paratype.com P.S. В комментариях ещё опубликуем несколько фотографий с митапа

Ростелеком показал отечественного убийцу Фигмы под названием Спектр. Штуковина пока в закрытом бета-тесте, но обещают аналогичный дизайн и базовый функционал, да возможность импортировать фигмовские файлы. Ну а как официально выкатят, то там и блокировочка этой самой Фигмы глядишь назреет, а затем и обязаловка для всех дизайн-команд и студий работать только в детище Ростелекома. Тогда и заживём как следует. #вести @vestochka_design

Install

#лайфхаки

25 апреля будет серия практикумов на разные темы и один из них веду я 🐶 Своими словами: мы с вами 3-4 часа будем погружены в тему создания цифрового продукта, погенерим фичи, попрактикуемся в Фигме. Важно понимать, что для совсем новичков будет сложно сориентироваться на практической части, но кто я такая, чтобы вас останавливать 🐈 От вас: ноутбук с установленной Фигмой. Если настроены на такую продуктивную субботу — читайте пост и регистрируйтесь. Буду всех ждать)

НЕЙРОНКА УМЕЕТ ДЕЛАТЬ РЕСАЙЗЫ. НО ПОКА НЕ УМЕЕТ ДУМАТЬ О КОМПОЗИЦИИ наш creative technologist ⚪️ влад решил собрать ресайзер, который генерит баннеры под разные форматы прямо в фигме. идея была такая: взять мастер-макет и отдать его llm-модели, чтобы она пересобрала композицию под нужный размер. на практике: оказалось, что нейронка не очень понимает композицию. элементы остаются на месте, но что-то уезжает, странно масштабируется или теряет аккуратность. влад попросил модель делать несколько вариантов баннера, чтобы было из чего выбирать. параллельно задали более жёсткие условия: где остаются ключевые элементы, как они масштабируются, что нельзя сдвигать или перекрывать. добавил базовые проверки — чтобы элементы не накладывались, не вылезали за границы и сохраняли читаемую структуру. если результат не устраивал, дорабатывали его повторными запросами. в итоге сложилась простая цепочка: сгенерили → выбрали лучшие варианты → попробовали поправить. качество выросло, но было что улучшать. лучший результат получили, когда начали работать с моделью через чат и давать ей доступ к макету. так она меньше ломает структуру и аккуратнее собирает баннер. сейчас дорабатываем ресайзер до продукта внутри студии и считаем экономику — где нейронки ускоряют работу, а где пока нет. итог: ресайз через ai выглядит вполне реальным. но как сделать его комфортным для использования — пока вопрос открытый⚫️

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

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

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

Интерфейс на 90% состоит из текста. UX-редакторов, как правило, очень мало. В нашей команде их два, но даже они физически не смогут отревьювить все наши интерфейсы. Поэтому мы-дизайнеры стараемся сами писать простой, понятный и дружелюбный текст, следуя редполитике, которую составили редакторы. В команде дизайна взяли курс на разумную ИИ-зацию. Я решил собрать плагин для Фигмы, который будет проверять текст по редполитике и писать замечания. До этого никогда не вайбкодил :) Но опыт разработки был. Впервые поставил Codex от ChatGPT и написал промпт: Создай плагин для Figma, чтобы проверять тексты в макетах дизайнеров на соответствие редполитике. Редполитика лежит в приложенном файле. Сценарий использования: — Дизайнер запускает плагин — Выделяет секцию или фрейм, где нужно проверить тексты — Плагин сверяется с редполитикой и выводит список замечаний. У каждого замечания есть короткое описание, почему оно появилось. И рекомендация исправления. При нажатии на замечания происходит фокусирование на нужном фрейме. [редполитика.pdf] И с первого раза получился аккуратный чистый интерфейс и работающий алгоритм. Я намеренно не использовал API нейронки, чтобы не передавать наши интерфейсы хрен-пойми куда и не зависеть от лимитов. Всё работает на регулярках и простых ифчиках. Потестил немного и сделал доработки: — Доработал UI: добавил больше отзывчивости в кнопки, лоадеры, состояния, убрал лишние элементы, добавил группировку замечаний, привёл к нашему стилю, добавил тёмную тему. — Добавил много исключений, чтобы убрать ложные срабатывания. — Значительно ускорил плагин с помощью кеширования, добавлении быстрой пред-проверки, уменьшению размера первого батча (оказывается, это подход ramp-up batching). — В конце добавил самое главное: кнопки для автоматического исправления замечаний. Начали активно тестировать в команде. Дизайнеры в восторге; редакторы тоже рады, потому что могут прогонять макеты плагином перед своей работой. Будем продолжать тестировать и улучшать качество плагина. А вы ИИ-зируетесь в дизайне?

А на пятки уже наступают вот такие ребята типа Wonder, которые делают инструмент для дизайнеров и это чувствуется от видоса. Что будет по факту посмотрим, но если они грамотно запустятся и фичи будут реально те, что все просят годами от фигмы, то это может полететь Можно записаться в early access: https://wonder.so/ Что думаете, есть шансы у них?) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

если кожа в генерации выглядит замыленной, причина этого может быть не только в модели, но и в самом процессе: как вы задаете акценты, формулируете промпт и дорабатываете результат. в новом ютуб-видео ведущий дизайнер нашего ai-юнита 5heads ⚪ лера мацуева показывает, как сгенерить реалистичную кожу без «мыла». в ролике даем поэтапный разбор, как добиться естественной кожи через отдельные токены, json-промпты и пост-продакшн. в конце прогоняем всё это на реальном кейсе payfect и делимся фигмой с артефактами и промптами. <<смотреть и генерить с нами >>

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

Узнайте, как избавиться от постоянного перетаскивания макетов между сервисами и сделать свою работу более удобной Читать на дизайнерс | #статья

Теперь AI-агенты могут работать прямо внутри Фигмы, а не только рядом с ней. Они умеют создавать и менять макеты в файлах, использовать компоненты, переменные и дизайн-систему команды. Главная идея в том, что AI больше не рисует абстрактный интерфейс «из головы». Если в команде есть свои правила, компоненты и инструкции, агент может опираться на них и делать макеты ближе к реальному продукту, а не к шаблонной картинке. Плюс челы добавили skills. Это markdown-инструкции, которые объясняют агенту, как именно работать: какие шаги делать, в каком порядке и по каким правилам. Пока функция бесплатна в бете, потом станет платной. Пошли по стопам агентов в общем, давно пора было такое завозить, немного отстают от рынка)) ➡️ Тут почитать ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Кудесники из Гугла обновили свой генератор интерфейсов Стич. Пересбрали сам дизайн, завезли бесконечный холст как в Фигме, а также надрессировали нового ии-агента. Теперь он умеет анализировать сторонние дизайн-системы и позволяет подтягивать собственные, умеет фигачить сразу несколько концептов, достраивать пользовательские сценарии и давать советы по улучшению дизайна. На первый взгляд выглядит как имба, но я не смог потестить даже с впном. Попробовать можно тут, если получится поюзать — делитесь впечатлениями. #вести @vestochka_ai

Теперь при импорте макета из Фигмы в Zero Block корректно переносятся группы и вложенность, настройки автолейаутов, градиент в тексте, фоновые изображения групп и фреймов. Также импорт стал стабильнее — макеты из Фигмы переносятся точнее. #tildaupdates

Meet the new Stitch, your vibe design partner. Here are 5 major upgrades to help you create, iterate and collaborate: 🎨 AI-Native Canvas 🧠 Smarter Design Agent 🎙 Voice ⚡️ Instant Prototypes 📐 Design Systems and DESIGN.md Я уже писал про Stitch несколько раз, потому что он на слуху. Сейчас они удивили сообщество тем, что теперь можно «вайбдизайнить» и сразу получать production-ready код Видно, что прогресс есть, но заголовки формата «DESIGNERS ARE COOKED» или «ITS SO OVER FOR DESIGNERS», которыми засран твиттер, пока что слишком громкие Дизайн выглядит все еще слабовариативным, я посмотрел, чего там эксперты нагенерили (возможно, поможет правильная работа с промптами и рефами) То, что презентуется как «дизайн-система», выглядит как простой ui-kit на переменных (к слову, вообще-то у самого подход к использованию дизайн-системы — то еще дерьмо, можно несколько экранов их продуктов собрать и сильно удивиться) Мне оч нравится направление, куда идет Stitch. Они могут соревноваться с фигмой, факт! Но давайте по-честному: Чуваки решили проблему «как нам быстро задизайнить что-то» Они не решили такие вопросы (и шанс, что решат, не очень велик): → Почему высокий процент отказов с главной страницы → Почему пользователи игнорят СТА, хотя ее видно → Как нам сделать конвертящий онбординг-флоу Разве когда-то проблема была только в пикселях? Stitch просто сделал думающих дизайнеров более ценными Короче, не переживаем, работу пока ai не заберет!

Оплачиваемая стажировка для мобильных, веб и графических дизайнеров Что будет? – Настоящие дизайнерские задачи; – Работа в команде; – Возможность попасть в штат Подойдет студентам, выпускникам и начинающим специалистам. Можно работать удалённо или в офисе с командой по договорённости И да, нужно уделять 40 часов в неделю. Предпочтения таким кандидатам будут) В ходе стажировки вы познакомитесь с продуктовым процессом и ролью дизайнера в нем, узнаете нюансы передачи макетов в разработку. Будете отвечать за часть реального продукта, ваша работа повлияет на конечный результат. У вас будет возможность поработать над продуктом, в котором уже выстроена вся инфраструктура и можно сфокусироваться на решении задач под руководством опытного наставника Что нужно: – Знать, что такое Фигма и работать с компонентами; – Иметь опыт работы в студии, агентстве или у вас было более трех успешных проектов на фрилансе; – Понимаете, кто такой пользователь и зачем нужно задавать много вопросов. Подача до 28 апреля. Газ! 🔠 Подача тут 🔠 Подача тут ——— 🔥 Закрытый канал с вакансиями 💻 Курс по поиску работы 😍 Про дизайн 🎨 Референсы