2. Работа в Figma: начало
План работы
2. Работа в Figma: начало Вторая тема курса посвящена изучению Figma с нуля: на воркшопах студенты совместно с преподавателем регистрируются в сервисе, разбирают инструментарий (от создания простых кружков до изучения системы компонентов) и представляют свои первые презентации.Задание: повторить все изученные инструменты, использовав их для создания своей первой презентации в Figma.
Работать в Figma можно бесплатно: основной инструментарий для одиночного использования доступен без платных подписок.
Сервис доступен из браузера или можно установить бесплатное приложение с официального сайта. Есть версии для macOS и Windows. Главное отличие между браузерной версией и приложением — способы добавлять шрифты, приложение в этом плане удобнее.
В учебных материалах курса используется приложение Figma для macOS.
Создать учётную запись очень просто, можно привязать её к своей электронной почте или войти через Google аккаунт. После регистрации, чтобы начать работу, нужно лишь в разделе черновиков Drafts нажать +Design file.
Теперь у вас есть ваш первый файл Figma.
Проект лучше сразу переименовать, кликнув Untitled по центру верхней панели — понятные названия облегчат поиск проектов, когда их станет много.
Большое светло-серое центральное поле — рабочее пространство, где будут размещаться все элементы (слайды, тексты, фигуры, картинки и тд).
На верхней панели показаны вкладки открытых проектов и инструменты.
В панели слева будет происходить работа со страницами и слоями.
Справа находится настройка рабочего поля или любого элемента, который будет выбран — в этой панели происходит изменение цвета, размера шрифта и тд.
Интерфейс Figma интуитивно понятен — нужно лишь «потыкаться» и немного практики. Также лучше заранее посмотреть шорткаты программы и постараться запомнить те, которые будут наиболее востребованы для вас.
Для начала проще всего изучить основные геометрические элементы и базовые действия с ними: изменение размера, цвета, добавление обводки, эффектов.
Инструмент текста — один из самых важных для создания презентаций. С текстом в Figma можно выполнять действия, что и с фигурами, но также стоит обратить отдельное внимание на расширенные настройки текста, скрытые под тремя точками в правом меню. Проработанные шрифты имеют большую вариативность, и параметры их отображения в Figma можно легко и быстро настраивать.
Хорошо свёрстанный текст — важнейшая часть презентации.
Уже добавленные в рабочее пространство фигуры и текст на данный момент просто «висят в воздухе». Важный инструмент Figma — фрейм Frame, который является «листком», на который можно добавлять элементы. Для нас отдельно взятый фрейм будет являться слайдом будущей презентации. Размеры фреймов можно выбрать в правой панели.
Объекты на фрейме можно группировать и менять местами с точки зрения «глубины», кто перед кем стоит, что на что накладывается (слои). Объекты и их порядок в иерархии, группы отображаются в панели слева.
В случаях, когда правильные геометрические фигуры не подходят, используются инструменты Pen и Pencil. Первый позволяет создавать фигуры любой формы, соединяя линиями обозначенные точки, а второй рисует вектор так, как происходит движение курсора — со всеми неровностями. Для более точной настройки любых кривых объектов (линий, фигур, векторных добавлений) можно использовать редактирование «по точкам», дважды кликнув на объект. Также доступны настройки кривых Безье.
Когда есть два объекта, из которых нужно сделать один, или «вычесть» один объект из другого, используется инструмент Union selection и Mask из верхней панели. В раскрывающемся списке Union selection можно настроить разные «взаимоотношения» между выбранными объектами.
Добавить изображения с компьютера легче всего стандартным Command+C и Command+V или перетаскиванием из папки.
Для того, чтобы посмотреть и полистать первую презентацию, нужно перейти в режим просмотра — Present в правом верхнем углу.
Для больше порядка элементов на слайде можно использовать сетки или направляющие.
Сетки бывают 3 типов: по клику на Layout grid в правом меню можно выбрать и настроить:
а. Grid — сетка, расчерчивающая выбранную зону на квадраты. Настраивается только размер квадратов в пикселях.
б. Columns — деление на колонки, горизонтальные линии.
в. Rows — деление на строки, вертикальные линии.
У Columns и Rows можно настроить:
1. Count — количество линий; 2. Color — цвет линий; 3. Type — тип позиционирования линий: сверху, снизу, слева, справа, по центру или растягиваясь на всю доступную ширину/длину. 4. Width — ширина линий (при Type: Stretch ширина определяется автоматически) 5. Offset — отступы от краёв 6. Gutter — расстояние между линиями (при Type: Stretch также определяется автоматически)
Существуют и направляющие — линии, которые можно «вытягивать» из разметки по бокам рабочего пространства. Направляющие можно двигать по своему усмотрению.
Объекты будут «магнитится» к линиям стеки или направляющих, чтобы упростить размещение.
Функцию «магнита», как и видимость сетки и направляющих, можно изменить. Колонки, строки, сетку и направляющие можно комбинировать между собой или дублировать.
Все эти функции помогают аккуратно и одинаково размещать контент на слайдах, что очень важно при вёрстке презентации.
На слайдах презентаций встречаются элементы, правила использования которых повторяются из слайда в слайд: например, заголовки слайдов всегда набираются одним и тем же шрифтом и кеглем. Чтобы заменить шрифт, нужно выбрать текстовый элемент и настроить его в правом меню. Один раз это сделать несложно, но если в презентации 78 слайдов, на каждом из которых надо заменить шрифт заголовка?
Для решения таких проблем существуют Styles стили элементов. Подключив каждый заголовок к созданному стилю, мы можем один раз в настройках стиля заменить шрифт, и шрифт заменится во всех текстовых элементах, к которым он подключён. Аналогично работают стили цветов, подводок и эффектов.
Когда первая презентация наконец создана, нужно научиться делиться ей с другими людьми. Несмотря на то, что программа Figma менее популярна, чем, например, PowerPoint, поделиться презентацией не составит труда. Есть два варианта:
1. Поделиться ссылкой на созданную презентацию, нажав Share в верхнем правом углу. Можно отправить эту ссылку любому человеку, даже не имеющему аккаунт в Figma, и ссылка просто откроется в браузере. Причём поделиться можно как и видом «рабочего пространства» файла, так и самой презентацией — это зависит от того, скопирована ссылка была из режима Present или нет. 2. Экспорт PDF файла через Main menu в левом верхнем углу или Export в правой панели (этот вариант позволяет экспортировать выбранные объекты, не только фреймы в файле, в нескольких других форматах, кроме PDF)
В Figma можно настроить правила расстояний между элементами, для это используется Auto layout в правом меню. Легче всего понять принцип его работы, выбрав два элемента и поэкспериментировав с различными настройкам лэйаута. Также важно отметить, что лэйаут работает не только между несколькими элементами, но и внутри одного, если предварительно сделать группу из этого одного элемента — так в Auto layout можно настроить боковые отступы одиночного элемента.
В системе компонентов есть родительский и дочерние элементы — когда изменяется родительский элемент, изменяются и все дочерние. Это похоже на систему стилей, но сложнее и гибче — можно менять и передавать больше параметры, сама работа с компонентами сложнее, чем со стилями. Для примера рассмотрены случаи со сложной геометрической фигурой и двумя лэйаутами, настроенными между четырьмя текстовыми блоками.
Домашнее задание:
Задача: создать свою первую презентацию в Figma.Условия: использовать все изученные в теме приёмы для создания слайдов на любую тему.
Результат: презентация, созданная в Figma, с доступным по ссылке просмотром и экспортированная в PDF
