Привет, VC! Я дизайнер интерфейсов. Работая с чужими дизайн-системами, сталкиваюсь с удивительным разнообразием подходов от откровенно дилетантских до овер-инжиниринга.
Например, на Медиуме есть длинная статья, как сделать систему отступов. Автор статьи делает разухабистый компонент, и мой внутренний инженер ликует, когда это видит.
Но если вдруг вам лень так заморачиваться, есть другой способ:
- Просто сделайте фреймы нужных размеров и удалите у них фоновый цвет. Они будут вашим набором отступов.
- Каждому фрейму добавьте Layout grid с одной колонкой, чтобы она заполняла весь фрейм.
- Задайте разные цвета в настройках колонок, чтобы визуально проще было отличать отступы друг от друга.
- Из фреймов сделайте компоненты и объедините их в вариант.
Теперь показать или скрыть отступы можно сочетанием клавиш ctrl+g (mac) и shift+g (win).
Ссылка на пример в фигме.
42
показа
11K
открытий
2
репоста
осталось научиться правильно применять предлоги "с/из" и "в/на"
Изображение со статьи на mediumмой внутренний редактор плачет, когда это видит.
О, спасибо!) я буду присылать вам на вычитку все свои статьи.
Так я давно уже всем намекаю в описании профиля
Нативочка вышла сама собой)
Ну почти )) слишком неочевидно намекаю.
Если честно, выглядит как какой-то ненужный геморрой. Начинающим дизайнерам проблема понять (почему-то) как работает система отступов и вот эти вот «хаки» отнюдь не позволяют им использовать отступы правильно.
А чтобы пользоваться нормально системой отступов достаточно использовать сетку и baseline.
Дмитрий, это нужно для интерфейсов, когда собираешь в auto layout все экраны приложения или веб интерфейса. Если есть система отступов это исключает ошибки ( где-то 36 поставишь, где-то 38) Разработчикам потом не нужно ломать голову какой в итоге в стили заводить.
Как показывает практика — хорошему фронтендеру автолейауты не уперлись.
А плохому хоть руками отступы подписывай — он все равно на глаз сделает.
Если это экономит вам время — пожалуйста. Но если вы тратите часы на эту хрень — не стоит.
Это все радует, когда сделано "правильно", но реально для хороших фронтендеров это лишнее или малозначимо, имеет смысл только если реальных задача мало
По опыту, если заранее договориться с дев командой о системе отступов (кратно 8), то они просто автоматом будут игнорировать ошибки
Вы макеты для разработчиков делаете?Размеры должны соответсовать тем которые в макете, иначе это пустая трата времени.
Этот подход меня пугает тем, что для разработчика становится бессмысленным подход копирования CSS стилей из инспекта Фигмы. Если вручную прописывать отступы в автолейаутах, их легко оттуда скопировать. А так - везде будет 0. @Женя Жуланова интересен ваш опыт.
Комментарий недоступен
кстати, тоже об этом подумала. вроде же автолейаут он на то и лейаут, чтобы посмотреть в его настройках расстояние. а так там будет ноль, и придется проверять, какие я там компоненты пробелов поставила - 8рх или 12рх (если они изначально у меня скрыты, их нужно будет выискивать и включать отображение).
А где можно почитать нюансы работы фигмы на сегодняшний день в России? Что изменилось после официального заявления от 9 марта кажется. Заблокировали ли что-то или кого-то? Или заблокировали всех по геопозиции?
нечего не изменилось кроме того факта что невозможно оплатить подписку по понятным причинам
Я-то думал в статье расскажут по какому принципу эту самую систему отступов собирать, какие бывают (кратная 8, ещё что-то), какие плюсы и минусы в разных подходах...
А тут вообще про лайфхаки для фигмы :/ полезно, конечно, но заголовок не соответствует содержанию.
Спасибо автору, попробую. Но думаю руками это быстрее
лучше не стоит, плохой подход, сложно смотреть потом в инпекторе
Хм, не подумал об этом. Спасибо за инсайд
Интересных подход, но трудно затратный, также это не работает, если использовать auto layout
Олег, это именно с auto layout работает. В других случаях в этом смысла нет.
Почему не работает? Просто ставишь везде 0 и все
Кхм, да, как-то не подумал, что через ноль можно сделать 👍
Комментарий недоступен
В фоторедакторе интерфейсы делали не от хорошей жизни, а потому что аналогов не было.
Фоточки в ФШ редачить классно, а вот объемные сервисы делать - боль страшная)
Проще дружить с фронтом и использовать 8dp с градацией
Хороший трюк, спасибо!
это только дизайнеру интерфейсов, не любящего делитантов, жизнь облегчает .. ?
Оч полезно, спасибо автору)
Тоже после прочтения этой статьи на medium задумался, что слишком уж сложный способ в ней.
Для себя решил при помощи отдельного стиля для компонентов spacing.
По поводу способа описанного в этой статье могу лишь отметить, что на мой взгляд цветовая индикация в данном случае работает не так эффективно, как размер спэйсинга указанный текстом в компоненте.
компонент spacing?
Комментарий недоступен
классная статья)) спасибо автору, будем пробовать!
@Rayan Tvin это что за недозрелые «мегазорды»?
а что - любопытно