{"id":8525,"title":"\u0410\u043a\u0446\u0438\u044f \u043e\u0442 \u0431\u0430\u043d\u043a\u0430 \u0441 \u043e\u043e\u043e\u0447\u0435\u043d\u044c \u0434\u043b\u0438\u043d\u043d\u043e\u0439 \u0440\u0430\u0441\u0441\u0440\u043e\u0447\u043a\u043e\u0439","url":"\/redirect?component=advertising&id=8525&url=https:\/\/vc.ru\/promo\/314626-korotko-vyigrat-100-tysyach-rubley-na-pokupki-k-novomu-godu&placeBit=1&hash=452c4539de3180a40833ab562f6d46ac6a723a1c475a25d3a1dc82d21cace4b8","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 комментариев
Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Бот, который сделает маму счастливее

Kind Bot напечатает и отправит по почте фото вашей маме. В 2 клика.

Как я заработал свой первый миллион просмотров на лонгридах

Мой опыт ведения текстового блога на «Виси», «Пикабу», «Хабре», Дзене и еще пачке площадок. Сколько потратил на них сил и какую отдачу в итоге получил.

Английский язык. Как это надо делать, если вернуть 2 года назад

Всегда считал себя неспособным к языкам, школу закончил, мягко говоря, с 0 знанием Английского языка. Как ,наверно, 95% населения нашей страны.

Бизнес — как ребенок: как мамы совмещают свое дело с заботой о детях

Как совмещать бизнес и семью? Ко Дню матери своими историями поделились бизнесвумен, которые работают c ЮKassa и занимаются детьми. Читайте, как им удается сохранять жизненный баланс и добиваться успеха.

Из науки в IT: как создать свой стартап и стать преподавателем

Как перейти в IT из другой сферы? Как разработать курс, которому нет аналогов? Как студенту получить максимум пользы от занятий? Рассказывает преподаватель OTUS Сергей Окатов, руководитель курсов «Kotlin Backend Developer» и «Kotlin Developer. Basic».

Завод по производству идей. Как работают акселераторы, зачем они нужны стартапам и куда идти с идеей прямо сейчас

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

Как у меня украли 600 тысяч с карты, а Тинькофф нарушает федеральный закон

Спойлер: я НЕ вводил никуда код, НЕ переходил по ссылкам и НЕ сообщал данные карты.

Я всегда считал себя финансово грамотным человеком, сам когда-то работал в банке, соблюдал цифровую гигиену, держал деньги на нескольких счетах, не привязывал основную карту в непонятных сервисах, в 90% оплат пользовался Google Pay. Когда родственники присылали…

Что Tele2 предлагает клиентам в «черную пятницу»

На главной распродаже года клиентов компании ждут сразу несколько интересных предложений: скидки на смартфоны, пакеты SMS и безлимитный трафик на YouTube, Яндекс.Карты, Яндекс.Навигатор.

Наследник Рокфеллера, сын Софи Лорен, боксёр и продюсер: история француза, обманувшего Рурка, Ван Дамма и других звёзд Статьи редакции

СМИ прозвали Кристофера Роканкура звёздным мошенником: его жертвами были голливудские знаменитости и американские предприниматели. Точная сумма ущерба от действий француза неизвестна, но сам он утверждает, что за свою жизнь «заработал» $40 млн.

Кристофер Роканкур и Наоми Кэмпбелл francetvinfo
Как разблокировать рекламный кабинет Фейсбук, заблокированный навсегда, за 6 дней

Всем привет! Ну как вы поняли ситуация не из приятных...
Обратилась ко мне Оксана. Это молодая и приятная женщина, которая вела свой личный блог в инстаграм о здоровье (тут я упущу пожалуй все ее регалии). Скажу только одно, что в профиле инстаграм, не скрываясь, красовались баночки одной из сетевых компаний. Ну и соответственно и в рекламных…

null