Продолжаем знакомство с основами Figma. Сегодня узнаем новые приемы работы со слоями, включая выделение, перемещение, группировку, блокировку и скрытие.

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

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

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

Группы

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

Чтобы решить эту проблему и существуют группы, которые позволяют работать с несколькими объектами, как с одним слоем.

Например, прямоугольник и текстовый блок можно объединить в одну группу по смыслу – это уже будет кнопка. Это очень удобно и значительно ускоряет работу.

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

Создание и удаление группы

Предположим, что нам нужно объединить несколько примитивов, составляющих кнопку в группу. Для этого:

  1. Воспользуемся приемом из прошлого урока, зажав левую кнопку мыши сверху слева и потянув ее в нижний правый угол, тем самым выделим сразу все примитивы, из которых построена кнопка. На панели слева подсветятся выделенные слои;
  2. Нажимаем правую кнопку мыши над любым из компонентов кнопки и из выпадающего меню выбираем Group Selection. Доступна и комбинация горячих клавиш для быстрого объединения: Command + G в MacOs или Control + G в Windows;
  3. Обратите внимание, что в панели слоев вместо двух выделенных примитивов появился один слой с новой иконкой и названием Group 1 – это и есть наша кнопка;
  4. Теперь вы можете работать с кнопкой, как с обычным слоем: перемещать, масштабировать, дублировать и так далее без необходимости выделять каждый слой;
  5. Чтобы разбить группу назад на составляющие, нужно выделить кнопку и в контекстном меню выбрать Ungroup или нажать Shift + Command + G в MacOs или Shift + Control + G в Windows;



Сворачивание и разворачивание группы

Как вы заметили, после создания группы ее содержимое автоматически скрывается. Это состояние называется свернутой группой. Чтобы показать все содержимое, группу нужно развернуть:

  1. Подвести курсор внутрь панели слоев. Слева напротив каждой группы появится маленькая треугольная стрелочка указывающая направо;
  2. Кликнуть на стрелочку, содержимое группы станет видимо. Стрелка повернется вниз, сигнализируя про развернутое состояние;
  3. Чтобы опять свернуть содержимое, еще раз кликните на стрелку.



Вложенные группы

Группы могут включать в себя другие группы. Для этого достаточно выбрать несколько слоев с группой и сделать еще одну группу. Слой, который находится внутри группы, называется ребенком. Слой-группа, в котором находятся другие слои называется родителем.

Зачем это может понадобится? Все с той же целью: для удобной и быстрой работы. Рассмотрим пример. Несколько кнопок и логотип с подложкой могут быть объединены в так называемую шапку сайта (на английском – header, читается хэдэ) – элемент дизайна, который повторяется на всех страницах и обычно содержит средства для быстрой навигации. В глазах Figma это просто группа с другими вложенными группами.

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




Перегруппировка

Иногда может понадобится переместить слой из одной группы в другую или дополнить группу новыми слоями.

Для этого достаточно перетащить слой на нужную группу в панели слоев – и он мгновенно окажется внутри. Также можно перетащить слой в нужное место между слоями внутри развернутой группы. Если слой нужно убрать из группы, то его нужно перетащить в область над группой или под ней, как показано в видео:




Выделение слоев

Мы уже умеем выделять объекты, с помощью клика по ним в рабочей области или на панели слоев. Также, мы знаем как выделить несколько слоев с помощью рамки, зажав левую кнопку мыши в рабочей области. Сейчас познакомимся с новыми приемами и узнаем, как выделять вложенные слои без развертывания группы.

Выбираем вложенный слой

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

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

Двойной клик ускоряет выделение при работе с вложенными слоями и значительно быстрее ручного развертывания групп. Но что если уровней вложенности больше одного? Ведь прийдется делать несколько двойных кликов. Чтобы выделить объект на самом нижнем уровне вложенности, достаточно зажать Command в MacOs или Ctrl в Windows и сделать клик по объекту – это называется глубокое выделение (deep selection).




Выбираем несколько слоев (новый способ)

Зажмите кнопку Command в MacOs или Ctrl в Windows и кликайте по слоям один за другим в панели слева. Зажмите клавишу Shift и выделяйте объекты кликом или рамкой в рабочей области. Каждое новое выделение будет объединяться со старым. Этот способ очень удобен при создании групп и в комбинации с глубоким выделением.




Выбираем диапазон слоев

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




Выбираем перекрытый слой

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

Еще один вариант: зажмите Ctrl и нажмите правую кнопку мыши в область перекрытия слоя. Вместо контекстного меню сразу появится список слоев, что значительно быстрее предыдущего способа.

Эти способы выделения работают и для заблокированных слоев, но не для невидимых!




Снимаем выделение

Чтобы снять выделение в рабочей области зажмите Shift и кликните по нужному объекту или воспользуйтесь рамкой.

Чтобы снять выделение с объекта через панель слоев кликните на выделенном объекте с зажатой клавишей Command в MacOs или Ctrl в Windows.




Работа со слоями

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

Блокировка и скрытие слоев

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

  1. Выделить нужные слои;
  2. Навести курсор на выделенные объекты в рабочей области или в панели слоев;
  3. Вызвать контекстное меню правой кнопкой мыши;
  4. Выбрать Lock/Unlock, чтобы заблокировать или Show/Hide, чтобы скрыть слой;
  5. Если навести курсор на слой в панели слоев, то справа от него появятся иконки действий: кликните на замок, чтобы заблокировать/разблокировать слой или на глаз, чтобы скрыть/показать его;
  6. Но лучше воспользоваться горячими клавишами: заблокировать – Shift + Command + L в MacOs или Shift + Control + L в Windows; скрыть – Shift + Command + H в MacOs или Shift + Control + H в Windows;
  7. Разблокировка и показ скрытых слоев выполняется аналогично, но выделять их следует, по понятным причинам, на панели слоев.


Копирование, вырезание и вставка слоя

Для копирования объекта выделите его и нажмите Command + C в MacOs или Ctrl + C в Windows.

Чтобы вырезать объект, выделите его и нажмите Command + X в MacOs или Ctrl + X в Windows.

Для вставки выберите объект или совсем уберите выделение и нажмите Command + V в MacOs или Ctrl + V в Windows.

Копирование, вырезание и вставка объектов, такие привычные по другим программам команды, некоторых новичков в Figma вводят в недоумение. Дело в том, что позиция, куда будет вставлен объект зависит от того, какой сейчас выбран тип объекта (примитив или группа) и на каком уровне вложенности он находится. Рассмотрим все на примерах:

  • Если ничего не выбрать, то вставка произойдет в том же месте, где находится исходный объект;
  • Если выбрать группу или примитив внутри группы, то вставка произойдет в центре этой группы;

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

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




Вставка в позицию другого объекта

Позицией любого объекта в Figma считается его верхний левый угол. Чтобы сделать позицию вставки более предсказуемой, достаточно после копирования или вырезания выбрать объект и нажать Shift + Command + V в MacOs или Shift + Ctrl + V в Windows. Новый объект будет вставлен аккуратно в левом верхнем углу выделенного слоя.




Названия слоев

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

Переименование слоев

Чтобы переименовать слой достаточно:

  1. Выбрать нужный объект на рабочей области или в панели слоев и нажать Command + R в MacOs или Ctrl + R в Windows;
  2. Изменить название слоя;
  3. Нажать Enter, чтобы сохранить изменения;
  4. Также можно сделать двойной клик по названию слоя в панели слоев, чтобы войти в режим редактирования.

Чтобы переименовать группу слоев нужно:

  1. Выбрать несколько слоев;
  2. Нажать Command + R в MacOs или Ctrl + R в Windows;
  3. В поле Rename to вписать новое название и нажать Enter.



Задавайте названия со смыслом

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

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

Вот небольшой список типичных названий слоев, чтобы у вас было представление:

  • Header
  • Footer
  • Button-CTA
  • Modal-Export
  • Icon-Reload
  • Img-Banner

Никто не запрещает вам называть слои так, как вы хотите, подстраиваясь под нужды вашего проекта и команды. Это лишь напутствие для новичка.

Импорт изображений

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

Референсы и мудборды

Референс, референсы (от англ. reference – рекомендация, эталон, намек, ссылка) — одно или несколько примеров изображений, которые предоставляет заказчик, чтобы показать, что он хочет получить в результате вашей работы. Референс может касаться не всего сайта, а лишь какого-то конкретного его аспекта. Например, цвета попросят, как на первом сайте, структура шапки – как на втором, навигационное меню мобильной версии – как на третьем. Референсы сопровождаю техническое задание и делают его более понятным. Референсом может выступать не только изображение, но и ссылка на сайт или даже фото/видео.

