Figma для блоггера

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

Рекомендую пользоваться приложением Figma, а не браузерной версией.

Шаг 1. Создаем новый файл

Чтобы создать новый файл, нужно нажать на кнопку «Design file» в правом верхнем углу.

Шаг 2. Даем файлу имя

Чтобы переименовать файл, нужно кликнуть на его дефолтное название. Называем файл любым понятным именем.

Шаг 3. Выбираем инструмент Frame

В верхнем левом углу выбираем инструмент Frame. Можно также нажать клавишу «F» на клавиатуре — это «горячая» клавиша инструмента.

Шаг 4. Выбираем шаблон

На правой боковой панели находим пункт Social media, раскрываем список. В раскрывшемся списке ищем нужный формат шаблона и нажимаем на него. По названию легко определить какой шаблон подходит, я выбрала Instagram story.

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

Шаг 5. Создаем фон

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

Заливка

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

Находим на правой боковой панели строку Fill (заливка). Нажимаем на квадрат с цветом, по-умолчанию он белый. И выбираем любимый цвет.

Всё, однотонный фон готов!

Градиент

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

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

По умолчанию градиент будет переходить из ранее выбранного цвета в белый с прозрачностью.

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

Добавляем третий цвет. Добавить новый цвет можно двумя способами: нажать в любом месте на линую, которая проходит через объект или нажать на линию в окне выбора цвета. По умолчанию добавится цвет близкий к предыдущему. Меняем его на другой.

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

Все цвета на линии градиента можно двигать. Линия градиента может выходить за объект.

Самый сложный пункт этого урока пройден!

Фото

Чтобы сделать фотографию фоном страницы, выбираем на компьютере фото и нажимаем ctrl+C / cmd+C. Переходим в Figma, выделяем наш шаблон и нажимаем ctrl+V / cmd+V. Фото добавлено!

Чтобы изменить размер фото, наводим на его края и тянем в сторону.

Если нажать клавишу «K» (англ.), то фото будет уменьшаться пропорционально со всех сторон. Чтобы вернуться к прежнему режиму — нажимаем «V».

Шаг 6. Добавляем текст

Чтобы добавить текст нажимаем клавишу «T» (англ.) и мышкой нажимаем в любом месте экрана. Вводим на клавиатуре нужное слово или фразу.

Текст по умолчанию может быть мелким. Меняем размер шрифта на панели справа или нажимаем клавишу «K» и тянем в сторону (как делали с фото).

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

Выбираем шрифт

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

Большинство шрифтов в Figma доступны только на латинице.

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

Теперь вы умеете создавать шаблоны под нужные соц. сети, добавлять фото, заливать фон и писать тексты красивым шрифтом. Удачи в творчестве!

Если понравился урок, подписывайтесь на ТГ-канал по ссылке в профиле ;)

Как создавать шаблоны для соц. сетей

Базовый урок по Figma для блогера завершен! 🥳