ОНЛАЙН-ИНТЕНСИВ ПО ВЕБ-ДИЗАЙНУ
Домашнее задание
Установка Figma
и отрисовка прототипа
Влад Федорин
Креативный директор MDA
Куратор курса:
Профессия: Веб-дизайнер
Сегодня вы:
Установите Figma
Создадите собственный и шаблонный фрейм
Научитесь строить модульную сетку
Установка Figma
1. Зайдите на сайт figma.com
2. Нажмите кнопку «Sign up»
3. Введите вашу почту в поле Email, придумайте пароль и введите его в поле Password, нажмите кнопку «Create account» и заполните оставшиеся поля.
4. На открывшемся сайте откройте меню (в левом верхнем углу) и нажмите «Get Desktop App».
5. Установите программу
Создание фрейма
1. В пункте меню выберите инструмент Frame.
2. В правой панели вы увидите шаблоны для разных типов экранов и печатной продукции.
3. Вы можете изменить размеры фрейма, потянув за его стороны либо углы.
3. Выберите необходимый шаблон, кликнув на него мышью.
1. В пункте меню выберите иснтрумент Frame, после чего курсор приобретет вид плюса.
2. Нарисуйте фрейм любого размера, зажав левую клавишу мыши.
Создание фрейма собственного размера
4. Также, размеры фрейма можно указать в численных значениях Width и Height в правой панели редактора.
Создание модульной сетки
1. Выделите фрейм, кликнув на него.
2. В правой части меню выберите пункт Layout Grid, после чего на макет добавится сетка в клетку, размер которой можно изменять.
4. Вы можете добавить несколько сеток на свой фрейм, нажав на плюс справа в пункте Layout Grid.
3. В выпадающем меню Grid выберите пункт Columns, после чего на фрейм добавится колоночная сетка. Здесь можно настроить количество колонн (Count),
расстояние от края фрейма (Margin), расстояние между колоннами (Gutter), центрирование сетки (Stretch), ширину колонн (Width) и цвет направляющих (Color).
Создание шаблонного фрейма
Создадите прототип сайта
Соберете первый экран сайта в Figma
Специальное предложение!
Скидка на курс «Профессия: Веб-дизайнер»
-30%
Создание прототипа
1. Создайте фрейм размером 1400х800 пикселей.
2. В пункте меню выберите инструмент текст. Курсором в виде плюса нажмите на фрейм и введите Логотип.
5. С зажатой клавишей Alt/Option скопируйте слово логотип и напишите цену.
3. В пункте меню выберите инструмент Rectangle и нарисуйте условный пункт меню. С зажатой клавишей Alt/Option скопируйте прямоугольник простым перетаскиванием и создайте условные пункты меню.
4. То же самое повторите с нижним блоком, после чего в пункте меню выберите инструмент Ellipse и с зажатой клавишей Shift нарисуйте условный круг выбора цвета. Скопируйте еще два круга.
6. В пункте меню выберите инструмент Rectangle и нарисуйте прямоугольник. Поверх этого прямоугольника с зажатой клавишей Alt/Option скопируйте текст и напишите слово кнопка.
7. В пункте меню выберите инструмент Rectangle и нарисуйте условный прямоугольник, в котором будет картинка.
Создание первого экрана
1. Создайте фрейм размером 1400х800 пикселей.
2. В правой части меню в пункте Layout Grid выберите колонны (Columns), и задайте им следующие параметры: Count = 12, Margin = 80, выберите любой цвет.
8. Нарисуйте прямоугольник с размерами 700х800 пикселей и в параметре Fill выберите пипетку, после чего выберите необходимый цвет.
9. Поместите прямоугольник ниже всех на панели слоев, а также в правый угол на фрейме.
3. Из вашей папки перетащите в окно фигмы картинку с логотипом, выставив ее по левому краю сетки.
4. Далее, с помощью инструмента текст, создайте пункты меню.
5. Выделив все пункты меню, задайте им следующие настройки:
начертание = Regular, размер пунктов = 16.
6. В правом верхнем углу в панели меню выравниваем элементы относительно
друг друга.
7. В параметре More Options выберите пункт Tidy up, после чего в окне расстояний укажите число 80 (80 пикселей).
10. С зажатой клавишей Alt/Option скопируйте текст из пункта меню и напишите заголовок "Race max logic pro", задав ему необходимые параметры.
11. То же самое, проделайте с текстом "Артикул: 000000001"
12. В пункте меню выберите инструмент Ellipse и с зажатой клавишей Shift нарисуйте круг, после чего скопируйте еще два. Для первого круга в параметре Fill выберите белый цвет, а также добавьте параметр Stroke (обводка) шириной 2 пикселя черного цвета. Добавьте цвет для остальных кругов.
13. Выровниваем по левому краю.
14. С помощью инструмента Rectangle нарисуйте прямоугольник размером 400х84 пикселя и покрасьте его в черный цвет.
15. Скопируйте текст и напишите "Добавить в корзину", выбрав для него белый цвет. Поместите текст на панели слоев выше слоя с прямоугольником. Выравниваем по правому краю.
16. Скопируйте текст и напишите "12 933", после чего задайте ему необходимые параметры. То же самое, проделайте для слова "Рублей".
17. Выравниваем по сетке.
18. Из вашей папки перетащите в окно фигмы картинку с кроссовком, с зажатой клавишей Shift, вы можете поменять ее размеры, потянув за ее углы.
19. Поместите картинку по центру.
20. В пункте меню выберите инструмент Ellipse и нарисуйте овал, в параметре Fill придайте ему более серый оттенок.
21. Далее в параметре Effects выберите эффект Layer Blur со значением 50, после чего в параметре Fill в окне с процентами задайте прозрачность заливке на 49%.
22. Установите слой с тенью на панели слоев ниже слоя с кроссовком.
23. Скопируйте текст и напишите слово "krossovki". Задайте ему следующие настройки: шрифт = 200 пунктов, межбуквенное расстояние = 19,5%, буквы заглавные, цвет серый.
24. Скопируйте этот текст и напишите слово "povsednevnie".
25. Расположите текст на панели слоев под слоями с картинкой кроссовка и его тенью
Специальное предложение!
Скидка на курс
«Профессия: Веб-дизайнер»
-30%
Москва, Лубянский
проезд, 19 стр. 1, «Лаба»
Санкт-Петербург,
ул. Чайковского 79
Moscow Digital Academy, 2020
ОГРНИП 317774600530629 / 560913953887