Урок 7. Регистрация. Интерфейс. Первые шаги. Навигация

Переходимо до практичної частини. Як ви вже здогадалися, будемо використовувати Figma. Спочатку розглянемо, які переваги і недоліки є у цього графічного редактора, а потім почнемо вивчення, як з його допомогою створювати дизайн.

Починаємо з азів. Сьогодні ми вивчимо, як відмалювати прямокутник, лінію, стрілку та текстовий блок. Цього буде достатньо для створення таск флоу усіх видів та простих сторінок.

Наприкінці уроку, як завжди, на вас чекає багато практичних завдань для закріплення матеріалу.

• Почему стоит выбрать Figma?
• Как начать пользоваться? Регистрация
• Обзор интерфейса Figma. Главное меню. Панель инструментов. Рабочая область. Панель свойств. Панель слоев
• Рисуем прямоугольник
• Выделяем, перемещаем и изменяем размеры объектов
• Навигация. Перемещение по рабочей области. Управление масштабом. Фокус на объекте
• Настройка свойств объекта. Позиция и размер. Как зафиксировать пропорции. Угол поворота. Закругление углов. Цвет заливки. Параметры обводки.
• Окно выбора цвета. Копирование и вставка значения цвета
• Добавляем текст. Задаем границы текстового блока. Установки текста
• Рисуем линию и стрелку
• Зачем нужны слои. Порядок рисования
• Полезные команды. Отменить последние действия. Сделать дубликат. Удалить объект. Выделяем несколько объектов сразу
• Домашнее задание
• Выводы

Почему стоит выбрать Figma?

Этот редактор великолепен во всех аспектах, и мы выбираем его не из-за простоты или бесплатного доступа. На данный момент это мощный инструмент, идеально подходящий для создания сайтов, приложений или других графических интерфейсов. Рассмотрим, какие преимущества есть у Figma:

• Бесплатный – большинство функций, которые нужны дизайнеру, доступны в свободном доступе. Пока вы учитесь, Figma не требует никаких финансовых вложений. Покупка подписки станет актуальной, если вы захотите работать также в режиме разработчика или сделать больше чем два командных проекта с другими дизайнерами;
• Простой в освоении – разработчики Figma потратили не один год, чтобы сделать большинство функций интуитивными. Если сравнивать обучение в других редакторах, например Photoshop, то Figma кажется легкой и понятной;
• Невыборглив к компьютеру – этот графический редактор запустится на любом ноутбуке, даже самом слабом. Главное, чтобы запустился браузер. Также не имеет значения, какую операционную систему вы используете (Windows, MacOS или Linux);
• Работает в браузере – для начала вам даже не нужно ничего устанавливать. Зарегистрировались и работаем. Удобно показывать заказчикам. Десктопная версия немного быстрее на огромных проектах, поддерживает локальные шрифты, но в целом можно начать с браузерной версии, что мы и сделаем;
• Есть все необходимые функции и даже больше – обеспечивает самые широкие возможности от векторного редактора до создания интерактивного прототипа, который можно мгновенно протестировать на смартфоне (выглядит, как настоящая программа). Все это мы должны изучить в будущем.

Как начать пользоваться?

Для начала работы нужно зарегистрироваться на сайте Figma с помощью компьютера или ноутбука, запустив браузер. Смартфон не подходит, потому что с него можно лишь просматривать ранее созданный дизайн. Вам нужен рабочий электронный почтовый ящик (email). Он используется в качестве логина.

Главная страница Figma и создание нового файла

Вы уже имели возможность ознакомиться с тарифными планами Figma и увидели, что на данный момент мы выбрали самый простой и бесплатный тариф. Он позволяет вам создавать неограниченное количество проектов для персонального использования. Разработчики Figma назвали их черновиками (Drafts), то есть драфтами.

На главном экране слева вы увидите список разделов:

