Гайд по созданию идеальной карточки для соцсетей

Карточка — это с текстом или картинкой, который выглядит как единое целое. Такие посты используют в Telegram, ВКонтакте, Instagram и на обложках статей. Но почему одни карточки собирают лайки и сохраняшки, а другие проходят мимо внимания?

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

Рассказываю, как спроектировать универсальную карточку в Figma — с учетом кегля, цветового контраста и принципов визуальной иерархии.

Здесь мы на каждый шаг кладем на отдельную карточку, так проще вести повествование

Один экран — одна мысль. Не перегружайте карточку. Внутри достаточно четырёх элементов:

Заголовок
Текст (абзац или список)
Картинка
Подпись к картинке (если нужно пояснение)

Каждый элемент должен быть на своём месте, легко читаться и не мешать остальным. Если карточка не читается за две секунды — её пролистают.

Универсальный размер: 1080×1080 пикселей. Такой формат подойдёт для большинства платформ.

Сделайте внутренние отступы не менее 60 пикселей со всех сторон. Сверху лучше сделать даже больше, чем сбоков — по 90-120 пикселей. Не размещайте текст и важные детали ближе к краю — в некоторых приложениях они могут обрезаться или перекрываться кнопками.

Ориентируйтесь на комфорт чтения с экрана телефона. Вот проверенные размеры:

Заголовок: 24–32 pt, межстрочный интервал 120%
Текст: 14–16 pt, межстрочный интервал 140–150%
Подпись: 12–13 pt, межстрочный интервал 130–140%

Кстати, в фигме и большинстве экранных интерфейсов 1 pt ≈ 1.333 px. Но в реальности Figma использует пиксели (px) напрямую, и кегль 16 pt в Figma = 16 px. То есть внутри Figma “pt” = “px” — это одинаково.

Используйте не больше двух кеглей на карточке. Чем меньше вариаций, тем проще воспринимать.

Гайд по созданию идеальной карточки для соцсетей

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

<i>Теперь когда мы изменяем наш макет он будет меняться и в превью мобилы.</i>

Цвет текста должен быть контрастным к фону. Чтобы проверить контраст, используйте плагин Contrast в Figma.

Последняя обнова фигмы принесла нам фичу проверки контраста прямо в палитре при выборе цвета, ну не сказка ли это?!)

Область с точечками — это оттенки с низкой контрастностью, такие использовать с осторожностью.

Если текст на светлом фоне — делайте его чёрным или тёмно-серым (#1A1A1A).

Если текст на тёмном фоне — делайте его белым или светло-серым (#F2F2F2).

Избегайте цветных фонов с насыщенным текстом — это утомляет глаза. Не используйте серый текст на белом фоне — его никто не прочитает (ну или используйте, если такой и есть смысл).

Карточка должна быть визуально сбалансированной. Есть три надёжных варианта верстки:

1. Картинка сверху, текст ниже, или наоборот

Подходит для цитат, новостей, анонсов.

2. Текст слева, картинка справа

Подходит для списков и коротких инструкций.

3. Картинка на фоне, текст поверх

Используйте только если умеете затемнять фон и проверять контраст.

Для верстки используйте Auto Layout — так вы быстрее обновите карточку, не нарушив структуру.

Соберите карточку как компонент. Заменяйте только текст и картинки.
Добавьте направляющие по краям (60 px отступ), через инструмент Rulers.
Сделайте систему стилей: цвета, шрифты, отступы — чтобы не начинать с нуля каждый раз.
Если публикуете серию — используйте один стиль, но меняйте детали: фон, иконку, заголовок.

Карточка, которую легко читать, удобно верстать и публиковать на многих платформах. Она выглядит аккуратно, держит внимание и доносит мысль.