Уроки по дизайну в Figma (часть 1)




В данном цикле статей мы расскажем, как начать работать с Figma так, чтобы использовать ее правильно и получить от нее максимум удобства и производительности. 

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

Наше задание: сделать дизайн главной страницы и страницы контактов с формой обратной связи. В этой части мы организуем наш проект, чтобы в дальнейшем с ним было просто работать. 

Итак, погнали. Скачиваем, устанавливаем, открываем Фигма, создаем новый проект:

 

Пустой проект Figma
Пустой проект Figma

Сразу переименуем проект, кликнув по «Untitled» в верхней части экрана:

Название проекта в Фигме
Название проекта в Фигме

Далее мы сразу решаем, что у нас будут отдельные страницы проекта для его отдельных частей: для UI-кита, главной страницы и формы. 

Зачем использовать разные страницы
Почему: во-первых, мы будем использовать компоненты. Это значит, что стиль однотипных элементов мы будем менять в одном месте, и логично сохранить все компоненты на одной странице. Во-вторых, нагромождение макетов на одной странице плохо читаются и, кроме того, могут приводить к тормозам. 
Что такое UI-кит вкратце
UI-кит — это набор отдельных элементов интерфейса. Хороший интерфейс обладает единообразием, поэтому вариант, что мы будем на каждой странице рисовать свой дизайн для каждой кнопки, сразу отметаем как недостойный. UI-кит в современных проектах — это необходимый фундамент для разработки крупных интерфейсов с сохранением логики и единообразия. 

Чтобы создать страницы, вверху слева нажмите на Pages и значок + (плюс). 

Новая страница в Фигме
Новая страница

Делаем три страницы и переименовываем их в UI, Home, Contacts. Название, очевидно, ни на что, кроме нашего удобства, не влияет. 

Страницы с названиями
Страницы с названиями

Далее переходим во вкладку «UI» и создаем новый фрейм (кнопка F или иконка на верхней панели).

Пустой фрейм
Пустой фрейм

Нас особо не интересуют размеры этого фрейма, так как на нем будут располагаться отдельные элементы, не образующие какую-то страницу. Я задал размеры 800 по ширине и 1000 по высоте. 

Размеры фрейма
Размеры фрейма

Назовем этот фрейм Elements — в этом фрейма мы будем размещать наши элементы управления. 

Название фрейма
Название фрейма

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

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

Итак, мы находимся на странице UI, на фрейме Elements. Выбираем инструмент «Прямоугольник» (R) и создаем прямоугольник произвольных размеров на нашем фрейме:

Создание прямоугольного вектора
Создание прямоугольного вектора

Переименовываем его в древе слоев в «Фон кнопки»: 

Название вектора
Название вектора

Теперь мы выделим его и отредактируем его параметры: установим ширину 150, высоту 50 и зальем ее градиентом: 

Высота и ширина
Высота и ширина

Высота — это параметр H, ширина — W. В палитре выбора цвета переключите сверху с Solid (сплошной цвет) на Linear (линейный градиент):

Градиент вектора
Градиент вектора

В палитре отредактируем цвета и установим прозрачность 100 процентов для каждого из них — за это отвечает ползунок рядом с пипеткой. На самом элементе сдвинем точки привязки, чтобы градиент был под углом.

Направление градиента
Направление градиента

Чтобы наша кнопка была более материальной, повесим на нее тень: выделим кнопку и нажмем в параметрах справа + в области Effects:

Добавление тени
Добавление тени

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

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

Параметры тени
Параметры тени

Фон готов, добавляем текст кнопки: выбираем инструмент «Текст» и выделяем область по площади всей кнопки: это нужно для того, чтобы нам было легко расположить текст по центру фона. Вводим текст: 

Добавление текста
Добавление текста

И выставляем параметры текста справа как на скриншоте: выравнивание по центру по высоте и по ширине. 

Параметры текста
Параметры текста

Далее в древе слоев выделяем наш фон и текстовый слой и группируем их (control + g).

Отдельные элементы
Отдельные элементы

 

Группа
Группа

Переименовываем группу в «Обычная кнопка». 

Название группы
Название группы

На этом этапе мы создали элемент, и теперь нам надо сделать из него компонент. Выделяем группу и жмем сочетание Command + Option + K или Control + alt + K, либо выбираем пункт из выпадающего меню:

Создание компонента
Создание компонента

Готово, вы создали компонент!

Чтобы понять, что мы наделали, переходим в другую страницу проекта, переключаем сверху слева окно навигатора на Assets и перетаскиваем нашу из Assets в любую часть рабочего пространства — так мы создали экземпляр нашего компонента. 

Вкладка Home
Вкладка Home

 

Assets
Assets

 

Экземпляр на странице
Экземпляр на странице

Нам этом первый урок окончен.

Помогла ли вам эта статья?

Вы уже голосовали
Комментариев: 4
  1. Майя

    Блиииииин…., радуюсь как ребёнок!!!!!
    Всё так легко получается… Спасибочки вам от всей души! :idea: :idea: :idea: :grin:

  2. Д.

    Спасибо! А где продолжение???

    1. SVGPNG.RU (автор)

      К сожалению, первая часть не получила в своё время никакого отклика, поэтому продолжения нет. Однако, если есть запрос, будет и полный цикл для быстрого старта на Figma, не теряйтесь)

  3. Мария

    Здорово! Теперь мне всё понятно, точнее как начать, благодаря этой статье! 👍 Хочется увидеть продолжение. Много вопросов про дальнейшее создание, например дизайн-макетов

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: