Как сделать визуальное оформление группы в VK. Figma

Каждый визуал в Фигме можно прокомментировать, обсудить, изменить. Финальный результат дизайна можно выгрузить в нужном для работы формате и обновить оформление вашего сообщества VK.

Начало работы

Зайдите на сайт сервиса. Нажмите кнопку в правом верхнем углу «Get started for free», чтобы авторизоваться или зарегистрироваться. Войти можно и через аккаунт Google.

По умолчанию два проекта уже добавлены: они знакомят с базовыми функциями сервиса.

Любым проектом можно поделиться. Нажмите на синюю кнопку «Share» в правом верхнем углу экрана. Настройте доступ (просмотр или редактирование) и введите адреса через запятую. Приглашённые пользователи не смогут редактировать проект без входа в свой аккаунт.

Как организовать проект дизайна визуалов в Фигме

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

Нажмите на иконку «Frame» и кликните в любом свободном месте проекта. Появится стандартный фрейм 100×100 пикселей.

Как настроить инструменты для быстрой работы

Палитра цветов

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

Выделите первый объект и в правой панели найдите параметр «Fill». Под ним вы увидите строчку значения цвета по умолчанию. Если кликнуть по ней, откроется окно подбора цвета.

Пока эти элементы не удалены из проекта, выбранные для них цвета будут отображаться в окне подбора цвета в разделе «Document colors». Это позволит быстро применять нужные оттенки к другим элементам дизайна.

Шрифты

Убедитесь, что в Фигме есть нужные вам шрифты. Можно расширить стандартный список шрифтами с компьютера. Скачайте расширение «Font installers» и установите его. После этого в окне выбора шрифтов можно будет переключаться со списка «All fonts» на список «Installed by you».

Как сделать обложку и аватарку для группы в VK

Оформление группы в VK начинается с обложки и аватара. Размер обложки — 1590×530 пикселей. Создайте фрейм заданного размера. Добавляя текст, изображения и графические элементы, обращайте внимание на те области, которые будут видны на мобильных устройствах. Чтобы проверить, как смотрится обложка, загрузите её в VK и нажмите кнопку «Предпросмотр».

Для аватарки задайте новому фрейму размер 600×600 пикселей. Отображаться в ленте он будет небольшим, поэтому убедитесь что изображение или надпись хорошо считываются. Проверить, как смотрится аватар, вы также можете при загрузке его в группу ВК.

Как сделать иллюстрации для постов в сообществе VK

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

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

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

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

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

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

Как сделать круглую картинку или аватарку в Figma

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

Ровный круг получится только из квадратных изображений, поэтому на первом этапе возможно придётся кадрировать файл. Кстати, с помощью кнопки «Independent corners» можно настроить закругление всех углов на индивидуальное значение.

Как сделать обложку для статьи в VK

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

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

Продумывайте рубрики для своего контента. Изображения в них должны быть оформлены в одном стиле. Например, можно собрать рубрику из микроформатов — цитат или цифр. Настроив дизайн первого изображения, дублируйте фрейм сочетанием клавиш «Ctrl + D». Измените текст, не меняя его расположения, подберите подходящие картинки.

Как сделать визуальный пост для VK

Микроформат «Цифры» представляет собой посты с цифрами и пояснительными к ним предложениями. Такие материалы прекрасно собираются в самостоятельную рубрику и хорошо смотрятся как посты для социальных сетях. В этом формате обычно нужны однотипные картинки, чтобы дублировать уже настроенный фрейм, выделите его и нажмите сочетанием клавиш «CTRL+D» на клавиатуре.

Сохранение изображений в Фигме

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

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

Стоимость сервиса Figma

У сервиса Figma есть бесплатный и платный тарифы.

Free	Три проекта, неограниченное количество членов команды
Figma professional, $12 в месяц за одного человека	Безлимитное количество проектов, командная библиотека файлов