{"id":8721,"title":"\u0427\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u0440\u044b\u0431\u044c\u0435\u0439 \u0447\u0435\u0448\u0443\u0438","url":"\/redirect?component=advertising&id=8721&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-krossovki-iz-chaynogo-griba&placeBit=1&hash=3f7bfd5e764a97a666a0f91fc9e9278a2147bac49abdacebb6449b781d4d5ca0","isPaidAndBannersEnabled":false}
Дизайн
Женя Иванов

Хардкорные карточки на 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-канал ;)

0
18 комментариев
Популярные
По порядку
Написать комментарий...

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

4

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

0

Этажом ниже) 

0

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

0

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

0

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

0

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

3

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

0

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

0

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

1

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

0

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

0

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

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

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

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

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

0

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

3

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

1

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

0

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

0
Читать все 18 комментариев
Путин поручил разработать вариант налогового вычета для частных инвесторов при долгосрочных вложениях в российские акции Статьи редакции

Фондовый рынок должен не только финансировать инвестиционные проекты, но и приносить доход гражданам, считает президент.

Минэкономразвития РФ приняло предложения РСПП по совершенствованию рынка интеллектуальной собственности

На актуализации плана дорожной карты ТДК (трансформация делового климата) «Интеллектуальная собственность» в соответствии с пожеланиями бизнес-сообщества настоял первый заместитель председателя правительства Андрей Белоусов.

Мвидео отказал в замене товара ненадлежащего качества. Битый телевизор

14.11.2021 доставка магазина Мвидео привезла мне домой телевизор LG. При приёме телевизора от доставщиков никаких недостатков не обнаружили ( или не заметили, потому что телевизор был весь запотевший). Включать для проверки тоже не стали из-за запотевания. В тот же вечер через несколько часов телевизор повесили и попытались включить, он не…

Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

Лайфхак в подборе: как ATS-системы помогают экономить время и бюджет рекрутеров

Процесс рекрутинга существенно не отличается от компании к компании. Есть несколько типичных шагов, которые проходит рекрутер: размещение вакансии на джоб-бордах, поиск соискателей по базам, согласование кандидатов с заказчиками, собеседование, выдача и проверка тестового задания, проверка кандидата службой безопасности.

«Мегафон» заблокировал 36 тыс. ₽ на 2 недели по ФЗ № 115

Являюсь абонентом Мегафона второй десяток лет. Несколько лет назад завёл себе карту Мегафон-банка. Очень нравилось, и рекомендовал всем, так как:

На сайтах с эквайрингом от ПСБ появился Yandex Pay

Покупатели с аккаунтом «Яндекса» смогут оплачивать покупки, не вводя данные карты.

Kornia - Python библиотека для обработки изображений в задачах CV

В этой статье я хотел бы познакомить читателей с библиотекой для ЯП python — Kornia, имеющей богатый функционал в области computer vision. Библиотека написана с использованием pytorch, в ее основе лежат готовые решения, такие как torchvision, PIL, skimage, tf.image, OpenCV. В Kornia реализована возможность выполнения вычислений не только с…

Это Элви Рэй Смит: он мечтал создать анимационный фильм на компьютере, соосновал Pixar, но ушёл из компании из-за Джобса Статьи редакции

Смит создал альфа-канал, который используется в Photoshop и других редакторах, работал в Xerox и LucasFilm и убеждал всех, что за компьютерной графикой будущее, однако всерьез его никто не воспринимал – кроме Стива Джобса.

null