• Ваше имя – первый пункт сверху. Здесь вы можете настроить свой профиль: изменить имя, электронную почту и пароль. Другие настройки сейчас не важны;
• Search – поиск по проектам по названию. Если у вас будет много файлов, этот раздел может оказаться полезным;
• Recent – недавно открытые файлы. Все упорядочено в хронологическом порядке. Сверху недавно использованные файлы;
• Drafts – черновики (с полноценным функционалом) для личного пользования, обучения и т.д.
• All Projects – это по сути папки, которые позволяют удобно разделять вашу личную и коммерческую работу. Они разработаны для удобного сортирования файлов. В бесплатной версии нам доступен только один проект, в который мы можем переместить файлы из наших драфтов и получить возможность бесплатно протестировать функционал, доступный по подписке.
• Trash – архив удаленных проектов. С ними можно сделать две манипуляции: восстановить или удалить навсегда.
• Community – наработки сообщества: шаблоны, плагины и другие полезности. О них поговорим в следующих уроках, еще рано;

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

Обзор интерфейса Figma

Интерфейс любого графического редактора можно условно разделить на несколько ключевых элементов. Каждый из них выполняет специфическую функцию и активно используется во время работы. Рассмотрим каждую часть:

1. Главное меню — состоит из списка команд, как глобальных (не относящихся к проекту, над которым мы сейчас работаем), так и контекстных, которые применяются, например, к выбранному объекту. Рассмотрим несколько примеров. Глобальная команда: перейти к списку проектов (файлов). Локальная команда: Удалить выбранный объект. Все команды мы рассмотрим отдельно во всех подробностях. Сейчас вам нужно лишь знать, что при нажатии на эту кнопку выпадает огромное меню с командами, которые выполняются при нажатии на них;
2. Панель инструментов — каждая иконка на панели является отдельным инструментом. Чтобы его выбрать, мы нажимаем на иконку, и она подкрашивается в синий цвет, сигнализируя, что все готово к работе. После выбора инструмента его используют в рабочей области (следующий пункт). Например, есть инструмент рисования прямоугольников. Сегодня познакомимся с несколькими полезными примерами;
3. Рабочая область (полотно) – вся магия происходит здесь. Здесь мы рисуем фигуры, используя инструменты. Выделяем примитивы, чтобы изменить их свойства (например, цвет) на панели свойств (следующий пункт);
4. Панель свойств — каждый вид объекта имеет уникальный набор свойств. Например, прямоугольник имеет размер, позицию и цвет. Текст, помимо свойств прямоугольника, имеет еще и межстрочный интервал и выравнивание (по левому краю, по правому краю, по центру). В зависимости от выбранного объекта панель может изменяться до неузнаваемости;
5. Панель слоев — хранит список всех созданных объектов. Кроме того, здесь мы определяем, в какой последовательности их показать (об этом позже). На панели слоев можно выбирать объекты так же, как в рабочей области. Это всего лишь другой способ выделить объект, чтобы отредактировать или изменить его свойства.

Знаю, звучит сложно, но, по сути, у нас получается такая последовательность действий, когда мы создаем дизайн:

1. Выбираем инструмент — на панели инструментов;
2. Используем инструмент — в рабочей области. Например, добавляем прямоугольник или надпись;
3. Выбираем существующий объект — с помощью рабочей области или панели слоев;
4. Изменяем выбранный — с помощью панели свойств (меняем расположение, размеры, цвет) или используя контекстную команду главного меню (делаем копию);
5. Изменяем последовательность отображения объектов — используя панель слоев;

Рисуем прямоугольник

Прямоугольник (Rectangle) – часто используемый примитив. Его можно применить для рисования не только прямоугольника, квадрата, а и даже круга. Для рисования выполняем такую последовательность:

1. Выбираем инструмент Rectangle — кликаем на иконку прямоугольника на панели инструментов. Или нажимаем клавишу R на клавиатуре. Кнопка должна подсвечиваться синим;
2. Задаем начальную точку — для этого кликаем и удерживаем левую кнопку мыши в любом месте рабочей области, чтобы задать "начало" прямоугольника. Не отпускаем левую кнопку мыши;
3. Задаем размеры — перемещаем мышь в любом направлении с удерживаемой левой кнопкой – вуаля – начинает вырисовываться прямоугольник;
4. Задаем конечную точку — теперь отпускаем левую кнопку мыши, чтобы окончательно задать размеры фигуры. Готово!

Так это выглядит в действии (чтобы развернуть видео на весь экран, используйте вторую кнопку внизу справа плеера):

