Explore

Русский вариант заданий

Файлы и картинки из заданий:

https://www.dropbox.com/sh/4ntx2l9isaqzajg/AAAIrFE-hfXoEj7oiWiPLbiya?dl=0⁠

⁠

Сравнивайте тексты с

официальным курсом⁠

на английском, особенно задания 7 и 8, они более адаптированы для работы вне команды. Материалы также во многом могли устареть, так как фигма развивается, а эти тексты были написаны примерно в 2020.

Всем удачи!

Задание 1: Основные функции инструмента

В этом задании мы ознакомимся с основами работы в Figma и базовыми компонентами интерфейсов.

⚒️ Для подготовки к заданию:

Зарегистрируйстесь в Figma

https://www.figma.com/⁠

⁠

Скачайте инструкцию по работе с редактором (

книга «Руководство по Figma»⁠

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

Скачайте мастер-файл (

из task01.zip⁠

) с нужными вам размерами и архив с иконками.

————————————————————————————————————————————

🔥 Задание: перерисуйте главную страницу google.com.

🗺 Советы по воплощению:

Используйте мастер-файл master_file.pdf с указанными размерами элементов, отступов, шрифтов! Используйте иконки и другие элементы в прикрепленном файле source.zip.

Разберитесь, как работает панель инструментов, как меняются свойства объектов, как ими манипулировать в вашей рабочей области, как импортировать и экспортировать объекты, как именовать слои.

Проверьте результат, посмотрите, похож ли он на оригинал, если видите неточности — смотрите внимательно видео и повторите процесс.

Результат работы экспортируйте в изображение в формате PNG размером 1920x1080. Назовите ваш файл surname_name_task01.png

🤹‍♀️ Полезные ссылки

Пример перерисовки google.com в разных редакторах. Рекомендуем обязательно посмотреть Figma и Sketch.

Figma

https://youtu.be/jO1oRmGBzlQ⁠

⁠

Sketch

https://youtu.be/l-hFBfBcQV0⁠

⁠

Измерялки размеров и инспектор для браузеров

⁠

https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en-US⁠

⁠

Где искать иконки:

⁠

https://www.flaticon.com⁠

⁠

https://material.io/tools/icons/?style=baseline⁠

⁠

Где найти фотографии

⁠

https://unsplash.com⁠

⁠

Шрифты

⁠

https://fonts.google.com⁠

⁠

Задание 2: Работа с формой и цветом

⚽️ Разминка:

Чтобы немного освежить свои навыки работы с инструментом, попробуйте повторить

следующую страничку⁠

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

—————————————————————————

⚡️ Основное задание:

Необходимо в точности изобразить макеты карт (рубашка, король и дама)

представленных в примере⁠

, а также, если получится, нарисовать и своего валета бубей.

—————————————————————————

🗺 Предполагаемый алгоритм действий:

Декомпозируйте. От простого перерисовывания пиксель за пикселем толку будет мало. Вместо этого давайте врубать думалку и раскладывать работу на составляющие, находя систему. Задавайтесь вопросами: по какому принципу расположены элементы? есть-ли между ними что-то общее? какие правила лежат в основе данной работы? Разложите её на атомы, так вам будет проще принимать решения. Также, возможно будет проще работать сперва с отдельными частями целого… а может и нет. Решайте сами.

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

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

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

Полируя решение, обратите внимание на тени и градиенты (если они есть), чтобы ничего не упустить.

—————————————————————————

📕 На почитать и посмотреть: Смотрите прикреплённые ссылки и конечно ваш учебник по Figma! Удачи вам!

⁠

Color theory for designers — a crash course (with infographic)⁠

⁠

Цвет | Основы дизайна⁠

. Nancy Pong (видео, 6 мин)

⁠

Модульные сетки в работе UX-дизайнера. Инструкция по применению⁠

⁠

Поясни за композицию⁠

⁠

Задание 3: Типографика

⚽️ Разминка:

Ну что, разомнём глазные мышцы? Как всегда, простенькое задание на развитие глазомера. Постарайтесь без использования линейки повторить

макет журнального разворота⁠

из приложения «Warm up». Для облегчения задачи можете подсмотреть сетку в приложении «

Warm up — Cheat⁠

».

—————————————————————————

⚡️ Основное задание:

Всё просто — нужно всего-лишь повторить

макет инвойса «02_Main_dish»⁠

, используя по-максимуму возможножности работы с типографикой в Figmа.

—————————————————————————

🗺 Предполагаемый алгоритм действий:

Декомпозируйте. И снова «Разделяй и властвуй». Анализируйте. Посидите и посмотрите на макет минут пять. Разделите его на смысловые блоки, прикиньте их пропорции относительно основного формата (А4).

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

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

Проверяйте за собой: кегль, начертание, отступы и выравнивания — всё имеет значения. Я всё проверю! 👀

—————————————————————————

📕 На почитать и посмотреть:

⁠

Яндекс.Рефераты⁠

для рыбного текста

рактический взгляд на базовые термины и анатомию шрифтов⁠

⁠

Fontology⁠

(4 ступени к познанию)

⁠

Kerntype⁠

(проверить свои глаза)

Задание 4: Работа со слоями, масками и группами

⚽️ Разминка:

Свистит свисток! Раз. Два. Три. Четыре. Ноги выше, руки шире. Сегодня у нас будет ну очень простое

задание на повторение⁠

, однако при его выполнении, стоит всё-таки включить голову. Посмотрите на то, какой структурой облагает работа, а потом смотрите на сетку и выравнивание. Формат, кстати, А4.

—————————————————————————

⚡️ Основное задание:

Догадались уже? И снова повторяем… Когда уже начнём придумывать что-то своё? Терпение, скоро. Пока открывайте «

04_Main_dish⁠

» и приступайте к работе. Но! Сперва прочитайте инструкции.

—————————————————————————

🗺 Предполагаемый алгоритм действий:

В этот раз отдельный котёл будет для тех, кто не организует свои макеты. Потому делайте это путём группировки, предавания слоям осмысленных имён, использования масок и т.д.

Точь в точь повторять не нужно, размеры холста давайте возьмём 1440, 12-колоночную сетку с отступами между колонками в 24 пикселя и размером контентной области в 1180 (помните, что слева и справа отступы будут занимать оставшееся пространство).

Далее, всё по привычному сценарию: декомпозируем, строим сетку, набрасываем области и работаем в них.

Отдельного комментария заслуживает правило: если видишь ошибку — исправь, не ленитесь.

—————————————————————————

📕 На почитать и посмотреть:

⁠

Organising Chaos in Design 01: Project Types⁠

⁠

A Comprehensive Guide to Executing The Perfect Design-to-Development Handoff⁠

⁠

Rename для переименования слоёв⁠

⁠

Задание 5: Auto Layout and Grid

⚽️ Разминка:

По-порядку рассчитайсь! Продолжаем нашу традицию разминаться перед основным блюдом. И сегодня на апперитивчик у нас… Шведский стол — выбирай, что хочешь. Поупражняемся в кривых и иллюстрации. У нас тут как раз два варианта, выбирайте ИЛИ

драйвовый ананас⁠

ИЛИ

чумовой коповоз⁠

. И вперёд, покорять кривые Безье. Hint: можете использовать не только перо, но и булевые операции над простыми формами, а контур делается контуром.

—————————————————————————

⚡️ Основное задание:

С пылу с жару.

Ещё один простенький пример⁠

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

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

—————————————————————————

🗺 Предполагаемый алгоритм действий: Взять и сделать (см. предыдущие задания). Советы:

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

Какие-то элементы лучше не масштабировать, а оставлять, как есть,

Группируйте и организовывайте макет по ходу работы, иначе закопаетесь потом, настраивайте Constrains внутри групп,

Для генерации фоток, контента и организации макета можете попробовать использовать плагины, но не слишком на них полагайтесь.

📕 На почитать и посмотреть:

⁠

Apply Constraints to define how layers resize⁠

⁠

Explore the auto layout playground file in the Figma Community⁠

⁠

Create interactive components with variants⁠

⁠

Explore the playground file⁠

⁠

Задание 6: Работа с библиотеками

⚽️ Разминка:

Ух, застоялись вы немного, как я погляжу. Нужно бы размяться, тем более, что основное задание будет по-лайту. Да и вообще, давайте будем сегодня по-лайту, вы только голову главное включайте. Извольте проследовать к «

Warm up⁠

».

—————————————————————————

⚡️ Основное задание:

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

⁠

https://www.figma.com/community/file/857042825430121164⁠

⁠

https://www.figma.com/community/file/843042473942860131⁠

⁠

https://www.figma.com/community/file/804796050073033590⁠

⁠

https://www.figma.com/community/file/850673348101741100⁠

⁠

и воссоздаёте на этой библиотеке пару страниц одного сайта. Надеюсь, вы любите покупать, ибо пересобирать будем LaModa (страницы категории и продукта).

⚠️ Вам нужно не библиотеку переделать под LaModa, а взять LaModa как то, что нужно перерисовать и воплотить при помощи библиотеки.

—————————————————————————

🗺 Предполагаемый алгоритм действий:

Сперва изучаем прилагаемую литературу, узнаём, что вообще такое, эти библиотеки и какой с них прок,

Открываем предлагаемые библиотеки и дублируем понравившуюся, изучаем, что там есть, и работаем прямо в файле с библиотекой, но на отдельной странице!

Внимательно смотрим на LaModa, предлагаемые страницы категории и товара и сравниваем с библиотекой — что можно для чего приспособить,

Если компонента не нашлось то уж придётся рисовать самим, контрибьютать в либу, так сказать.

—————————————————————————

📕 На почитать и посмотреть:

смотрите ваш

учебник по Figma⁠

(раздел про компоненты),

⁠

Atomic design⁠

⁠

Лучшие практики создания дизайн-систем в Figma⁠

⁠

Задание 7: Командная работа, анализ и синтез

⚽️ Разминка:

Ну что, ребята, последнее задание и можно будет немного выдохнуть… прежде, чем погружаться вновь. И на этот раз, в качестве разминки, вам нужно будет восстановить всё, что ваш ментор напорушил в прошлом задании (добро пожаловать в командную работу на Figma).

—————————————————————————

⚡️ Основное задание:

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

—————————————————————————

🗺 Предполагаемый алгоритм действий:

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

— Каждую из них расщепите на атомы и выберите то, что будете использовать,

— Поднимите руку тренеру в лицо, чтобы он проверил ваш выбор, посоветовал, одобрил, дал финальное наставление, перекрестил и отправил по пути созидателя,

— Пересмотрите прошлые ваши работы, чтобы зацепить методики и оттуда и дерзайте создавать что-то новое.

—————————————————————————

🤹‍♀️ Неугомонным: Почитайте хоть то что ниже…

—————————————————————————

📕 На почитать и посмотреть:

все ваши предыдущие уроки,

«Кради, как художник». Остин Клеон,

«Покажи свою работу». Остин Клеон

⁠

Задание 8: Прототипирование

⚽️ Разминка:

Да вы и так размяты донельзя! Но хорошо, встаньте с колен, я приготовил вам кое-что для ваших дизайнерских мышц. Как всегда,

повторяшка⁠

—————————————————————————

⚡️ Основное задание:

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

—————————————————————————

🗺 Предполагаемый алгоритм действий:

Сдуйте пыль с вашего учебника по Figma и рассмотрите главу о прототипировании,

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

Начинайте. Думаю компоненты помогут вам в соблюдении вашей макетной гигиены.

Кстати, возможно, вам будет интересно окунуться в мир плагинов Figma, может там есть что-то, что сможет вам помочь.

—————————————————————————

📕 На почитать и посмотреть:

⁠

Iconutopia⁠

: Если интересно про иконки, у них даже учебник есть,

Учебник по Figma, глава о создании интерактивности,

⁠

Ресёрчили, ресёрчили, да не выресёрчили⁠

…,

⁠