Как сделать пост (презентацию, обложку, что угодно) в Figma, не зная Figma

Из-за блокировки Canva для российских пользователей за последние несколько дней мои знакомые из сферы маркетинга (и не только) не один раз задавали мне вопрос: «Не знаешь простого сервиса, чтобы быстро оформить пост, карточки для Телеграм, кейсы и т.д.».

Я никогда не пользовалась Канвой, не знаю никаких подобных сервисов, поэтому отправляю всех в Figma. Для меня это самый удобный инструмент.

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

Но проблема в том, что все очень занятые. Посмотреть любую обучалку по Фигме около 45 минут и потыкать нет времени. Да и, будем честны, многим просто лень разбираться с новым инструментом.

Делайте все по инструкции, и будут вам карточки / шаблоны / обложки / слайды — крч, что хотите.

Фигму можно скачать на комп либо работать через браузерную версию. Поработаем с браузерной, но инструментарий в обеих версиях один и тот же.

На скриншотах пометила все инструменты, которые понадобятся в работе. Обращайтесь к ним, как к карте, когда будете следовать инструкции.

РАБОТА С ФРЕЙМОМ

РАБОТА С ТЕКСТОВЫМ СЛОЕМ

РАБОТА С ПЛАШКОЙ (ГЕОМЕТРИЧЕСКОЙ ФИГУРОЙ)

ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ

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

Чтобы включить линейки, нажмите вверху View — Rulers. Они появятся сверху и слева. Дальше с помощью зажатия мыши вытащите из них направляющие и установите на нужное место.

Чтобы проверить отступы элементов друг от друга, выберите элемент, зажмите alt и подведите мышкой к другому элементу, от которого вы хотите отмерить расстояние.

ПАНЕЛЬ СЛОЕВ

Слева вы увидите панель слоев. Там отображаются все элементы, с которыми вы работаете.

Новичку в Фигме достаточно знать следующее:

1. Включаем инструмент Frame с помощью горячей клавиши F или, кликнув, по значку с клеткой в левом верхнем углу. Сбоку видим уже заранее созданные фреймы (рабочие области) популярных разрешений. Выберем для примера Social media — I******** Post.

2. Программа автоматически нарисует карточку 1080 х 1080 px. Но эти размеры можете подправить, как угодно, потянув за края фрейма, или с помощью ввода конкретных обозначений ширины и высоты в поля W и H на панели справа.

3. Еще у карточки можно поменять цвет. Для этого нужно нажать в разделе Fill в панели справа на слой с цветом и выбрать нужный из палитры.

4. Теперь добавим текст. Для этого выбираем инструмент Text с помощью горячей клавиши T или кнопки с иконкой T в верхней панели. Далее кликаем на экране и пишем текст или вставляем заранее скопированный текст из буфера обмена.

5. С текстом можно делать все, что угодно: менять размер, шрифт, цвет, начертание (жирность, курсив и т.д.), выравнивание, длину и высоту текстового слоя. Все инструменты для этого в панели справа (см. скриншот по работе с текстовым слоем).

Можете разбить свой текст на несколько текстовых слоев и размещать их, как вам нужно.

6. Переместите текстовый слой с помощью мышки куда угодно.

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

1. Включаем инструмент Rectangle с помощью горячей клавиши R или, кликнув, по значку с квадратом в левом верхнем углу (если нажать на стрелку, можно выбрать другую фигуру). Рисуем мышкой прямоугольник в нужном месте.

2. Убираем слой с прямоугольником под текст и выравниваем относительно него так, как нужно.

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

Есть очень много способов добавить картинку в Фигму. Я расскажу о самых простых.

С изображением можно работать, как с и другими слоями: менять размер, перетаскивать и т.д.

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

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

Осталось только сохранить готовую карточку поста. Для этого:

Вот как-то так) Вроде ничего сложного, но если остались вопросы, пишите их в комментариях. Постараюсь помочь👇