Где лежат все визуалы вашего проекта?

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

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

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

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


Если хоть одна из этих ситуаций вам отозвалась,
ПОРА СМОТРЕТЬ В СТОРОНУ ФИГМЫ
Как визуально оформить канал в Телеграм
В чём разбираемся
  • 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».
Аватарка
С этого элемента начинается оформление канала. Вы можете пометить во фрейм любое изображение, и оно обрежется по форме круга.  Можно создать изображение нужной формы заранее, чтобы понимать, как будет выглядеть ваш аватар в ленте подписчиков. 

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

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

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

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

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

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

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

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

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