Проанализируем, что произошло. Во время и после отображения прямоугольника вы заметите, что у него появилась синяя рамка – это означает, что объект выделен. Это называется bounding box (читается баундинг бокс), что означает ограничивающая рамка. Под ней указано размер объекта в пикселях – про них мы говорили в предыдущем уроке.

Панель свойств справа мгновенно подстраивается под выделенный прямоугольник. Появились такие параметры:

• X – позиция объекта по оси X (по горизонтали). Начало координат проходит в левой верхней точке (сейчас будем двигать прямоугольник, и все поймете);
• Y – позиция объекта по оси Y (по вертикали);
• W – width (читается виз) или ширина объекта;
• H – height (читается хайт) или высота объекта.

Все эти свойства указываются в пикселях. Чтобы изменить одно из них, достаточно нажать на него и ввести новое число с клавиатуры, после чего нажать Enter. Объект мгновенно отреагирует.

В панели слоев слева появился рядок "Rectangle 1" с иконкой прямоугольника. При создании примитива автоматически создается новый слой. Он подсказывает графическому редактору, в какой последовательности рисовать фигуры. Пока что это не имеет смысла, но когда объектов станет много, я покажу полезность слоев на примере.

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

Выделяем, перемещаем и изменяем размеры объектов

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

• Чтобы выделить объект достаточно нажать на него в рабочей области. Также можно нажать по названию слоя в левой панели. При каждом выделении панель свойств и панель слоев обновляются. Для снятия выделения, щелкните по пустому пространству рабочей области или панели слоев;
• По углам выделенного объекта есть белые квадратики, с помощью которых можно изменить размеры. Для этого наведите курсор на квадратик, зажмите левую кнопку мыши и переместите её. Отпустите левую кнопку мыши, чтобы применить новый размер;
• чтобы переместить объект нужно навести на него курсор, зажать левую кнопку мыши и не отпуская переместить мышку. В этот момент объект выделится и будет следовать за мышкой, пока вы не отпустите левую кнопку.

Тренируемся на прямоугольниках:

Во время перемещения и изменения размеров изменяются соответствующие параметры на панели свойств. Но это лишь самые простые способы взаимодействия с фигурами. Существует еще несколько не столь очевидных приемов, но работать с их помощью гораздо эффективнее:

• Если до начала перемещения зажать кнопку Shift, то объект будет смещаться ровно вертикально или горизонтально в зависимости от того, куда вы поведете курсор после зажатия левой кнопки мыши;
• Можно изменить размер объекта, потянув за одну из его граней, а не за угол, чтобы изменить только высоту или ширину;
• Для сохранения пропорций при изменении размера объекта нужно зажать кнопку Shift. В таком случае соотношение сторон сохранится, и, например, квадрат останется квадратом;
• Ювелирно точно подогнать позицию фигуры можно с помощью клавиш-стрелок на клавиатуре. Одно нажатие переместит выделенный объект на один пиксель в соответствующую сторону. Чтобы увеличить шаг до 10 пикселей, нужно зажать клавишу Shift, одновременно нажимая на стрелку. Можно также зажимать стрелки, чтобы получить непрерывное перемещение.

Есть и другие приемы, но этого пока что будет достаточно для комфортной работы. Испробуйте новые способы управления объектами:

Навигация

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

• Для перемещения камеры зафиксируйте пробел, одновременно зажав левую кнопку мыши и переместите курсор в нужном направлении. Объекты на рабочей области начнут перемещаться согласно новому положению камеры. Как видите, вокруг много пустого пространства. Во время этой манипуляции курсор примет изображение руки, напоминая, что находится в другом режиме. Вместо аналогии с камерой можно также представить, что таким образом мы перемещаем полотно, на котором нарисованы фигуры;
• В верхнем правом углу отображается текущее значение масштаба камеры. Так, например, 100% означает, что мы все видим 1 к 1, то есть натуральный размер. 200% означает, что все увеличено вдвое. 25% – все уменьшено вчетверо. Чтобы увеличить масштаб, нажмите кнопку + (плюс). Чтобы уменьшить масштаб, нажмите - (минус). Еще удобнее использовать колесо прокрутки мыши. Если у вас Windows, то просто покрутите его, чтобы приблизить/удалить камеру. На MacOs еще нужно зажать кнопку Command;
• Чтобы быстро сбросить масштаб до 100%, нажмите Shift + 0. Если выбрать какой-то слой на панели слева, кликнув по нему, то указанная комбинация переместит камеру таким образом, что содержимое окажется по центру рабочей области. Это удобно, когда вы потеряли из виду нужный вам объект и хотите сфокусироваться на нем;
• Если нужно увидеть все, что есть на странице – нажмите комбинацию Shift + 1;

