Добавить в корзинуПозвонить
Найти в Дзене

Сегодня расскажу вам о 7 принципах базовой гигиены макетов в Figma

🎨 1. Именуйте слои. Не «Frame 247», а по смыслу: header, card/product. Звучит душно, но когда открываешь чужой файл (или свой через месяц) — экономит кучу времени и нервов. 2. Всё на Auto Layout. Отступы, кнопки, списки, карточки — везде, где можно. Ручное выравнивание «на глаз» — это боль при первой же правке. Auto Layout делает макет живым: добавил элемент — ничего не разъехалось. 3. Сетка и отступы кратны 8. 8, 16, 24, 32... Это негласный стандарт, который сразу делает макет опрятным и упрощает жизнь разработчику. Рандомные отступы в 13 и 27 px читаются как непрофессионализм. 4. Компоненты вместо копипаста. Кнопка, инпут, карточка повторяются? Делайте компонент. Поменяли раз — обновилось везде. Копировать вручную десять одинаковых кнопок — прямой путь к тому, что половину ты потом забудешь обновить. 5. Стили для цветов и текста. Не пипеткой каждый раз, а сохранённые стили. Это основа порядка и первый шаг к дизайн-системе. 6. Структура страниц. Не сваливайте всё в один бесконе

Сегодня расскажу вам о 7 принципах базовой гигиены макетов в Figma 🎨

1. Именуйте слои. Не «Frame 247», а по смыслу: header, card/product. Звучит душно, но когда открываешь чужой файл (или свой через месяц) — экономит кучу времени и нервов.

2. Всё на Auto Layout. Отступы, кнопки, списки, карточки — везде, где можно. Ручное выравнивание «на глаз» — это боль при первой же правке. Auto Layout делает макет живым: добавил элемент — ничего не разъехалось.

3. Сетка и отступы кратны 8. 8, 16, 24, 32... Это негласный стандарт, который сразу делает макет опрятным и упрощает жизнь разработчику. Рандомные отступы в 13 и 27 px читаются как непрофессионализм.

4. Компоненты вместо копипаста. Кнопка, инпут, карточка повторяются? Делайте компонент. Поменяли раз — обновилось везде. Копировать вручную десять одинаковых кнопок — прямой путь к тому, что половину ты потом забудешь обновить.

5. Стили для цветов и текста. Не пипеткой каждый раз, а сохранённые стили. Это основа порядка и первый шаг к дизайн-системе.

6. Структура страниц. Не сваливайте всё в один бесконечный холст. Разбейте на страницы: Cover, Ready, Trash. Открыл файл — сразу понятно, где что.

7. Чистите за собой. Скрытые слои, пустые фреймы, дубли, «Frame 999» где-то за краем экрана — всё это мусор. Финальный файл должен быть чистым.

Пройдитесь ради интереса, по своему последнему макету и напишите в комментах сколько пунктов из 7 у вас сошлось👇

А для самых активных - творческое задание: оформите этот чек-лист красиво в фигме и закиньте в комменты (пдфкой или картинкой), я лично дам обратную связь😉