Мудборд (от англ. mood board – доска настроения) — это подборка изображений, которую составляет дизайнер, с целью показать заказчику и получить отзыв на самом раннем этапе, еще до начала работы. С помощью таких подборок мы пытаемся прощупать вкус клиента, понять его предпочтения. Лучшие экземпляры из мудборда в дальнейшем могут использоваться, как отправная точка для начала дизайна (как референсы). Как и в случае с референсами, изображениями для мудборда могут выступать дизайны других сайтов, фотографии (как примеры удачных цветовых сочетаний), иллюстрации, шрифты, наборы цветов и так далее.

Для создания мудбордов существуют специальные бесплатные сервисы: Milanote, Pinterest. Но не спешите там регистрироваться, для начала нам хватит возможностей Figma.

Мудборд

Импорт из буфера обмена

Чтобы работать с референсами и создавать мудборды нам нужно каким-то образом вставить картинки прямо в рабочую область. В Figma есть несколько механизмов для этого. Сначала познакомимся с самым простым из них. Чтобы вставить картинку нужно:

  1. Найти любую картинку в браузере;
  2. Кликнуть правой кнопкой мыши по ней, чтобы вызвать контекстное меню;
  3. Выбрать команду Copy Image, что заставит браузер скопировать изображение в буфер обмена;
  4. Переключиться назад в Figma;
  5. Нажать Command + V в MacOs или Ctrl + V в Windows, чтобы вставить изображение из буфера;
  6. Обратите внимание, что если изображение окажется большим, то при его вставке оно перекроет всю рабочую область. Не стоит этого пугаться, достаточно уменьшить масштаб картинки;
  7. Дальше с изображением можно работать, как с прямоугольником: изменять положение, размеры и так далее.

У Figma есть ограничение на вставку больших растровых изображений: если ширина или высота картинки превышает 4096 пикселей, то вставленный объект будет автоматически отмасштабирован до указанных величин.




Импорт из файла

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




Инструмент пипетка

Пипетка или Eyedropper Tool или Color Picker – позволяет считать цвет из любого примитива и назначить его выбранному объекту. Очень полезен для подбора цветовой гаммы на основе изображений. Мы уже знаем, как скопировать значение цвета из одного объекта и вставить его в другой. Но есть и более быстрый способ.

Быстрое присваивание цвета

Для быстрого копирования цвета достаточно:

  1. Выбрать один или несколько объектов, которые нужно перекрасить. Если у него есть заливка или обводка, то ее цвет и будет заменен. Если у объекта есть и заливка и обводка, то заменен будет только цвет заливки;
  2. Нажать кнопку I или Ctrl + C, чтобы активировать пипетку;
  3. Навести курсор на точку рабочей области, из которой нужно считать цвет. Обратите внимание на увеличительный круг с пиксельной сеткой в верхнем правом углу, который появляется для вашего удобства;
  4. Осталось сделать клик левой кнопкой мыши для подтверждения;
  5. Если выбранный объект содержит цвет заливки и обводку и вы хотите изменить цвет обводки с помощью пипетки, то для этого нужно кликнуть по цвету обводки, чтобы вызвать окно выбора цвета и только потом вызвать пипетку.



Присваивание цвета пикселей изображения

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




Точное позиционирование

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

  1. Выделите объект, который вы хотите точно подогнать;
  2. Зажмите кнопку Option в MacOs или Alt в Windows;
  3. Подведите курсор к другому объекту, чтобы увидеть расстояние в пикселях;
  4. Одновременно изменяйте положение выделенного объекта с помощью кнопок-стрелочек.



Как поделиться проектом

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

  1. Нажмите кнопку Share;
  2. Нажмите на Only people invited to this file;
  3. В выпадающем списке выберите Anyone with the link, чтобы сделать файл доступным по ссылке;
  4. Кликните по Copy link, чтобы скопировать ссылку в буфер обмена;
  5. Теперь отправьте ссылку человеку, с которым хотите поделиться вашим проектом. Доступ будет только для просмотра: все, кто перейдут по ссылке не смогут ничего изменить.



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

  1. Вернитесь к файлу с первым и вторым заданием из прошлого урока и наведите порядок: сгруппируйте и переименуйте слои (задайте осмысленные названия), чтобы в них было проще ориентироваться;
  2. Зайдите на сайт Behance (тут дизайнеры делятся своими работами), прокручивайте страницу пока не найдете иллюстрации (не путать с фотографиями). Иллюстрации (смотрите пример в видео из предидущего раздела «Как поделиться проектом») нам идеально подходят, так как из них проще выделить основные цвета. Скопируйте себе 5 картинок, которые вам нравятся (чтобы стала доступна команда Copy Image, нужно предварительно кликнуть по работе, она увеличится). Для каждой картинки нарисуйте 4-8 кружков одинаковых размеров и покрасьте их в ключевые цвета иллюстрации (используйте пипетку);
  3. Введите в поисковой строке Behance запрос «UI web app». Постарайтесь найти простенький дизайн сайта и перерисуйте его как можно более детально, насколько у вас получится (игнорируйте то, что пока не можете воссоздать). Иллюстрации и фото замените своими, ищите их на сайте Unsplash;
  4. Тренируйте насмотренность. Заходите на сайт Awwwards и просматривайте размещенные там сайты не менее 10 минут в день – здесь собраны лучшие примеры веб-дизайна. Можете также использовать этот сайт для предыдущего задания;
  5. Задание повышенной сложности (по желанию). Нарисуйте любую страницу из еще двух сайтов, которые вы найдете на Behance или Awwwards.

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

