Где лежат все визуалы от страницы в ВК?

Файл-то прислали, но без программы не открывается?

Макет огромный, как им лучше поделиться?

Уже час ждём, пока дизайнер пришлет обложку для поста?

Поменять бы текст на обложке сообщества, но где исходник, не знаю?


Если хоть одна из этих ситуаций вам отозвалась,
ПОРА СМОТРЕТЬ В СТОРОНУ ФИГМЫ
Как визуально оформить страницу в ВК. Figma
В чём разбираемся
  • 1
    Чем хороша Фигма
    для тех, кто работает
    с контентом
  • 2
    Что нужно знать новичку, чтобы создать в Фигме визуалы для ВК
  • 3
    Как создать в Фигме элементы оформления страницы в ВК
Зачем нам Фигма

Всё больше и больше дизайнеров и дизайн-команд переходят на Фигму. Даже если вы не планируете углубляться в дизайн, познакомиться с этим редактором стоит. По крайней мере на минимальном уровне.

Что хорошего
  • 1
    Без установки
    В Фигме можно работать, вообще ничего не устанавливая на компьютер, просто на сайте. При желании можно установить десктопную версию, а можно даже завести Figma Mirror для смартфонов.
  • 2
    Можно забыть, что такое «файлы»
    Помните, как названия файлов, отражающие 100-500 версию сохранения: «maket_final_2-1print.psd»? Это ушло в прошлое. На бесконечной рабочей поверхности Фигмы можно добавлять, изменять и хранить всё, что угодно без ограничений.
    Не нужно ломать голову над поиском макетов, постоянно их скачивать, делать правки и снова заливать. Все работы хранятся на облаке, изменения сохраняются в программе автоматически.
  • 3
    Делиться за секунду
    Нужно просто отправить ссылку, чтобы показать наработки команде или заказчику, дать / получить комментарии, передать макет разработчикам,
    Не нужно больше нужно думать, куда выгрузить файлы, чтобы сохранить / поделиться / передать новому сотруднику.
  • 4
    Комментировать в моменте
    Можно забыть про тонны переписок в мессенджерах или создании скринов. Вы можете в любом месте макета оставить комментарии, это в разы ускоряет процесс внесения правок и обсуждения спорных моментов.
  • 5
    Для индивидуальной работы — бесплатный
    Единственная причина, когда появляется необходимость платить — командная работа.
  • 6
    Плагины, если чего-то не хватает
    Есть куча дополнений к программе, чтобы работать с графикой, генерировать контент, создавать анимацию и пр.
    Например, есть плагин, чтобы:
    ·  удалить фон,
    ·  нарисовать диаграммы,
    ·  создать таблицы как в Microsoft Word,
    ·  примерить дизайн на мокапы.
Есть и недостатки

Для тех, кто не очень ладит с английким

Язык интерфеса — английский или китайский. Третьего не дано. Но не переживайте. В сервисе многие инструменты обозначены иконками, а действия совершаются «горячими» клавишами. Уже через час знакомства основные комбинации становятся привычными.


Нужен стабильный интернет

Есть способ обойти это ограничение: скачать десктопную версию приложения.


Нет защиты от копирования на бесплатном тарифе

Так что не шлите ссылки ненадежным товарищам.

Что делают в Фигме?

Редактор сочетает в себе функционал, за которым раньше ходили в разные программы: например, для работы с растровой графикой использовали Photoshop, а для векторной — Illustrator или CorelDRAW. В Фигме можно делать всё, что делали в графических редакторах:


· любые графические макеты

· прототипы, интерфейсы сайтов и приложений

· иконки

· логотипы

· презентации…

И визуалы для соцсетей, конечно
«Гардероб» страницы

Оформить сообщество можно по-разному. Кто-то использует только обложку и аватар, кто-то разрабатывает полный пакет элементов, с набором шаблонов для постов и сторис, для разных рубрик и форматов публикаций.


Одного «правильного» рецепта нет, всё зависит от ваших целей. Но если вы решили создавать визуальный образ страницы, то все элементы стоит оформить в едином стиле.


Вариант А. Заказать разработку фирменного стиля у дизайнера, получить готовые шаблоны и только менять наполнение. Тут главное — не промахнуться с техническим заданием и заказать то, что ДЕЙСТВИТЕЛЬНО нужно для вашего сообщества, а не набор типичных визуалов, которые будут пылиться на странице в Фигме и никогда не будут опубликованы.


Вариант Б. Сформировать стиль страницы самостоятельно, определив:

  • набор цветов,
  • шрифт — гарнитуру с широкой линейкой начертаний, от тонкого до супер-жирного,
  • элементы оформления, которые будете использовать.
  • принципы организации элементов в макете (место и пропорции элементов, способы выравнивания, способы использования фотографий и др.).
Что используем?
Базовые элементы оформления страницы
  • обложка
  • аватар
  • виджеты
  • товары (или то, что вы представите в витрине)
Оформление публикаций
  • пост: изображение + заголовок
  • рубрики
  • пост: только заголовок
  • статья
  • пост: заголовок + описание
  • анонс
  • цитата
  • цифра
  • персона
  • сниппет
  • интерактив: конкурс, тест...
  • история

Список, как вы понимаете, открытый. Платформа постоянно обновляется и предлагает новые формы, и ваша фантазия безгранична.


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

А вот шаблоны, которые использует сообщество Сделано.медиа.

С точки зрения формы

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

Что нужно научиться делать
  • Создавать геометрические фигуры
    менять их форму, размер, окрашивать
  • Размещать фотографии
    помещать их внутрь других объектов, двигать, кадрировать
  • Набирать / вставлять текст
    менять ему шрифт, размер, выравнивание, гарнитуру, интерлиньяж и ширину строки
  • Располагать фигуры относительно друг друга
    выравнивать, менять порядок, группировать
  • Сохранять изображения
    в разных форматах

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

Начало работы
Откройте сайт сервиса. Нажмите кнопку «Get started for free», чтобы авторизоваться или зарегистрироваться. Войти можно и через аккаунт Google.
Все проекты хранятся в личном кабинете. По умолчанию два уже добавлены: они знакомят с базовыми функциями сервиса. Нажмите на кнопку «+Design file», чтобы создать и открыть новый проект. Поменяйте название, кликнув на заголовок «Untitled / без названия» левой кнопкой мыши.
Любым проектом можно поделиться. Нажмите на синюю кнопку «Share / делиться» в правом верхнем углу экрана.


Для отдельных пользователей настройте доступ (просмотр или редактирование) и введите адреса через запятую. Приглашённые пользователи смогут редактировать проект, войдя в свой аккаунт на платформе Фигма.

Если хотите создать публичную ссылку на проект, нажмите на «Copy link».
Проект — это место хранения всех материалов, имеющих отношение, в нашем случае, к одной группе в «ВКонтакте». Внутри проекта может быть одна или несколько страниц, а на странице любое количество фреймов (то есть рамок с отдельными элементами дизайна).

Вы можете создать несколько фреймов-образцов, а затем их дублировать, редактировать и сохранять как файлы изображений.

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

Фрейм объединяет объекты внутри себя. Когда вы создаёте элементы внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Осваиваемся
Чтобы освоиться в Фигме, посмотрим, как в редакторе выполняются основные операции: создавать фреймы, объекты и текст, масштабировать страницу, передвигаться по ней, дублировать объекты, изменять параметры.
Базовые действия и инструменты в Фигме
Для удобства работы настройте палитру цветов. Справа от иконки фреймов находится инструмент рисования фигур, по умолчанию — прямоугольников. Кликните по иконке и нарисуйте столько небольших объектов, сколько цветов планируете использовать.

Выделите первый объект и в правой панели найдите параметр «Fill». Под ним вы увидите строчку значения цвета по умолчанию. Если кликнуть по ней, откроется окно подбора цвета. Настройте нужный оттенок либо вручную, либо вставьте HEX-код в соответствующее поле, либо кликните пипеткой по предварительно загруженному изображению. Повторите с остальными объектами. Пока эти элементы не удалены из проекта, выбранные для них цвета будут отображаться в окне подбора цвета в разделе «Document colors». Это позволит быстро применять нужные оттенки к другим элементам дизайна.
Убедитесь, что в Figma есть нужные вам шрифты. Можно расширить стандартный список шрифтами с компьютера. Скачайте расширение «Font installers» и установите его. После этого в окне выбора шрифтов можно будет переключаться со списка «All fonts» на список «Installed by you».
Обложка и аватарка
С этих элементов начинается оформление группы в «ВКонтакте». Размер обложки — 1590 х 530 пикселей. Создайте фрейм заданного размера. Добавляя текст, изображения и графические элементы, обращайте внимание на те области, которые будут видны на мобильных устройствах.

Для аватарки задайте новому фрейму размер 600 х 600 пикселей. Отображаться в ленте он будет небольшим, поэтому убедитесь что изображение или надпись хорошо считываются.
Тренируемся на сделано.медиа
Создаем обложку и аватар
Проверить, как смотрятся созданные обложка и аватарка, можно при загрузке её в ВК при нажатии на кнопку «Предпросмотр».
Иллюстрации для постов
Ограничений по изображениям в постах ВК нет — они могут быть любого размера и любого соотношения сторон. Но обычная и мобильная версия ВК отображают их по-разному. В группе сделано.медиа картинки квадратные, чтобы хорошо смотрелись на всех устройствах.

