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