Выводы

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

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

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

Stay tuned!

Читать шестой урок


Обучение дизайну
Июнь 2020


Что ещё почитать

Что нужно знать начинающему UX/UI дизайнеру. Полный список. Roadmap

Дизайн. Интерфейс. UX и UI

Ежедневные задачи UX/UI дизайнера. Программы для дизайна

Основы Figma. Часть 1. Регистрация. Интерфейс. Первые шаги. Навигация и свойства объектов

Основы Figma. Часть 3. Фреймы. Сетки. Направляющие. Знакомство с компонентами

Процесс создания веб-сайта


Оставьте комментарий



Комментарии

Мария · 23 июня 2020 15:39  
Первая часть заданий
https://www.figma.com/file/LUgwagNiuNT8D0rIUioRM3/001?node-id=0%3A1
https://www.figma.com/file/29a4Yu6sLzI9pAJjZrcrVT/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Задание 1 из четвертого урока. Вы отрисовали главную страницу Google. Хорошая работа, логотип и другие элементы отрисованы в мельчайших деталях.

Задание 2 из четвертого урока. Иконки тоже хороши.

Задание 1 из пятого урока (этого). Сгруппировано хорошо.

Задание 2 из пятого урока. Ключевые цвета подобраны правильно. Непонятно почему вы использовали фотографии, впрочем это не столь важно. Засчитывается.

Задание 3 из пятого урока. Отрисовано, картинки заменены. Засчитывается.

В целом отлично, переходите к следующим урокам.

Анастасия · 23 ноября 2020 22:39  
Задание к пятому уроку
1.1 https://www.figma.com/file/n12dKY4eXUDv3877xT1RFk/lesson-5-tasl-1.1?node-id=0%3A1
1.2 https://www.figma.com/file/7DJySPSju0QGzOw26gLQ0x/lesson-5-task-1.2?node-id=0%3A1
2 https://www.figma.com/file/E4dIuEQkxaruugoClEwCn0/lesson-5-task-2?node-id=0%3A1
3 https://www.figma.com/file/aXwW4c6Ywva1Yk7mD5mvxD/lesson-5-task-3?node-id=2%3A0

Комментарий frusia.pro:

Задание 1. Все слои носят осмысленные названия, отлично.

Задание 2. Вы почему-то в 4 из 5 артбордов использовали фото вместо иллюстрации. Но цвета подобрали хорошо.

Задание 3. Вы молодец что нарисовали длинную страничку сайта. В целом все сделано очень хорошо. К сожалению вы не скинули пример, с которого вы перерисовывали сайт, поэтому я подмечу визуальные ошибки, которые есть в этом задании. Например: отсутствие контраста: темный фон/ темные иконки (смотрите скрин) http://prntscr.com/vt4od6

Айдана · 24 ноября 2020 08:52  
2 задача - https://www.figma.com/file/c758Ow2nxeTK8FVDeroxmX/Untitled?node-id=0%3A1
3 задача - https://www.figma.com/file/qONBMdHjh2UOoqiOY7qneF/Untitled?node-id=0%3A1
https://www.figma.com/file/ABmNPxNV3bTIEvc0DjG7aJ/Untitled?node-id=0%3A1
4 задание - https://www.figma.com/file/MBB8SdDgI6Gm0WnbORmLts/jjj

Комментарий frusia.pro:

Задание 2. Вы использовали фото, а нужно было найти иллюстрации. Вы скорее всего не разобрались с заданием, так как цвета подобраны неверно. Нужно выбирать ключевые цвета иллюстрации (то есть те, которые преобладают на ней), их не обязательно дожно быть 4. И самое важное при заливке круга нужно использовать пипетку, наводя на иллюстрацию и выбирая нужный цвет. Попробуйте повторно сделать задание.

