ДЗ1

ТЕМА 1. Знакомство. Горячие клавиши.
Создание набора иконок
FIGMA
Ищите домашнее задание в конце этого файла

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

веб-дизайна и UI/UX дизайна.
Если с веб-дизайном все понятно и знакомо, то с UI/UX дизайном нужно

познакомиться лучше.
UX - это User Experience (дословно: «опыт пользователя»). Основная цель здесь –

понять, какой опыт или впечатление получает пользователь от работы с вашим
интерфейсом. Удается ли ему достичь своей цели, и насколько просто или сложно это
сделать.
А UI - это User Interface (дословно «пользовательский интерфейс») - то, как выглядит

интерфейс и то, какие физические характеристики он имеет. Определяет, какого цвета
будет ваше «изделие», удобно ли будет человеку попадать пальцем в кнопочки,
читабельным ли будет текст и тому подобное.
UX/UI дизайн - это проектирование любых пользовательских интерфейсов в которых

удобство использования и внешний вид имеют одинаковую ценность.
ХФ КА «ШАГ»
https://itstep.kh.ua/ Страница 1
ТЕМА 1. Знакомство. Горячие клавиши. Создание набора иконок
Большинство новых программ для дизайна чаще всего являются копией

Photoshop или Illustrator. Figma пошёл по совершенно иному пути. Это не только
первый сервис для совместного редактирования графики, но простой в освоении и
функциональный дизайнерский инструмент.
В Figma есть возможность сразу выбрать шаблон экрана практически любого

гаджета. Так что о размерах думать не придётся. Более того, готовый дизайн,
например, для iPhone X можно автоматически адаптировать под размеры других
устройств.
Официальный сайт: https://www.figma.com/
Основные возможности и особенности:
1. Поддерживает возможность хранения файлов на собственном облаке, что

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

групповая работа над документами облегчает коммуникацию и ускоряет получение
результата. С помощью Figmа дизайнеры, проектные менеджеры и клиенты могут
одновременно комментировать, задавать вопросы и править макеты. Кроме того, вы
можете ограничить статус для каждого участника, например read-only, не переживая,
что кто-то нарушит гармонию в дизайне. Для совместной работы нужен только
интернет и браузер.
3. Все версии и изменения хранятся в Figma и вы можете в любой момент

«откатиться» до нужной.
4. Удобные инструменты:
 удобное соединение точек и работа с формами;

 создание эффектов занимает считанные секунды (например, тени);
 настройки сетки всегда находятся на главном экране;
 удобный инструмент pen tool;
 направляющие, которые упрощают работу дизайнера и т.д.
5. В Photoshop при редактировании файлов шрифты «слетают», если на

компьютере не установлены необходимые гарнитуры. Figma решила и эту проблему -
шрифты тянутся из Google Fonts или автоматически подгружаются в проект.
6. Многозадачность. Figma же позволяет работать с более чем десятью файлами,

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

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

информацию об объектах (например, CSS):
Функция «проигрывания» play button. С ее помощью дизайнеры могут

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

Клавиша (клавиши) Что происходит
Ctrl + колесо мыши масштабирование

Shift+R показать/спрятать направляющие (и линейку)
F новый фрейм
I пипетка (color picker)
C режим комментирования. Позволяет
комментирование от разных участников, если
над проектом занята команда.
R квадрат/прямоугольник
L линия
O элипс
P перо (pen)
Ctrl+G сгруппировать объекты
Ctrl+Shift+G разгруппировать объекты
Перетаскивание копирование объекта (если хотим, чтобы
объекта с зажатым Alt объект не съехал с траектории объекта-
родителя, то еще прибавляем к клавишам
Shift)
SHFT+H Горизонтальное отражение
SHFT+V Вертикальное отражение
CTRL+E Объединение
Ctrl+Shift+K поместить изображение
Ctrl+Z Отмена действия
Ctrl+Shift+? Раскладка клавиатурных сокращений
Практическое задание 1. Иконка Game Center для iPad

1. Заходим в приложение Figma. Создаем новый файл.
2. Подписывам наш файл «Набор иконок для iPad».
Первой будем создавать иконку для Game Center. Она

выглядит таким образом:
3. Начнем с создания основы для иконки. Будем

использовать для этого прямоугольник (через меню
или через клавишу R):
Создаем прямоугольник размером 500 на 500, белого цвета, с

закруглениями краев в 80 пунктов:
4. Применим «сглаживание» краев, характерное для иконок Apple:
5. В левой части экрана подпишем «слой» как «Основа иконки»:
6. В дальнейшем будем использовать этот объект, а не создавать его с

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

O):
8. Переходим к заливке окружности. Будем использовать линейный

градиент для заливки (направление градиента нужно расположить
так, как на изображении ниже):
- настроим первый цвет
- настроим второй цвет:
9. Подпишем этот слой «Шарик 1»:

10. Для дублирования шарика зажимаем ALT и тянем за первый шарик:
Подпишите новый шарик в левой части экрана «Шарик 2» и залейте

его линейным градиентом (цвет должны немного отличаться от
первой окружности, например, быть чуть ярче. Оттенки подберите
самостоятельно, но не забывайте, что второй цвет должен быть
полупрозрачным):
11. Создаем еще один дубликат («Шарик 3»). Измените его форму и
расположите таким образом:
12. Создаем последний дубликат («Шарик 4»), снижаем ему

непрозрачность до 20% и располагаем таким образом:
13. Выделяем все слои с шариками (с зажатым CTRL), нажимаем

CTRL+G и создаем таким образом группу «Синий шарик»:
14. Дублируем теперь уже группу, и меняем название на «Розовый

шарик». Уменьшаем этот шарик по размеру и ставим таким образом:
15. Все, что нам нужно – по очереди изменить оттенки в этой группе на
розовые, оттенки подберите самостоятельно:
16. Аналогичным образом получите еще две группы: «желтый шарик» и

«сиреневый шарик»:
17. Добавим последние штрихи:

- синий шар сделаем более прозрачным (т.е. непрозрачность снизим
до 70%):
- всем шарикам добавим внутреннюю тень:
18. Осталось только сохранить иконку:

Выделите все объекты и сгруппируйте их, после этого сохраняем через
команду Export в формате PNG для прозрачности слоя. Предварительно
можем просмотреть финальный результат через окошко Preview.
Есть еще один вариант, можем сохранить нашу иконку через фрейм,
который необходимо создать. Воспользуемся клавишей «F» и нарисуем
фрейм по величине нашей основы иконки (500*500), иконку поместим
внутрь фрейма. Для того чтобы иконка была на прозрачном фоне нужно
установить прозрачность фрейма на 0%:
Теперь достаточно кликнуть по названию фрейма и нажать Export в

правом нижнем углу программы. Все содержимое фрейма распознается
как единый объект.
Иконка готова!
Практическое задание 2. Иконка Подкасты для iPad
1. Продолжаем работать с файлом «Набор иконок для iPad». Копируем

основу иконки из прошлого задания и заливаем линейным
градиентом:
- первый цвет #FF30BD
- второй цвет #751C9E
2. Создаем окружность (через меню или через клавишу O), выбираем

ей опцию без заливки (FILL), но с контуром (STROKE):
3. Возвращаемся к контуру. Нам нужно сделать так, чтобы он был

полупрозрачным и частично невидимым.
Для этого мы делаем так: выбираем градиент между белым и

прозрачным и сдвигаем немного вверх начало градиента:
4. Переименовываем слой в «круг 1». Дублируем (через уже знакомый

нам способ с ALT) и меняем «круг 2» таким образом (контур меняем
до 30 пунктов):
18. Создадим теперь прямоугольник (через меню или через клавишу R) и

сразу перейдем к его редактированию (Edit Object):
19. Сместим центральную точку выше с левой стороны:
20. А теперь аккуратно потянем за точку влево. Аналогично сделаем с

другой стороны. В конце редактирования нужно сверху нажать на
кнопку DONE:
21. Подпишите слой «Основание» и придайте ему градиентную заливку:
22. Добавим последнюю деталь – белую окружность сверху:
23. Сгруппируйте все объекты иконки в папку. Сохраните иконку с

прозрачным фоном.
Практическое задание 3. Расположение иконок на мокапе iPad

1. Откройте изображение по ссылке. Для этого скопируйте ссылку в
адресную строку Фигмы и нажмите ввод:
https://www.figma.com/file/F83usUYmKYZemLraaRgQhS/iPad-Air-
Free-Mockups-Figma-Elements-Community?node-id=1%3A2
2. Далее скопируйте мокапы себе в черновики:
3. Изображение откроется в отдельной вкладке

4. Далее нужно выбрать любой мокап в левом меню и открыть
выпадающий список:
5. Вернитесь на вкладку с нашими иконками и сделайте из каждой

группы компонент:
6. Скопируйте компонент и вставьте на мокап iPad
7. Если захотите сохранить результат – выбирайте всю страницу при

экспорте, а потом только нужный вам элемент:
Дополнительное задание
1. Создайте еще одну иконку для iPad и добавьте ее на наш мокап.
Например, это может быть иконка для фотографий:
2. Создайте иконку программы Figma, используя подсказки

ниже:
1) Для создания верхней левой красной фигуры

используйте прямоугольник с двумя сглаженными краями:
2) Верхнюю правую фигуру можно получить через обычное

горизонтальное «отражение» (SHFT+H):
3) Нижняя зеленая фигура – это тоже прямоугольник, но сглажено