Отредактируем фотографию для поста. Создайте фрейм нужного размера, например, 1080 х 1080 пикселей. Зайдите в «Main menu» — «File» — «Place image» и выберите изображение на вашем компьютере. Но проще добавить в проект файл, перетащив его в окно браузера.

Пометите фотографию во фрейм, зажав её левой кнопкой мыши. Изображение кадрируется автоматически— все области, выходящие за границы фрейма, обрезаются, а на правой панели можно дополнительно настроить масштаб и угол поворота.
В один пост можно загрузить до 10 изображений. Они отображаются сеткой или каруселью. Актуальный контент можно показать в формате карточек, то есть серии иллюстраций с текстом. Оптимальный размер карточек — 1080 х 1080 пикселей каждая.

Чтобы добавить текст, нажмите на кнопку «Text» и кликните в нужном месте. Настройки также меняются в правой панели, дополнительное окно можно вызвать, нажав на три точки в правом нижнем углу раздела «Text». Вот что можно сделать:

  • изменить шрифт, размер и выравнивание,
  • зачеркнуть или подчеркнуть,
  • изменить расстояние между буквами или строчками,
  • поэкспериментировать с разными типами CapsLock.
Хорошо смотрятся в ленте и круглые изображения. Особенно часто они используются для того, чтобы оформить фотографию эксперта или героя материала.

Можно сначала создать квадратный фрейм и на правой панели увеличить значение угла скругления на максимум (1000), получится круг, и разместить в него изображение.

А можно скруглить само изображение. Выделите его, и тоже увеличьте значение угла скругления, отредактировав число. Ровный круг получится только из квадратных изображений, поэтому на первом этапе возможно придётся кадрировать файл. Кстати, с помощью кнопки «Independent corners» можно настроить закругление всех углов на индивидуальное значение.
Размеры обложки статьи в «ВКонтакте» — 1920 х 1080 пикселей. Поверх неё будет размещен заголовок, поэтому не перегружайте дизайн лишними элементами. Можно, например, просто залить фрейм обложки выбранным цветом. Для этого на правой панели найдите пункт «Fill», кликните по образцу цвета и выберите нужный оттенок.
Сниппет — это изображение, которое автоматически подгружается, если вы размещаете в посте ссылку на какой-либо сайт. Создайте фрейм 537 х 240 пикселей и выберите для него цвет фона. Затем добавьте фотографию, как это было описано выше.

Чтобы изображение смотрелось хорошо, его можно тонировать. Выделите фото и на правой панели найдите пункт «Layer». По умолчанию здесь стоит параметр «Pass through». Кликните по нему и из выпадающего списка выберите опцию «Multiply». При необходимости можно уменьшить прозрачность до 50%, этот параметр находится в той же строчке.
Продумывайте рубрики для своего контента. Изображения в них должны быть оформлены в одном стиле. Например, можно собрать рубрику из микроформатов — цитат или цифр. Настроив дизайн первого изображения, дублируйте фрейм сочетанием клавиш «Ctrl + D». Измените текст, не меняя его расположения, подберите подходящие картинки.

Микроформат «Цифры» представляет собой посты с цифрами и пояснительными к ним предложениями. Такие материалы прекрасно собираются в самостоятельную рубрику и хорошо смотрятся как посты для социальных сетях. В этом формате обычно нужны однотипные картинки, чтобы дублировать уже настроенный фрейм, выделите его и нажмите сочетанием клавиш «CTRL+D» на клавиатуре.
Тренируемся на сделано.медиа
Создаем обложку для анонса
Сохранение изображений
Сервис умеет сохранять дизайны в четырёх форматах: PNG, JPG, SVG и PDF. Выделите фрейм, который собираетесь сохранить. В правом меню найдите пункт «Export». Задайте настройки сохранения (масштаб, название, формат файла) и нажмите на кнопку «Export НАЗВАНИЕ ФРЕЙМА». Рисунок сразу скачается на компьютер. Через кнопку «+» можно задать сразу несколько вариантов настроек, тогда на компьютер сохранится архив с файлами.

Также можно выгрузить сразу все созданные вами дизайны. Кликните по пустому месту, чтобы снять выделение. В правом меню найдите пункт «Export» и действуйте аналогично.
Итоги
Чтобы освоиться в Фигме
  • Создайте новый проект
    01
  • Сверстайте дизайны в отдельных фреймах
    02
  • Скачайте в выбранном формате
    FIN