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