💡 Как внедрить дизайн-систему, когда ты единственный дизайнер

Саша рассказала о своём пути от графического дизайнера до продуктового, работая над ERP-платформой. Будучи единственным дизайнером на проекте без опыта работы с большими продуктами, она столкнулась с хаосом из сотен экранов без консистентности и структуры. Главной проблемой стало отсутствие базовых инструментов: переменных, системы отступов, методологии. Она самостоятельно освоила современные возможности Figma через YouTube-ролики и эксперименты, создав Systematic Color Workflow с 400+ токенами. Правда, позже поняла, что можно было ограничиться только реально используемыми стилями и не усложнять работу фронтенда. Внутри: – Как создать Color Mixer для формирования консистентной палитры; – Почему текстовый компонент может перегружать макеты при сотнях экранов; – Зачем сразу определять правила отступов и брейкпоинты; – Как Variants, Boolean и Auto Layout ускоряют работу; – Почему пришлось аргументировать переход на платную версию Figma; – Какие ошибки можно было избежать с опытным ментором. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста

Tailwind CSS Color Generator

Создайте полную цветовую палитру для Tailwind CSS, используя HEX-код, цвет в формате HSL или случайное значение. Формируйте и изменяйте группы цветовых переменных на основе полученной шкалы. #Plugin ОТКРЫТЬ
Изображение поста

Variables to Table — плагин преобразует переменные в виде таблицы.

Изображение поста

Tesla Boy выпустили первый за пять лет студийный альбом «Навсегда сейчас». В пластинку вошло девять треков, в которых фронтмен группы Антон Севидов соединяет нью-вейв, пост-панк и гитарный инди, пробует новое звучание и размышляет о жизни в эпоху ускоряющихся перемен.

