Дизайн на платформе Figma
для новичков
 
Что такое Фигма и зачем она нужна
Figma (Фигма) — это самый популярный и удобный графический онлайн-редактор с большим набором возможностей для индивидуальной и групповой работы. В нем можно создать абсолютно все виды изображений, которые нам нужны для публикаций, и сохранить их в виде шаблонов для дальнейшей работы.
Достоинства Фигмы
  • Вы можете работать и с компьютера, и с телефона/планшета

  • Вы можете один раз создать макеты нужных вам изображений (посты /сториз в Инстаграм, пины в Пинтерест, рекламные изображения) и дальше легко их адаптировать для следующих публикаций

  • Встроенные инструменты дают вам возможность создавать востребованные современные дизайны и избегать распространенных ошибок

  • Работа происходит на облачном сервисе, поэтому к своим проектам у вас есть доступ с любого устройства, на котором вы залогинены

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

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

  • В Фигме удобнее, чем где-либо добавлять и использовать собственные красивые шрифты и делать стильные коллажи

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

Я сама работаю именно в нем, это намного удобнее, чем на маленьком экранчике телефона.

Как скачать браузерную версию:

Зайдите на сайт figma.com и зарегистрируйтесь по кнопке Sign Up
Или прокрутите экран ниже и выберите формат работы. Для нас с вами бесплатного варианта хватит за глаза.
Нажмите Choose Starter и зарегистрируйтесь в открывшемся окне
Как скачать приложение (десктопную версию):

Зайдите на figma.com/downloads и выберите версию программы для iOS или Windows.
Установите приложение на компьютер точно так же, как вы раньше устанавливали все прочие приложения. Создайте на рабочем столе ярлык для быстрого доступа к приложению.

Еще одно преимущество приложения перед браузерной версией в том, что в нем легче устанавливать свои шрифты. А вам наверняка захочется для своих дизайнов пользоваться интересными шрифтами, а не стандартным базовым набором.
Интерфейс Фигмы и основы работы
Разметка шаблона
Шрифты и шрифтовые пары
Виды шрифтов:

- антиква
- гротеск
- брусковые
- рукописные
- декоративные

Как их распознать?

У антиквы значительно разная толщина штрихов и наличие засечек («хвостиков» у букв). У гротесков – единая толщина и отсутствие засечек. Брусковые шрифты — это промежуточный вариант между антиквой и гротеском с простыми широкими засечками и малозаметной разницей в толщине штрихов. У рукописных – сглаженные углы и присутствие соединительных штрихов как при письме от руки. Декоративные шрифты — это плод воображения художников, никаким правилам не подчиняются.

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

  • шрифты без засечек (sans-serif) = гротески
  • шрифты с засечками (serif) = антиква и брусковые
  • узкие шрифты (condensed) = любые, их основная особенность - вытянутость написания
  • рукописные и декоративные шрифты

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

Гротески возникли в XIX веке, когда их начали активно применять для газетных заголовков, плакатов и афиш – такие буквы были четко различимы издалека. Такие шрифты идеально подходят для важной информации. Не так давно появилась разновидность «округлых» гротесков. Эти шрифты считаются располагающими, дружелюбными, демократичными.

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

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

В шрифтовой паре должна быть и видимая разница. Поэтому стоит категорически избегать сочетания шрифтов, принадлежащих к одной группе. Не надо брать две антиквы старого стиля или два округлых гротеска – они вместе будут смотреться грязно.
Я выложила для вас коллекцию из 240 трендовых шрифтов. Большинство из них имеют и английские, и кириллические буквы.

В папках хранятся шрифты, у которых есть несколько разных вариантов начертания. У остальных шрифтов есть только один вариант начертания букв.


Чтобы установить шрифт на компьютер, сделайте следующее:

  1. Скачайте его и сохраните в нужной папке. Каждый шрифт и каждый вариант начертания (тонкий. курсив, полужирный и т.п.) нужно будет скачать отдельно.
  2. Зайдите в папку и два раза кликните левой кнопкой мыши по нужному шрифту.
  3. В открывшемся окне нажмите кнопку Install (см. ниже).
  4. Когда вы после этого откроете Фигму или другую программу, использующую шрифты (например,Фотошоп), шрифт уже будет в ней установлен.
  5. Шрифт должен быть с расширением otf или ttf.
Примеры шрифтовых пар
Примеры с благодарностью взяты из интернета
Горячие клавиши в Фигме
Горячие клавиши это такие сочетания клавиш, которые помогают выполнить типовые операции быстрее, практически на автопилоте. Естественно, я не призываю вас вызубривать все эти сочетания назубок. Просто попробуйте потренироваться, применяя их, возможно, что-то окажется для вас удобным и полезным.
Windows
Чтобы произвести нужное действие, вам нужно зажать на клавиатуре соответствующую букву, нажать левую кнопку мыши и провести мышкой по экрану. У вас возникнет фигура требуемой формы, а для текста будут обозначены границы поля для его ввода. Эти границы в дальнейшем можно будет изменить в любую сторону.
Mac OS
Чтобы произвести нужное действие, вам нужно зажать на клавиатуре соответствующую букву, нажать левую кнопку мыши и провести мышкой по экрану. У вас возникнет фигура требуемой формы, а для текста будут обозначены границы поля для его ввода. Эти границы в дальнейшем можно будет изменить в любую сторону.
Примеры с благодарностью взяты из интернета
Ошибки в дизайне
1
Не стоит использовать в посте или Стори больше двух шрифтов. В разных Стори вы можете поэкспериментировать со шрифтами, особенно если вам нужно с помощью текста добавить выразительности сообщению. А вот в вечных Сториз и ленте вашего аккаунта лучше применять только одну шрифтовую пару.

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

Желательно не использовать для фона оттенки любого цвета, которые находятся справа от белой линии - в верхнем правом углу. Такие яркие оттенки можно использовать для текста или маленьких элементов.

И еще учитывайте, что Instagram искажает красный цвет.
3
Следите за размером публикуемых изображений. Они должны быть размером не менее 500 пикселей в высоту, в особенности если это изображение будет занимать бОльшую часть поста или Стори.

Размер изображения можно узнать, нажав на него правой кнопкой мыши и выбрав опцию Свойства.
4
Следите за негативным пространством (“воздухом”), его должно быть достаточно.

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

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