Уроки по дизайну в Figma (часть 1)
В данном цикле статей мы расскажем, как начать работать с Figma так, чтобы использовать ее правильно и получить от нее максимум удобства и производительности.
Проблема в том, что многие начинающие дизайнеры, открывающие для себя Фигму, не используют те фичи, которые делают этот редактор по-настоящему крутым, и в результате пользуются утилитой чуть удобнее Paint. Поэтому мы сразу поставим себе амбициозную задачу: сделать легкий дизайн для двухстраничного сайта с использованием компонентов и плагинов, которые могут нам пригодиться.
Наше задание: сделать дизайн главной страницы и страницы контактов с формой обратной связи. В этой части мы организуем наш проект, чтобы в дальнейшем с ним было просто работать.
Итак, погнали. Скачиваем, устанавливаем, открываем Фигма, создаем новый проект:
Сразу переименуем проект, кликнув по «Untitled» в верхней части экрана:
Далее мы сразу решаем, что у нас будут отдельные страницы проекта для его отдельных частей: для 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 в любую часть рабочего пространства — так мы создали экземпляр нашего компонента.
Нам этом первый урок окончен.
Блиииииин…., радуюсь как ребёнок!!!!!
Всё так легко получается… Спасибочки вам от всей души!
Спасибо! А где продолжение???
К сожалению, первая часть не получила в своё время никакого отклика, поэтому продолжения нет. Однако, если есть запрос, будет и полный цикл для быстрого старта на Figma, не теряйтесь)
Здорово! Теперь мне всё понятно, точнее как начать, благодаря этой статье! ? Хочется увидеть продолжение. Много вопросов про дальнейшее создание, например дизайн-макетов