Урок 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 – позиція об'єкта на осі Х (по горизонталі). Початок координат проходить у лівій верхній точці (зараз рухатимемо прямокутник і все зрозумієте);
• 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% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.

Пройти тест

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