Дизайн
Женя Иванов
2826

Хардкорные карточки на Auto Layout – Figma-компоненты, часть вторая

Продолжаем оптимизировать UI-kit и дизайн-систему необычными способами. В прошлый раз мы разбирали хардкорные ячейки, многим зашла эта тема, поэтому продолжаем делать разборы компонентов, следующий на очереди — карточки.

В закладки
Аудио

Всё из статьи упаковано в этом Figma-проекте, тыкайтесь на здоровье. А пока вот краткое превью, как работают карточки:

​Превью карточек на примере UI от «ВКонтакте»

Как видишь, всё работает внутри одного scroll-блока и нам не нужно множество компонентов Scroll Block/Small, Medium, Horizontal и так далее, а размеры картинок у нас и так должны быть в ките, если ты добрался до систематизации размеров изображений, конечно.

Все изображения можно менять через инстансы, а не удаление/проявление слоёв, значит наш проект будет в разы меньше весить и не будет лагать (особенно актуально для больших проектов).

Меняем размеры карточек и сравниваем их в прототипе

Прежде чем у меня получился гибкий и лёгкий в использовании компонент, я потратил не одну попытку, а весь секрет карточки на auto layout оказался в одном НЕ auto layout слое, вот так вот...

Чтобы менять размер изображения в auto layout через instanse и не потерять саму заливку изображения, нужно добавить отдельный обычный слой внутрь него, который и будет отвечать за размер карточки.

Позже оказалось, что этот слой не останется пустышкой, внутрь него можно положить различные контролы (например, таймер для видео) и обводку, чтобы белые карточки имели чёткие границы, если тебе это нужно, конечно.

Второй слой с обводкой отвечает за размер карточки​

После того, как мы разобрались с изображениями, просто засовываем один из вариантов картинок и слой c заголовком и подзаголовком в один auto layout компонент. Для текстового слоя включите режим Stretch left and right, чтобы при смене размера изображения текстовый слой тоже расширялся или сужался до нужного размера автоматически.

Теперь без всяких извращений можешь использовать готовую карточку где угодно, а сменять изображение по Ctrl + нажатие и смена инстанса на нужный, всё легко и просто.

На этом всё. Рассказать об этой карточке, оказалось, намного проще, чем к ней прийти, обычно наоборот. Поэтому пробуйте и тыкайтесь в этом Figma-проекте, если будут какие-нибудь предложения, допиливайте и оставляйте ссылки в комментариях. Туда же пишите вопросы и пожелания, обсудим.

А если хочется ещё хардкорных статей по компонентам и дизайн-системам, залетайте в мой Telegram-канал ;)

{ "author_name": "Женя Иванов", "author_type": "self", "tags": ["figma"], "comments": 18, "likes": 40, "favorites": 149, "is_advertisement": false, "subsite_label": "design", "id": 121349, "is_wide": true, "is_ugc": true, "date": "Mon, 20 Apr 2020 15:54:15 +0300", "is_special": false }
Право
Товарные знаки для тех, кто ведёт бизнес в интернете: защищаем домен, управляем отзывами и контролируем конкурентов
Казалось бы, регистрация брендов в Роспатенте — это история про заводы и предприятия: вот наша одежда, еда или…
Объявление на vc.ru
0
18 комментариев
Популярные
По порядку
Написать комментарий...
4

Где ты был месяц назад...

Ответить
0

Я месяц назад был в Москве, а вы?)

Ответить
0

Этажом ниже) 

Ответить
0

Разве самоизоляции тогда не было? По-моему мы уже по домам сидели))

Ответить
0

Тире, минус или дефис?)

Ответить
0

там был коммент, что не очень понятно зачем 2 раза оборачивать в автолайаут, но потом понял на больших размерах)
но не кажется, что это несколько оверкилл и проще всё же создавать определенные пресеты каруселей/ячеек?

Ответить
3

Возможно, это разные подходы к формированию процесса создания дизайна интерфейсов, у каждого свои плюсы и минусы: с одной стороны моими способом кажется сложнее пользоваться, но я постарался сделать такую систему, что сменить карточки в пресете можно за один клик, а сэкономленное место в облаке фигмы поможет сохранить нервы, когда проект просто вырубится из-за большого количества синхронизируемых компонентов. У нашей команды недавно случился такой трабл и сейчас поддержка фигмы просто восстанавливает нам проект своими силами, поэтому сейчас я пытаюсь выжать максимум из каждого слоя и упаковать всё в один дополнительный контейнер вместо разделения на несколько компонентов)

Ответить
0

Спасибо Евгений, эта тема тоже зашла) давайте ещё 

Ответить
0

Спасибо, как-то на твою статейку натыкался, тоже понравилась) Есть идеи, какую тему взять в следующем посте?

Ответить
1

Спасибо) Очень интересно читать про универсальные компоненты

Ответить
0

Спасибо за статью!
Было бы интересно про хардкорные таблицы почитать, если такие есть у вас на проекте.

Ответить
0

Привет, а ты сам пробовал таблицы на лэйаутах собирать?)

Ответить
0

Пробовал, но до удобства экселя не довёл ) вот, начал автолэйаутом пробовать реализовать перенос строки на требуемые позиции

Сейчас на проекте сделано так:
- есть компоненты "колонки", (числа, даты, иконки, выравнивание в стороны)
- есть задний фон (разной высоты строк 1х, 2х, 3х).

Из этого собираем вручную таблицы. Колонки удобно передвигать влево-вправо и менять их ширину. Кстати, надо их тоже обернуть в автолэйаут (понял, пока печатал камент).

У этого решения есть проблема –
Невозможно передвинуть строку. Только вручную.

Хотя опять же, сейчас понял, что можно просто тоже у колонок сделать автолэйаут вертикальный для ячеек.

Ответить
3

Вообще в одном проекте мне понадобится обширная таблица, поэтому может попробую собрать хардкорный компонент и написать статью. Но попробуй сначала собрать её сам по совету выше, потом сверимся как что получилось)

Ответить
1

Я так понимаю у тебя столбец собран с отступами и расстояниями между текстом и разделителем. Советую собрать ячейки в отдельный компонент и разделить их на несколько видов, как в экселе, типо текста прибиваются к левому краю, цифры к правому и т.д. Должно получится так, что у тебя столбик свёрстан из нескольких ячеек без паддингов сверху и снизу (странно выглядит отступ от последнего разделителя) и без расстояния между ячейками (сами ячейки должны включать внутри себя это расстояние

Ответить
0

Спасибо за анализ и совет, попробую так победить, через ячейки )

Ответить
0

Давай-давай) потом в комментах отпишись как получилось)

Ответить

Прямой эфир