тут уже не два, а три края:
4) Есть еще один способ создания фигуры из первого пункта:

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

единой стилистике (не менее 4). Например, таких (но для более
высокого балла лучше самостоятельно придумать):
2. Попробуйте повторить иконку для iOs:
3. Все иконки расположите на экране устройства, как мы делали на

уроке.
4. Результат всей работы сохраните в одном документе

переименованном вашей фамилией и загрузите в майстат на
проверку (либо в формате fig (File - Save as fig)., либо в текстовый
файл загрузите ссылку на ваш проект с возможностью

редактирования).
Внимание! Если домашнее задание будет загружено в формате .jpeg

или .png, буду ставить единицу, не проверяя!

ДЗ1

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

ДЗ1

Загружено:

Авторское право:

Доступные форматы

ТЕМА 1. Знакомство. Горячие клавиши.

Создание набора иконок

Ищите домашнее задание в конце этого файла

Программа поддерживает множество функций, но в основном предназначена для

Если с веб-дизайном все понятно и знакомо, то с UI/UX дизайном нужно

UX - это User Experience (дословно: «опыт пользователя»). Основная цель здесь –

А UI - это User Interface (дословно «пользовательский интерфейс») - то, как выглядит

UX/UI дизайн - это проектирование любых пользовательских интерфейсов в которых

Большинство новых программ для дизайна чаще всего являются копией

В Figma есть возможность сразу выбрать шаблон экрана практически любого

Официальный сайт: https://www.figma.com/

Основные возможности и особенности:

1. Поддерживает возможность хранения файлов на собственном облаке, что

2. Поддерживает возможность совместного редактирования. Не секрет, что

3. Все версии и изменения хранятся в Figma и вы можете в любой момент

 удобное соединение точек и работа с формами;

5. В Photoshop при редактировании файлов шрифты «слетают», если на

6. Многозадачность. Figma же позволяет работать с более чем десятью файлами,

7. Прототипирование мобильных приложений. Лучше всего преимущества этого

Figma полезна и для разработчиков сайтов: прямо в программе можно посмотреть

Функция «проигрывания» play button. С ее помощью дизайнеры могут

Некоторые горячие клавиши

Ctrl + колесо мыши масштабирование

Практическое задание 1. Иконка Game Center для iPad

2. Подписывам наш файл «Набор иконок для iPad».

Первой будем создавать иконку для Game Center. Она

3. Начнем с создания основы для иконки. Будем

Создаем прямоугольник размером 500 на 500, белого цвета, с

4. Применим «сглаживание» краев, характерное для иконок Apple:

5. В левой части экрана подпишем «слой» как «Основа иконки»:

6. В дальнейшем будем использовать этот объект, а не создавать его с

7. Переходим к созданию окружностей (через меню или через клавишу

8. Переходим к заливке окружности. Будем использовать линейный

- настроим второй цвет:

9. Подпишем этот слой «Шарик 1»:

Подпишите новый шарик в левой части экрана «Шарик 2» и залейте

12. Создаем последний дубликат («Шарик 4»), снижаем ему

13. Выделяем все слои с шариками (с зажатым CTRL), нажимаем

14. Дублируем теперь уже группу, и меняем название на «Розовый

16. Аналогичным образом получите еще две группы: «желтый шарик» и

17. Добавим последние штрихи:

- всем шарикам добавим внутреннюю тень:

18. Осталось только сохранить иконку:

Теперь достаточно кликнуть по названию фрейма и нажать Export в

Практическое задание 2. Иконка Подкасты для iPad

1. Продолжаем работать с файлом «Набор иконок для iPad». Копируем

- второй цвет #751C9E

2. Создаем окружность (через меню или через клавишу O), выбираем

3. Возвращаемся к контуру. Нам нужно сделать так, чтобы он был

Для этого мы делаем так: выбираем градиент между белым и

4. Переименовываем слой в «круг 1». Дублируем (через уже знакомый

18. Создадим теперь прямоугольник (через меню или через клавишу R) и

19. Сместим центральную точку выше с левой стороны:

20. А теперь аккуратно потянем за точку влево. Аналогично сделаем с

21. Подпишите слой «Основание» и придайте ему градиентную заливку:

22. Добавим последнюю деталь – белую окружность сверху:

23. Сгруппируйте все объекты иконки в папку. Сохраните иконку с

Практическое задание 3. Расположение иконок на мокапе iPad

3. Изображение откроется в отдельной вкладке

5. Вернитесь на вкладку с нашими иконками и сделайте из каждой

6. Скопируйте компонент и вставьте на мокап iPad

7. Если захотите сохранить результат – выбирайте всю страницу при

2. Создайте иконку программы Figma, используя подсказки

1) Для создания верхней левой красной фигуры