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

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

Install

Задача: — проектировать сложные интерфейсы банковских продуктов — продумывать бизнес-логику — предлагать оптимальные решения, в том числе нужен нестандартный подход Ожидания: — Figma: Auto layout, Variants — Pixel Perfect — Atomic Design — логическое мышление — опыт в исследованиях будет плюсом Условия: — график работы 5/2, с 9 до 18 — формат гибридный: ПН, ПТ удаленно, ВТ, СР, ЧТ офис — ЗП: 200-250к — премия по итогам года Контакт для отклика: @AlexanderMazurov #дизайн

• 1000+ векторных иконок в outline-стиле • Форматы: Figma (Auto Layout 4.0), SVG #icons #outline #library Открыть в Figma

Install

• 15+ готовых компонентов с поддержкой Variants и Auto Layout • Адаптирован для веб и мобильных проектов • Регулярные обновления и улучшения #uik #datetime #components #web #mobile Открыть в Figma

Дима Максимов из Dodo Engineering рассказал, как команда переписала слайдер быстрой оплаты с MotionLayout на Compose. Старый компонент накопил 15+ багов: слайдеры появлялись с двух сторон, текст просвечивал, а скрыть элементы было почти невозможно. Новый функционал для закрытых кофеен и переливающегося фона добили старую систему окончательно. Решение оказалось проще, чем казалось: создать кастомный Layout Composable вместо сложной структуры из стандартных контейнеров. Результат: контролируемые анимации, чистый код и возможность легко добавлять новые фичи. Плюс шиммер для подсказок и хаптик для тактильной обратной связи. Внутри: – Проблемы MotionLayout с видимостью и сложными сценами; – Выбор между Compound Composable и Layout для слайдера; – Создание каркаса с Thumb и Background компонентами; – Настройка жестов через AnchoredDraggable и якоря; – Измерение динамического контента по правилам дизайна; – Анимации растягивающегося следа и надписей; – Управление состояниями через внешний стейт; – Добавление шиммера и тактильной обратной связи. Статья больше техническая, но довольно интересная. Внутренняя кухня разработки мастхев) Особенно, когда дело касается мелочей в виде слайдера, а проблем тоже хватает 👀 Так что ваш слайдер в фигме за 2 минутки в макетах превращается в кучу кода для разработки)) ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Мелкие обновления Auto Layout 1. Отрицательный отступ Теперь в AL мы можем применять к элементам отрицательный отступ. Удобненько. Так же, отрицательный отступ можно применять к элемента вне AL 2. Верхний элемент Появилась возможность выбирать очередность элементов сверху вниз в AL. Примечательно, что в слоях элементы не меняют свое положение.

• Чекбоксы и всплывающие окна • 100% auto layout • Цвета и типография #DesignSystems #UIk  Открыть в Figma

В Figma также можно настраивать сетку. Вы узнаете как её включить, убрать и настраивать для создания дизайна. 1. Чтобы включить или отключить сетку в Figma, нажмите на комбинацию горячих клавиш «Ctrl + Shift + 4». 2. Чтобы сделать сетку в приложении, выберите фрейм и в правой панели напротив надписи «Layout grid» нажмите на иконку плюса. 3. Для настройки сетки нажимаем в правой панели на саму иконку сетки. В появившемся окне вы сможете изменять размеры, цвет и прозрачность сетки. Также делать сетку в виде горизонтальных или вертикальных колонок. Колоночную сетку можно задать, выбрав вместо значения «Grid» (сетка), надпись «Columns» (колонки или столбцы). Если хотите, чтобы колонки были вертикальными, то следует задать значение «Rows» (строки)

🔗 Figma Community ▫️ #accessibility 🗳 Плагины Figma

🔗 Figma Community ▫️ #accessibility

shuffle.dev/setup

Сегодня притворяемся очень деловым изданием и считаем чужие денюшки, потому что акции нашей любимки подорожали в 3,5 раза на Нью-Йоркской фондовой бирже после IPO. И это крупнейший скачок цены акций в ходе дебютных торгов по крайней мере за 30 лет для американских компаний с IPO объемом более $1 млрд. Что ж, мы всегда в нее верили, поэтому у нас набралось много материлов о работе в Figma: ● Разбирали апдейты Figma: упрощенный Auto Layout, ИИ для копирайтинга и др. Помогала нам в этом Кристина Уварова, старший продуктовый дизайнер «Яндекса». ● Тестили Figma Slides вместе с нашим дизайнером презентаций Марией Асауляк. А еще Маша поделилась основными правилами и приемами классной презентации. ● Учились с нуля до первого макета — дизайнер продуктовой студии Crauch Дарья Третьяк рассказала об основах Figma и объяснила, как пользоваться сервисом и настроить его под свои задачи. ● Собрали топ плагинов для Figma, которые подготовила нам команда Crauch. ● Поговорили о новых (и не всегда очевидных для дизайнеров) фичах Figma. ● А для студентов «UX/UI-дизайнер» и «UX/UI-дизайнер Plus» недавно обновили целый тренажер по Figma. В нем собраны разные темы: от совсем базовых до продвинутых. При этом, у заданий нет дедлайна — ими можно заниматься в своем темпе. Присоединяйтесь, чтобы взлететь так же высоко, как и Figma!

Смотреть плагин 🍲 Дизайн Борщ

Плагин создает слои из всех сеток примененных в макете. 💾 Открыть Dropzz #Plugin

Готовые компоненты чекбоксов и селекторов с Auto Layout, типографикой и 94+ вариантами. Открыть в figma 🔗 #Файлы

Ссылочка: Lookscout - Design System Теги: #полезное #UIKit 🖼 Figma за 60 секунд

Теперь можно легко создавать сетки из карточек, кнопок и других элементов, задавая количество строк и столбцов. Это упрощает работу дизайнерам и помогает лучше понимать разработчиков. В статье объяснили, как включить и настроить Grid, чем он отличается от других режимов Auto Layout и какие есть ограничения по сравнению с CSS Grid. Внутри: – Что такое режим Grid; – Как настроить сетку; – Разница с другими режимами; – Удобство для дизайнеров и разработчиков; – Текущие ограничения функции. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Let’s be honest. Most feedback tools get ignored. Why? Because they’re asking at the wrong time — and in the wrong way. Here’s how to do it better 👇 ✅ Feedback widgets help teams gather feedback at scale. Think in-app surveys, pop-ups, panels, sidebar buttons — they can work, if used right. ✅ Ask for feedback only once a customer has succeeded or failed. (i.e. confirmation pages, completed transactions) ✅ Ask specific questions about the process just completed. ✅ Let users choose up to 5 descriptive tags (e.g. good price, confusing layout, fast checkout). ✅ Start with quick, closed-ended questions (ratings, multiple-choice) before inviting open text. Useful resources for teams who care about feedback quality: 📚Microsurveys Database (Notion) 📚9+ Ways to Collect Feedback 🔗 Read the full article