Эти три приема позволяют очень быстро ориентироваться в пространстве:

Настройки свойств объекта

А теперь самое интересное. Выделите прямоугольник и обратите внимание на панель свойств. Большинство этих параметров доступны для всех видов объектов. Рассмотрим подробнее, что и как можно настроить.

• Позиция и размер — после клика на поле можно увеличивать/уменьшать значения с шагом в единицу с помощью кнопок-стрелок вверх/вниз. Чтобы увеличить шаг до 10, зажимаем Shift. Также стоит отметить, что в этих полях работают самые простые арифметические операции. Например, можно добавить к текущему значению число написав +8 и нажав Enter. Также поддерживаются операции вычитания, умножения и деления. Чтобы быстро перейти к следующему свойству, нажмите Tab. Чтобы перейти к предыдущему, нажимаем Shift + Tab;
• Зафиксировать пропорции — позволяет сохранить пропорции при изменении ширины или высоты через поля свойств;
• Угол поворота — позволяет повернуть объект на произвольный угол;
• Закругление углов — задает радиус закругления всех углов;

• Цвет заливки — задает цвет прямоугольника. По клику появится окно, после чего нужно выбрать соответствующий цвет и его насыщенность. Далее кликаем на крестик в правом верхнем углу окна или в любом месте вне окна, чтобы сохранить изменения;
• Добавить обводку — добавить эффект обводки по контуру фигуры. После активации появятся новые настройки;
• Цвет обводки – по клику появится такое же окно, как и для цвета заливки;
• Толщина обводки — указываем толщину линии;
• Удалить обводки — если она вам не нужна.

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

Окно выбора цвета

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

Для этого нужно нажать на поле со значением цвета, выделить его, нажать правую кнопку мыши и выбрать Copy (скопировать). Далее выбираем объект, к которому хотим применить скопированный цвет, кликаем по его полю цвета заливки или цвета обводки, выделяем все значение, нажимаем правую кнопку мыши, выбираем Paste (вставить) и нажимаем. Намного быстрее использовать комбинации Command + C, Command + V для MacOs и Ctrl + C, Ctrl + V для Windows.

Есть еще более быстрые приемы для копирования и вставки цветов, но об этом в следующих уроках. А пока что осваиваем показанные способы.

Добавляем текст

Это самое простое. Сначала выбираем инструмент Text на панели инструментов. Его иконка выглядит как большая буква T. Или используем горячую клавишу T. Далее выполняем такую последовательность действий:

• Задаем границы текстового блока — это делается так же, как создание прямоугольника. Эти границы указывают, где текст будет автоматически переноситься на новую строку, если ширины недостаточно. Кроме того, они задают рамки, относительно которых текст выравнивается;
• Вводим текст — после создания границ текстового блока мигающий курсор намекает, что, собственно, пришло время вводить текст. Чтобы сохранить наш текст, нажмите Escape;
• Изменяем внешний вид текста — теперь мы можем установить шрифт, цвет, размер, вертикальное и горизонтальное выравнивание. Выравнивание позволяет указать, по какому краю размещать текст (слева, справа или по центру). Все эти параметры находятся на панели свойств. Убедитесь, что текстовый блок выделен.

Весь процесс показан на видео ниже. Работе с текстом будет посвящено отдельные уроки, это очень объемная тема.

Рисуем линию и стрелку

И последняя на сегодня пара примитивов. Процесс создания также очень похож на прямоугольник, а все важные свойства мы уже рассмотрели. Для выбора инструмента Line (линия) или Arrow (стрелка) нужно сначала нажать на стрелку рядом с иконкой прямоугольника, а затем из меню выбрать нужный инструмент. Существуют и горячие клавиши для быстрой активации: Line - L, Arrow - Shift + L. Смотрим видео и пробуем самостоятельно:

