До 70% макетов начинающих дизайнеров отправляются на переделку из-за «любительского» вида, который выдает отсутствие системности. В 2024 году разница между новичком и профи в Figma заключается не в знании инструментов, а в соблюдении технических норм верстки и визуальной иерархии.
Хаос в слоях и отсутствие именования
Типичная ошибка — сотни слоев с названиями «Frame 452» и «Group 12». Когда проект переходит на этап разработки, программист тратит на 30-40% больше времени на поиск нужного элемента, что ведет к конфликтам и затягиванию сроков сдачи лендинга на 2-3 рабочих дня.
Кейс: макет лендинга для ниши недвижимости с 15 экранами. При отсутствии структуры (группировка по секциям: Header, Hero, Features) поиск одного текстового блока занимает до 2 минут вместо 2 секунд. Экспертный вывод: используйте строгий нейминг (например, Section_Hero_Button), иначе ваш макет будет воспринят как черновик, а не коммерческий продукт.
Игнорирование Auto Layout и ручная расстановка
Новички часто двигают элементы «на глаз», создавая статичные группы. Это фатально при изменении текста: если заголовок увеличивается на 2 слова, дизайнеру приходится вручную двигать все нижние блоки, что увеличивает время правки одного экрана с 5 минут до 40 минут.
Пример: создание списка преимуществ из 6 карточек. Без использования Сетка и автолейауты (Auto Layout 5.0) в Figma любое изменение отступа между карточками с 20px до 24px требует 6 ручных операций вместо одной смены значения в панели свойств. Экспертный вывод: любой повторяющийся элемент или список обязан быть в Auto Layout, иначе макет не является адаптивным.
Отсутствие системы компонентов и стилей
Рисование каждой кнопки заново — главный признак дилетанта. Если на лендинге 10 кнопок и заказчик просит изменить радиус скругления с 4px на 8px или сменить цвет с #3B82F6 на #2563EB, новичок тратит 15-20 минут на ручную правку, профи — 2 секунды.
Мини-кейс: лендинг на 5000 пикселей в высоту. Использование Компоненты и варианты (Variants) в Figma позволяет синхронизировать все элементы управления мгновенно. Без этого риск оставить одну кнопку «старого» цвета составляет около 20%, что выглядит крайне непрофессионально. Экспертный вывод: создавайте библиотеку из 3-5 основных компонентов (кнопка, инпут, карточка) еще до начала отрисовки первого экрана.
Нарушение типографики и визуального шума
Использование 4-5 разных шрифтов и случайных размеров (например, 14px, 15px, 17px в одном блоке) создает эффект «визуального мусора». В профессиональном дизайне шаг кегля обычно кратен 4 или 8 (12, 16, 20, 24, 32, 40px), что обеспечивает ритм и читаемость.
Пример: заголовок H1 размером 42px и подзаголовок 22px создают слабый контраст. Переход на формулу 48px / 24px мгновенно делает структуру иерархичной. Экспертный вывод: ограничьте себя двумя шрифтовыми парами и жесткой сеткой размеров, чтобы избежать ощущения хаоса, которое отталкивает до 15% потенциальных конверсий из-за сложности восприятия.
Неправильные отступы и отсутствие «воздуха»
Новички боятся пустого пространства и прижимают текст к краям контейнера (отступы по 10-15px). Это делает дизайн «зажатым». Стандарт индустрии для современных лендингов — боковые отступы (margins) от 60px до 120px для десктопной версии (1440px).
Сравнение: блок с внутренним отступом (padding) 20px выглядит как сайт из 2010-х. Увеличение padding до 80-100px между секциями поднимает визуальную стоимость проекта в глазах клиента с 5 000 до 25 000 рублей за макет. Экспертный вывод: увеличивайте расстояние между смысловыми блоками; «воздух» в дизайне — это инструмент управления вниманием пользователя.
Вывод
Чтобы перестать делать «любительские» работы, откажитесь от ручного перемещения объектов и случайного подбора размеров. Начните с освоения Auto Layout и создания базовых компонентов — это сократит время итераций в 3-4 раза. Избегайте перегруженности деталями и всегда соблюдайте кратность отступов (8px). Мой вердикт: техническая чистота макета важнее креатива, так как именно она определяет, будет ли проект реализован в коде без искажений или превратится в кошмар для верстальщика.