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

Переходим к практической части. Как вы уже догадались, использовать будем Figma. Сначала рассмотрим, какие достоинства и недостатки у этого графического редактора, а потом приступим к изучению — как с его помощью создавать дизайн.

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

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

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

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

Этот редактор замечателен во всех аспектах и выбираем мы его не из-за простоты или бесплатного доступа. Он действительно мощный. Это невероятно, но некоторые функции реализованы лучше, чем в платном Sketch. Вот лишь несколько из них: цветовые стили, auto layout. Рассмотрим, какие преимущества есть в Figma:

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

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

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

1. Заходим на сайт Figma — переходим по этой ссылке и сразу добавляем ее в закладки браузера. После регистрации и входа будем использовать эту закладку для запуска Figma словно обычное приложение. Нас встречает анимация, которая показывает одно из ключевых преимуществ Figma — возможность совместно и одновременно редактировать файл (возможно вы встречали аналогичную функцию в Google Docs). Поэтому видно разноцветные курсоры с именами:

2. Переходим к форме регистрации — для этого ищем и нажимаем на кнопку Sign up (зарегистрироваться) на главной странице в правом верхнем углу:

3. Заполняем первый шаг формы регистрации — вводим ваш адрес электронной почты в поле Email. Придумываем пароль и вводим его в поле Password. Email и пароль можно будет сменить позже при надобности. Нажимаем кнопку Create account и переходим к следующему шагу. Есть и другие способы регистрации (например, с помощью учетной записи Google), но они не такие универсальные;

4. Заполняем второй шаг формы регистрации — вводим свое имя (можно с фамилией) в поле Your name на английском языке. Это имя будут видеть другие участники проекта, например, ваш заказчик. Оно будет всегда отображаться в правом верхнем углу запущенного приложения (точнее первая буква). Кстати, если не указывать имя, то оно будет автоматически сгенерировано из адреса электронной почты. Имя можно будет сменить позже. Далее в выпадающем меню What kind of work do you do? указываем Design. Если хотите получать новости о Figma по электронной почте, то ставим галочку напротив I agree to join Figma's mailing list. Но вы всегда можете почитать последние обновления в блоге. Нажимаем кнопку Create account;

5. Добро пожаловать! Регистрация почти завершена — Figma приветствует нас и предлагает указать название нашей команды. Но так как мы работаем одни, то нажимаем Do this later;

6. Закрываем всплывающие подсказки — Figma очень дружелюбна и сразу знакомит нас со своим интерфейсом с помощью всплывающих советов. Эти подсказки очень полезны для дизайнеров, которые уже знакомы с другими графическими редакторами. Кроме того снабжаются ссылками на документацию. Но для нас они бесполезны, так как мы не знает абсолютно ничего. Поэтому нажимаем на крестик в углу и закрываем их;

7. Все! — Figma готова к работе. Разверните браузер на весь экран, чтобы получить максимум полезного пространства. Есть еще несколько нюансов прежде, чем мы начнем;

8. Подтверждаем адрес электронной почты (email) — вы же знаете, что в большинстве сервисов нужно подтвердить адрес почты на случай, если вы, например, забудете пароль. Figma не исключение. Проверяем почту и ищем письмо с названием темы Please confirm your email. Если не нашли, то проверяем папку со спамом. Если письмо угодило туда, то отмечаем, что это не спам. В Gmail, например, для этого есть специальная кнопка Report not spam, когда открываем письмо, которое попало в спам. Это очень важный момент, так как в дальнейшем, когда заказчик будет оставлять комментарии к вашему дизайну Figma будет отправлять письмо-уведомление об этом. А реагировать на замечания клиента нужно как можно быстрее. Итак, открываем письмо и нажимаем кнопку Confirm your email:

   После нажатия мы будем перенаправлены на страницу Figma с недавно отредактированными проектами (файлами). Figma хранит все ваши проекты на удаленном сервере (это еще называют "в облаке"). Это значит, что вам не нужно ничего сохранять у себя на компьютере, все делается автоматически. Сверху страницы вы увидите уведомление о том, что ваш email подтвержден You have successfully confirmed your email address. Оно исчезнет через несколько секунд. Справа вы можете видеть изображения ваших проектов. Смотрите, Figma добавила несколько для ознакомления. Наш пустой проект находится в самом верху. Кликаем на него и возвращаемся в редактор.

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

Обзор интерфейса 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. Если предварительно выбрать какой-то слой на панели слева, кликнув по нему, то указанная комбинация переместит камеру таким образом, что содержание окажется по центру рабочей области. Это удобно, когда вы потеряли из виду нужный вам объект и хотите сфокусироваться на нем;

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

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

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

• Позиция и размер — после клика на поле можно увеличивать/уменьшать его значение с шагом в единицу с помощью кнопок-стрелок вверх/вниз. Чтобы увеличить шаг до 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-ти градусам.

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

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

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

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

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

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

  
  
  
  
  

А теперь попробуем сформулировать определение слоя в Figma. Слой – это абстрактный объект с названием, который отображает помещенный в него примитив (фигуру) в соответствии с глубиной отрисовки. Слои можно объединять в группы, но об этом в следующем уроке.

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

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

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

Домашние задания больше не проверяются для граждан россии. Чтобы убедиться, что вы не из россии, после того как оставите комментарий с домашним заданием в конце урока на сайте, напишите мне в директ Инстаграмм @frusia.pro

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

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

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

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

Выводы

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

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

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

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

Stay tuned!