По словам музыканта, «Навсегда сейчас» — это попытка зафиксировать состояние человека в момент стремительных перемен, когда привычные способы общения и восприятия реальности меняются на глазах. Накануне премьеры альбома Антон Севидов ответил на вопросы The Blueprint о том, что думает про мир, ИИ и психотерапию — словами и треками. 🔹The Blueprint News
Изображение поста
📱 Как писать скрипты для Тильды с помощью ChatGTP
Зачастую мне приходится прибегать к помощи нейросети для написания скриптов (сама я знаю JS не на столько хорошо, чтобы писать скрипты с нуля самостоятельно). Недавно я писала модификацию для калькулятора на Тильде с помощью чата GTP. Когда я ставила ему задачу, я набила несколько шишек, из-за которых код получался не совсем подходящим. В этом посте я собрала для вас несколько советов по составлению более корректного запроса к ChatGTP на написание скриптов для Тильды: ⭐️ Обязательно начинайте запрос с фразы "Напиши скрипт на чистом JS", чтобы в коде не использовалась библиотека jQuery, это слегка ускорит загрузку вашего сайта ⭐️ Для того, чтобы код применялся к конкретному элементу, заранее найдите его уникальный класс в разметке Тильды и добавьте к запросу фразу "элемент с селектором .calc_form .t-input" (даже для запроса все равно придется немного разобраться с html 🥲) ⭐️ Тщательно и по шагам опишите логику работы кода (не забываем про классы и селекторы). Например: "Элемент с классом .название_класса должен появляться из полной прозрачности за 0,5 секунд при клике на кнопку с селектором .ID_блока .класс_кнопки" ⭐️ Если вы пишите скрипт к элементу зеро блока, магазина или любого другого объекта, загружающегося на Тильде с задержкой, то в конце запроса добавьте фразу: "Скрипт также должен предусматривать случай, если нужный элемент появляется с задержкой, поэтому пусть скрипт отслеживает появление элемента в DOM структуре с использованием MutationObserver." Дополнительные рекомендации: ⭐️ Можно сделать приписку в запросе, что сайт собран на Тильде, это поможет ChatGTP учесть ее некоторые особенности и, возможно, предложить какие-то улучшения кода ⭐️ Если вы пишите несколько скриптов для одной страницы и составляете запросы в разных диалогах ChatGTP, то надо учесть имена глобальных переменных в коде. Они ни в коем случае не должны повторяться! Глобальные переменные обозначаются с помощью слов var, let или const перед ними. Например: let value = this.value.replace(/[^\d ]/g, '').slice(0, MAX_LENGTH); здесь value — это имя глобальной переменной, и такое имя ChatGTP может использовать в своих кодах очень часто. Поэтому не допускайте повторов в именах переменных при нескольких запросах к чату GTP: "Не используй в качестве имени глобальной переменной value, оно уже занято". ⭐️ Если вам нужно, чтобы код работал только на определенном разрешении экрана, то также напишите об этом в запросе, чат GTP добавит в код медиа-запрос (отключение видимости блока с кодом в настройках Тильды не сработает). Например: "Код должен работать только на экранах размером от 960px и более" ⭐️ Если хотите отладить код и посмотреть в консоле его работу «на лету», добавьте в запрос фразу: "Добавь к коду консольное логирование". Пример полного запроса к ChatGTP: Напиши скрипт на чистом JS для сайта на Тильде, который будет выполнять следующее: - код должен запрещать вводить в инпут с селектором .calc_form .t-input любые знаки кроме цифр и пробела - также код должен ограничить максимальную длину вводимого текста в этот инпут до 7 знаков - скрипт должен предусматривать случай, если таких полей несколько на странице Не используй в качестве имени глобальной переменной input, оно уже занято. Скрипт также должен предусматривать случай, если нужный элемент появляется с задержкой, поэтому пусть скрипт отслеживает появление элемента в DOM структуре с использованием MutationObserver. 🌸 Поделитесь и вы своим опытом в составлении запросов чату GTP в комментариях. Есть ли у вас свои фишки и приемы в общении с ним? Также можете прислать примеры своих сработавших некорректно запросов, я попробую их улучшить для вас 😊 #тильда #нейросети #модификации
Изображение поста
Создаем анимацию загрузки с помощью переменных.
Перемены неизбежны, но сильные бренды не теряют себя.
Они опираются на ясные принципы, узнаваемый стиль и стабильность — даже когда вокруг всё меняется. Читать на dsgners | #брендинг
Изображение поста
🇦🇪 Дизайн-система для арабского языка
Александр Щеблыкин рассказал, как команда 2ГИС разработала мультиязычную дизайн-систему для рынков Ближнего Востока. Оказалось, что арабский интерфейс — это не просто перевод текста, а полная смена логики: всё читается справа налево, иконки отражаются, а знак вопроса пишется зеркально. Саша обнаружил множество неочевидных нюансов. Например, арабский текст визуально меньше латиницы, поэтому его нужно увеличивать на 10%. Цифры при этом читаются слева направо, даже внутри арабского текста. А слово «Назад» в ОАЭ и Саудовской Аравии пишется по-разному, хотя это один язык. Внутри: – Почему арабский текст нужно увеличивать на 10% для визуальной компенсации; – Какие иконки отражать, а какие оставить как есть; – Как переменные позволяют переключать интерфейс одним кликом; – Почему запятая в арабском повёрнута хвостиком вверх; – Как организовать словарь переводов для всех проектов; – Зачем нужны отдельные коллекции иконок для LTR и RTL. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Последовательность в хаосе: как бренд остается устойчивым в эпоху перемен
Статья рассказывает о важности сохранения идентичности бренда в условиях постоянных перемен. Узнайте, как быть гибкими, не теряя себя, чтобы выживать в современном бизнесе Читать на дизайнерс | #статья
Изображение поста
Последовательность в хаосе: как бренд остается устойчивым в эпоху перемен
Статья рассказывает о важности сохранения идентичности бренда в условиях постоянных перемен. Узнайте, как быть гибкими, не теряя себя, чтобы выживать в современном бизнесе Читать на дизайнерс | #статья
Изображение поста
Создание брейкпоинтов на переменных для адаптивного дизайна.
Дизайн вне времени: как оставаться актуальным в эпоху перемен
Статья расскажет, почему важен актуальный дизайн сегодня. Узнай, как обновить визуальный стиль компании и оставаться уникальным во времена трендов Читать на дизайнерс | #статья
Изображение поста
Autofill — плагин с помощью переменных автоматически заполняет текстовые данные в выбранном фрейме
Изображение поста
Palettes Variables — создание и синхронизация цветовых тем используя переменные.
Дизайн вне времени: как оставаться актуальным в эпоху перемен
Статья расскажет, почему важен актуальный дизайн сегодня. Узнай, как обновить визуальный стиль компании и оставаться уникальным во времена трендов Читать на дизайнерс | #статья
Изображение поста
Text Magic
Это плагин, который позволяет быстро генерировать тексты по шаблону, с переменными или из CSV-файла Install 🖼 Figma Дизайн
Изображение поста
Как у меня проходит последняя неделя лета?🌿
Событий было больше, чем за весь месяц) Я наконец восстановилась после болезни, поэтому на этой неделе было много работы, встреч и попыток успеть осуществить оставшиеся пункты из летнего виш-листа В целом, все получилось успешно) На этой неделе я начала работу над новым крупным проектом, сфера моей мечты — автомобили🤍 впереди большая работа над брендингом) ⚫️А также сейчас все мое основное время уходит на подготовку к осеннему потоку курса «Чувствуй дизайн» И, да, у нас полный SOLDOUT на курс еще до старта! Благодарю вас за доверие к школе! Нас с учениками ждет очень продуктивная осень! Если вы хотите попасть в последний вагон, еще есть возможность присоединиться к самостоятельному тарифу обучения, до нового года больше потоков не будет, жду вас🫶🏻 Также мы с командой готовимся к запуску практикума по нейросетям, сейчас готовим новые уроки с учетом всех обновлений и скоро буду рассказывать все💛 Еще у нас расширилась команда! Мне пока что непривычно, что уже столько людей работает вместе со мной ради общей миссии, и я сама еще привыкаю ко многим новым процессам, но однозначно горжусь нашим совместным ростом! В общем, конец лета проходит очень продуктивно) А в свободное время были поездки загород, в гости приезжали брат с сестрой, поэтому было насыщенно Уже с предвкушением жду осень! Для меня это всегда время новых перемен, продуктивной работы, осенних прогулок и путешествий 🍂
Изображение поста
Изображение поста
Изображение поста
Изображение поста
Изображение поста
❗️Новая хайповая нейросеть Nano Banana.
Название бредовое, но функции космические: это не просто генератор картинок, а потенциальная замена фотошопу: можно менять что угодно и как угодно. И главное — без привычных артефактов и искажений. 🚀 Поэтому сегодняшний вебинар в 19:00 (МСК) мы хотим посвятить именно Нано-банане. А уже на следующей неделе также в четверг разберем коммерческие сценарии работы с Krea — создание серийных фото и поддержание консистентности. ➡️ Регистрация на вебинар и практику в Nano Banana Как вам новая тема? Ставь ♥️, если рад таким переменам и 🤔, если больше интересна работа с Krea
Изображение поста
Сегодня хочу поделиться ещё одной дизайн-историей из своего прошлого. А начнётся она, в очередной раз, со слов «работал я в одной шараге». Это потому, что был период, когда я неправильно подходил к выбору и поиску мест работы, от чего и попадал в разные безымянные подпольные дизайн-шараги.
На этот раз я устроился в небольшую подрядную дизайн-студию, арендующую полуподвальное помещение в одном московском районе. Устроился я туда на зарплату в целых 50 000 деревянных. Для 2008 года сумма была очень даже неплохая. Доллар тогда стоил всего 24 рубля, а не 78 как сегодня. Студия кормилась за счёт одного крупного рекламного агентства, регулярно поставляющего техническую работу вроде ресайзов, адаптаций и допечатной подготовки. Были и достойные задачи, даже веб-сайты и брендинг. В первые пол года дела шли неплохо — зарплата исправно выплачивалась, пусть и в конверте. *** На компьютерах студии была установлена программа Radmin, позволяющая владельцу студии подключаться к любому из наших мониторов и следить за тем, кто и что делает. Пару раз я наблюдал, как курсор мышки чуть заметно двигался без видимой на то причины. А однажды, зайдя без стука в кабинет владельца, я обнаружил свой рабочий стол на его мониторе. Так владелец студии наблюдал за работой дизайнеров. Вскоре, кризис 2008 года дал о себе знать. Начались первые задержки выплат. К Radmin добавилось требование о ведении ежедневных отчётных таблиц в Excel. Каждый дизайнер, включая руководителя отдела, был обязан по пришествии в офис записать время начала работы над той или иной задачей. Если требовалось выйти на перекур или в туалет, это также необходимо было отразить в отчёте. Это мешало работе. Периодически я вспоминал, что не отметил в графике старт или завершение работы над задачей и принимался вспоминать, что и когда я начал или закончил вместо того, чтобы работать над задачами. В студии повисла атмосфера недоверия. Однажды, после того, как кто-то из дизайнеров рассказал пару анекдотов, руководителю отдела был сделан выговор от владельца студии. На следующий день руководитель собрал нас и попросил не смеяться, тем более громко, а желательно вообще помалкивать. Видимо наше настроение и юмор пришлись не к месту. *** Настал день отчёта. Руководитель зашёл в кабинет и попросил предъявить отчёты за месяц. Оказалось, никто, кроме меня их не вёл. Ещё один дизайнер пытался, но сдался уже на втором дне, никому об этом не сказав. Что любопытно — не прозвучало ни одного слова критики в адрес тех, кто проигнорировал таймшитирование и просто забил на требование руководства. Таким образом, я оказался «крайним». В итоге, на примере моего отчёта, всему отделу было доведено о том, что мы по долгу и слишком часто ходим на перекуры и обеды, и вообще, не очень эффективные сотрудники. А ещё через пару месяцев нас вызвали в кабинет к владельцу студии и объявили о том, что студия больше не имеет возможности платить заработную плату в связи с экономической ситуацией и просит написать заявление об увольнении по собственному желанию. Так был сокращён весь наш отдел, остался только руководитель. А спустя ещё год студия прекратила своё существование вовсе. Задержки зарплаты, наблюдение за экраном, микроменеджмент, таймшитирование, штрафы за опоздания на пару минут — это либо неумелое руководство, либо «чёрные лебеди» для организации. Если в вашей компании присутствует или начинает практиковаться что-то подобное — время задуматься о переменах.
Изображение поста
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 Стэй тунед!