Есть один полезный прием. Если во время создания линии или стрелки зажать Shift, то фигура будет рисоваться под углом кратным 45 градусам.

Зачем нужны слои?

Проведу аналогию с реальным миром, чтобы была понятна концепция. Представьте, что у вас есть несколько файлов формата A4. Эти прозрачные файлы, в которые вставляется офисная бумага. Так вот, в каждый из этих файлов вставляем одну вырезанную из цветного картона фигуру (круг, прямоугольник и так далее). У нас получилось несколько фигур в прозрачных файлах. Теперь вставляем их в папку и переворачиваем все файлы на один бок. Теперь можно увидеть, что некоторые фигуры перекрываются другими. В этой аналогии папка – это панель слоев, файл – слой, а картонная фигура – это примитив внутри этого слоя. Посмотрим, зачем нужны слои в Figma:

• Упорядочивают и группируют объекты — в следующих уроках мы научимся создавать группы и фреймы, которые позволяют свернуть несколько слоев с примитивами в один. Слои можно переименовывать, что позволяет объединять их по содержанию (например, кнопки, списки, окна, экраны и т.д.). Кроме того, группы и фреймы можно вложить друг в друга, создавая целые иерархии. Все эти возможности позволяют быстро и удобно работать с очень большими проектами. Продолжая аналогию с реальным миром, представим, что в прозрачный файл можно вставить несколько картонных фигур;

• Для возможности выделить и сфокусироваться на объекте – кроме того, в панели слоев есть поиск по названию;

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

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

  
  
  
  
  

А тепер спробуємо сформулювати визначення шару у Figma. Шар (layer) – це абстрактний об'єкт з назвою, який відображає поміщений у нього примітив (фігуру) відповідно до глибини малювання. Шари можна обʼєднувати в фрейми (тобто групувати за сенсом), але про це в наступному уроці.

Полезные команды

• Отменить последние действия — иногда можно что-то сделать по неосторожности и нужно вернуться во времени на несколько действий назад. Для этого нажимаем Command + Z на MacOs или Ctrl + Z на Windows. Можно выполнить несколько раз, пока не откатимся до нужного состояния;
• Создаем дубликат объекта — выделяем нужный объект и нажимаем Command + D на MacOs или Ctrl + D на Windows. Копия появится на том же месте, где был оригинал и будет выделенной. Вы сразу можете начать работать с ней, например, перемещать стрелками, что очень удобно;
• Удаляем объект — выделяем нужный объект и нажимаем Delete. Он сразу исчезнет из рабочей области и панели слоев;
• Выделяем несколько объектов сразу — зажимаем левую кнопку мыши и тянем курсор в любом направлении, чтобы в рамку, которая появилась, попало несколько объектов. Далее отпускаем левую кнопку мыши и имеем несколько выделенных объектов. Что теперь можно сделать с ними? Можно переместить их как один объект или изменить размеры. Если объекты одного вида, можно изменить свойства для всех сразу.

Домашнее задание

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

2. Нарисуйте по одной иконке из каждого ряда, приведенного ниже, используя изученные инструменты. Вы должны хорошо разбираться в свойствах фигур, чтобы выполнить это задание. Не нужно пытаться повторить иконки один в один, они могут немного отличаться;

3. Перерисуйте один вайрфрейм из предыдущего урока на ваш выбор;
4. Задание повышенной сложности (по желанию). Перерисуйте еще два других сайта. Нарисуйте остальные иконки.

Если вы не можете выполнить какое-либо задание, прочитайте урок еще раз и попробуйте снова. Если совсем не получается, пишите в комментариях или в директ. Помните, здесь сосредоточено большое количество работы, не рассчитывайте все сделать за один вечер.

Заключения

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

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

Информации много, поэтому перечитайте урок снова через несколько дней, чтобы ничего не забыть.

Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашних заданий в сторис, задавайте вопросы, а также на вас ждет множество полезных постов о дизайне.

Пройти тест

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

Пройти тест

Продолжить обучение