Читать

Знакомство с Figma

15.11.2020 / Уроки

В одном из прошлых уроков по Фотошопу я обещал познакомить с инструментом Figma, созданном для работы в веб-дизайне. Одним из главных преимуществ этой программы является то, что готовый результат автоматически переводится в код, используемый в дальнейшем при вёрстке.


Урок Знакомство с Figma
Изображение кликабельно


Главный экран содержит превью имеющихся рабочих файлов. Так как мы только знакомимся с программой, то сразу переходим в пространство нового рабочего файла. Создаётся он кликом на символ «Плюс». Чтобы переименовать файл, достаточно кликнуть на текущее название и ввести новое.


Урок Знакомство с Figma
Изображение кликабельно


В этом пространстве есть четыре основные области: слева — перечень слоёв, сверху — панель рисования, справа панель настроек, в центре — непосредственное рабочее поле. Разберём каждую область чуть подробнее.


Слои

Слева мы видим панель, в которой отображаются слои. Здесь они устроены почти также, как в Фотошопе. Главным отличием является то, что в Фигме в одной панели отображаются все макеты, созданные в одном рабочем пространстве. Для обособления макетов используется определённый тип группировки слоёв — Frame, который выбирается в правой панели. Название этого «фрейма» также будет использоваться при экспорте макета в jpp, png или svg-файл. И всё, что создаётся внутри этого «фрейма», будет ограничиваться его шириной и высотой.


Урок Знакомство с Figma
Изображение кликабельно


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


Панель рисования

Фигма, прежде всего, заточена под работу с текстом и векторной графикой, поэтому имеет ряд инструментов для рисования и уступает Фотошопу в вопросах обработки фотографий.


Урок Знакомство с Figma
Изображение кликабельно


Помимо выпадающего меню с операциями (1) в верхней панели имеется набор инструментов для рисования и работы с объектами:

(2) Инструмент перемещения и трансформации (уменьшение/увеличение)

(3) Инструмент создания вышеупомянутых «фреймов»

(4) Инструмент рисования фигур: прямоугольник, линия, стрелка, эллипс, полигон, звезда и вставка изображения

(5) Перо для рисования неправильных фигур и добавления в контур новых точек

(6) Добавление и редактирование текста

(7) Инструмент для перемещения по рабочей области

(8) Добавление комментариев — полезный инструмент при работе нескольких человек над одним проектом


Панель настроек

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


Урок Знакомство с Figma
Изображение кликабельно


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

(2) Привязка к сетке, благодаря которой, определённые элементы будут оставаться на месте или перемещаться в нужное при увеличении/уменьшении макета

(3) Режим наложения слоя (как и в Фотошопе, здесь есть такие режимы, как «Умножение», «Перекрытие» и другие)

(4) Настройки текста, включающие такие параметры, как выравнивание, межстрочный интервал и прочие

(5) Заливка цветом (однородным или другими доступными способами)

(6) Обводку можно добавить как линейную, так и штрихованную

(7) Также можно добавить эффекты вроде тени, свечения и т.д.

(8) Чтобы сохранить макет в целом или отдельную графику, необходимо выбрать расширение для экспорта (jpg, png или svg)


Рабочее пространство

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


В следующих уроках будем уже творить что-то определённое, и на этих вот примерах изучать инструменты более детально. Продолжение следует...







Комментарии (0)

avatar


НЕКОТОРЫЕ АРХИВНЫЕ ПУБЛИКАЦИИ

Ушёл из жизни актёр, известный ролями в таких фильмах, как «Крепкий орешек», «Робин Гуд», «Парфюмер», «Гарри Поттер»... В последнем - он блистал в образе несравненного Северуса Снейпа.


17.01.2016 / Кино

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


13.02.2016 / Уроки

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


29.04.2016 / Кино

На просторах сети есть не мало сайтов в помощь художникам, иллюстраторам, веб-дизайнерам. К примеру, одним из крупнейших таких проектов является demiart.ru


06.06.2015 / Веб-дизайн



ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