Задание 3. К сожалению вы не прикрепили примеры сайтов, которые перерисовали в этом задании. По первой ссылке (Chobani) все сделано довольно хорошо. К второй ссылке (планер) есть вопрос: вы перерисовали этот дизайн с какого-то примера? Или нарисовали его самостоятельно?

Задание 4. В этом уроке задание 4 звучит совсем по-другому. Видимо вы что-то напутали и отправили иконки из предыдущего урока сюда.

Mila · 25 ноября 2020 23:16  
Привет!
1. https://www.figma.com/file/Tg3AHQQsdMW51VPyYzlRqF/Mila-Kovalchuk-Design-Agency?node-id=47%3A4
2. https://www.figma.com/file/Tg3AHQQsdMW51VPyYzlRqF/Mila-Kovalchuk-Design-Agency?node-id=82%3A0
3. https://www.figma.com/file/Tg3AHQQsdMW51VPyYzlRqF/Mila-Kovalchuk-Design-Agency?node-id=87%3A10
Очень жду фидбек!) Спасибо!

Комментарий frusia.pro:

Задание 1. Иконки нарисованы хорошо, есть небольшие огрехи, но учитывая, что вы новичок – все ок. Один из пунктов этого задания состоял в том, чтобы дать осмысленные названия иконкам. Тут к сожалению вы не справились, видимо немного недопоняли (смотрите скрин) https://prnt.sc/vtw6vc . Осмысленность заключается в том, чтобы дать название, которое соответствует содержанию иконки. Например: "check", "flower", "calendar".

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

Задание 3. Вы проделали большую работу, класс! К сожалению не кинули ссылку на оригинальный сайт или концепт сайта, но явных ошибок в дизайне я не увидела, поэтому все отлично! Обязательно продолжайте в том же духе!

Сергей · 11 февраля 2021 19:47  
Добрый вечер!
1) https://www.figma.com/file/JZ9TdtlmYpDehy8KzN1D7d/YouTube?node-id=0%3A1
2) https://www.figma.com/file/JZ9TdtlmYpDehy8KzN1D7d/YouTube?node-id=73%3A6
3) https://www.figma.com/file/JZ9TdtlmYpDehy8KzN1D7d/YouTube?node-id=81%3A0

Комментарий frusia.pro:

Привет. Открыла ссылки, которые вы прикрепили и увидела, что задание выполнено частично к этому (5-му уроку) и частично к 4-му уроку.

Задание 2 к уроку 5 (подбор цвета в иллюстрациях). Все супер! Вы отлично выделили ключевые цвета иллюстрации.

Задание 1 к уроку 4 (выбрать сайт и максимально приближенно отрисовать его). Нарисовали отлично, молодец!

Задание 2 к уроку 4 (нарисовать иконки по примеру). Очень аккуратно и правильно нарисовали иконки.

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

Serhio · 29 апреля 2021 23:54  
Последнее задание к данному уроку
https://www.figma.com/file/w8boeCvVWg1NRKLhUJC3h1/Untitled?node-id=0%3A1

Ссылка на оригинал
https://www.behance.net/gallery/97209083/Nike-Training-Club-website-redesign

Комментарий frusia.pro:

Задание выполнили отлично! Очень хорошо прорисовали все детали. Есть небольшое замечение: обратите внимание на выравнивание (центровку) кнопок.

Комментарий frusia.pro ошибка дизайна Serhio

Также обратите внимание на отступы, в примере из Behance они другие.

Комментарий frusia.pro ошибка дизайна Serhio-2

Подскажите, остальные задания вы тоже выполнили?

Александр · 10 мая 2021 16:32  
Добрый день! Проверьте пожалуйста:
Задание 2 - https://www.figma.com/file/rwVTCdR40nuv6bmN9NaotL/Untitled
Задание 3 - https://www.figma.com/file/oiKhUlob4n8wRY5wwXI7g8/Untitled?node-id=0%3A1 (Ссылка на источник там же)

Комментарий frusia.pro:

Задание 2 (определение цветовой схемы). Супер! Все 5 иллюстраций отвечают выбранным цветам.

Задание 3. Вы отлично справились! Могу засчитать вам сюда же и 5-е задание этого урока, так как вы нарисовали аж 4 страницы. Советую вам еще больше практиковаться в этом направлении, чтобы набить руку. Например отрисовать перерисовать еще один пример, но уже в более сложном стиле. Например с тенями, градиентами, иконками и т.д.