Продолжаем знакомство с основами 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. Фреймы. Сетки. Направляющие. Знакомство с компонентами

Основы Figma. Часть 4. Выравнивание. Новые примитивы. Экспорт. Графические форматы файлов


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



Комментарии

Мария · 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 страницы. Советую вам еще больше практиковаться в этом направлении, чтобы набить руку. Например отрисовать перерисовать еще один пример, но уже в более сложном стиле. Например с тенями, градиентами, иконками и т.д.

Настя · 9 июля 2021 18:55  
Доброго времени суток))
Спасибо за уроки :)
Домашние задания:
1. https://www.figma.com/file/FM0JC1ZJzMqjnQOhUxTs1N/%D0%97%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-No2?node-id=0%3A1

2. https://www.figma.com/file/YI9g9ugbrEpETMZsnoyuGh/Untitled?node-id=0%3A1

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

Добрый вечер! Извините за долгое ожидание :)

Задание 2 (определение цветовой схемы). Вы отлично подобрали основные цвета, все правильно.

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

Нина · 14 августа 2021 02:34  
Для задания 3 был выбран этот дизайн сайта
https://www.behance.net/gallery/124650477/Grien-Cooking-App-Case-Study?tracking_source=search_projects_recommended%7CUI%20web%20app
вот ссылка на получившуюся работу
https://www.figma.com/file/FdJvXlgwmQbx70majwmCi5/Untitled?node-id=0%3A1

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

Задание 3. Вам удалось повторить дизайн из Behance, хорошо. Но хотелось чтобы вы попробовали нарисовать больше, чем первые два экрана. Также вопрос, почему вы отправили только одно задание из этого урока?

Нина · 17 августа 2021 02:50  
Здравствуйте, тут дополнение дз
https://www.figma.com/file/FdJvXlgwmQbx70majwmCi5/Untitled?node-id=0%3A1

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

Задание 2. Отлично подобрали ключевые цвета для иллюстраций, молодец!

Задание 3. Рада, что вы вернулись к третьему заданию и дорисовали еще несколько блоков. Все получилось, единственный совет: сравнила иконки с сайтом референсом и увидела разницу в стиле. А именно, вы добавили тени http://joxi.ru/vAW8j7WtBajO7r и немного не попали в общий плоский стиль. Сейчас мы просто изучаем Figma и пока не затрагиваем основы дизайна, но хотелось чтобы вы уже обращали на такие вещи внимание.

Полина · 21 сентября 2021 22:22  
Добрый вечер!
Спасибо за ваш труд и что проверяете домашнюю работу.

Выполненные домашки:
1. https://www.figma.com/file/R10535bzgjRI2axH7ved67/DODO?node-id=0%3A1
2. https://www.figma.com/file/Nv3a3sZDDm5xqJnD0QJYxk/Illustrations?node-id=0%3A1
3. https://www.figma.com/file/SsLiQfjZ6xgIBNTfZBKWR4/Gewerly?node-id=0%3A1
4. https://www.figma.com/file/O4g8QtVfwuKolwLHdQY0Jr/Waves?node-id=0%3A1

Заранее благодарю!)

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

Задание 1. Хорошо поработали со слоями и компонентами, молодец!

Задание 2. Классный выбор иллюстраций, все цвета подобраны правильно.

Задание 3. Очень хорошо! Вам удалось полностью возсоздать макет из Behance.

Задание 4. Тоже отлично. Я заметила вы берете такие легкие минималистичные дизайны. Попробуйте в следующий раз ради практики взять что-то чуть потяжелее: например макеты, где используют тени или те, где очень много мелких деталей (админ панели).