Фигма

1.

Онлайн – сервис
Figma
РАЗРАБОТКА ДИЗАЙН - МАКЕТА

2.

Назначение:
-
кросс – платформенный онлайн сервис для дизайнеров
интерфейсов и веб – разработчиков.
-
доступ осуществляется из окна браузера. Созданные файлы
хранятся в облаке. Изменения сохраняются автоматически.
Для работы в сервисе необходимо пройти регистрацию на
официальном сайте - https://www.figma.com.

3.

Интерфейс программы:
После регистрации доступны – графический редактор и менеджер файлов.
Search –
поиск файлов;
Recent –
сохраненные
файлы;
Community –
расширения;
Drafts –
создание файла.

4.

Основы работы
(после открытия нового файла)

5.

Пункты меню (File)

6.

Пункты меню (Edit)
-
позволяет работать с элементами дизайна в файле. Чтобы применить к
элементу действие, его выделяют.

7.

Пункты меню (View)
отвечает за масштабирование макета и навигацию по нему;
здесь находятся линейки (Rules) для вытягивания направляющих;

8.

Инструменты
Фрейм или атрборд – основной элемент дизайна в Figma. Это законченный
документ, который может быть страницей сайта или экраном мобильного
приложения.

9.

Модульная сетка (Layout Grid)
помогает упорядочить элементы дизайна во фрейме.
для настройки сетки в блоке Layout Grid нажмите «+».

10.

Векторные формы (Shape Tool)
Основные векторные объекты – прямоугольник, линия,
треугольник, стрелка, круг, звезда.
Основные настройки:
закруглить углы у прямоугольника можно в пункте Corner Radius
толщина линии меняется в пункте Stroke, а заливка в пункте Fill,
нажав на «глаз».
в разделе Effects можно добавить тень или размытие объекту.
для сохранения получившегося рисунка (иконки) необходимо
перейти в раздел Export и выбирается формат SVG.

11.

Изображения
Добавить изображения в макет можно через панель File,
инструмент Place Image или просто перетаскиванием их с
рабочего стола.
Изображение вставляется не как отдельный объект, а просто
заливает изображением фрейм – прямоугольник.
Можно регулировать яркость изображения, контраст,
насыщенность.

12.

Текст
По умолчанию доступна библиотека шрифтов Google Fonts.
Инструменты для работы с текстовым слоем стандартные:
начертание, размер, выравнивание, высота строки, отступ,
красная строка.
Лучше создавать отдельно текстовые блоки для заголовков и
основного текста. Так удобнее редактировать.

13.

Задание: создаем макет сайта –
портфолио для любого
устройства.
1.
Дизайн макета должен иметь логическую структуру
2.
Макет должен содержать: не менее 4-х логических блока
(«Фото, фамилия, имя», «Мои достижения», «Любимые
предметы», «Мои интересы», «Контакты» и т.д.)
3.
Визуально макет должен выглядеть аккуратно
4.
Блоки должны быть выставлены по сетке

14.

Пример реализации макета: