Всем привет, дорогие друзья! Сегодня рассмотрим такой инструмент работы в графическом дизайне как Figma.
Figma — это популярный среди дизайнеров графический онлайн-редактор. В нём удобно проектировать интерфейсы и макеты сайтов и мобильных приложений, создавать презентации, иллюстрации, логотипы и анимацию. Кому пригодится знание «Фигмы» и как с ней работать — рассказываем в статье.
Возможности
В Figma можно создавать прототипы и дизайн-макеты сайтов и приложений, презентации, иллюстрации и векторную графику, дизайнеры рисуют элементы интерфейса и анимацию.
Дизайн-макеты
Дизайн-макет сайта или приложения можно создать с помощью различных элементов и шаблонов, которые есть в библиотеке Figma. Это упрощает процесс разработки продукта и помогает сэкономить время на вёрстке.
Прототипы
Прототип — это схематичная модель будущего проекта, например, сайта или приложения, по которой понятно, как пользователь будет с ним взаимодействовать. Туда можно добавить переходы между экранами, анимацию, выпадающее меню и др., чтобы разработчику или заказчику стало понятно, как будет выглядеть и работать сайт или приложение. Прототипы помогают не только оценить удобство навигации, но и протестировать концепции и выявить ошибки в сценарии до начала разработки.
Фреймы
Фрейм — основная рабочая область, на которой располагаются элементы макета. Новый проект в Figma начинается с выбора размера фрейма: для мобильного устройства, соцсетей, презентаций и др. Благодаря этого удобно контролировать расположение блоков и деталей, которые находятся внутри фрейма.
Основные функции Figma для начинающих
Работа с шаблонами
Отличный вариант для тех, кто хочет начать работать с Figma и «пощупать» возможности редактора. Шаблоны содержат уже готовые элементы, что упрощает задачу новичкам. Например, можно открыть шаблон планирования, адаптировать его под свои нужды и сэкономить время.
Работа с новым файлом
Чтобы создать новый проект в Figma, выберите «New Design File».
После этого перед вами откроется рабочее пространство.
В главном меню можно сохранять и загружать файлы, удалять объекты, добавлять компоненты и стили в библиотеку и др.
Левая панель показывает список всех слоёв и объектов. Вы можете управлять их иерархией: менять местами, группировать слои и переключаться между страницами объекта.
Центральная область — рабочая: здесь вы создаёте и редактируете свои проекты.
Пространство, которое вы видите на экране, — не вся рабочая площадь, а только её часть. Чтобы попасть в пустое пространство, зажмите левую кнопку мыши и пробел и переместите курсор в нужном направлении. Также в правом верхнем углу указан масштаб — на скриншоте выше это «29%». Вы можете увеличить или уменьшить его.
На правой панели отображены свойства выбранного объекта. Здесь можно изменить цвет, размер, шрифт и т. д.
Создание фигуры
Шейпы
Шейпы (shapes) - векторные фигуры с закрытым контуром. Если контур разомкнуть - шейп превращается в путь (path).
Если выбрать любой шейп и кликнуть в рабочую область - по умолчанию будет создана фигура размером 100х100 пикселей.
Для создания фигур используют инструменты из панели Shape Tool: прямоугольник, элипс (круг), полигон (треугольник), звезда.
Булевые операции
В Figma доступны четыре булевые операции: объединение, вычитание, пересечение и исключение. Они позволяют создавать сложные формы из простых элементов, комбинировать слои и удалять перекрывающиеся части.
Объединение
Объединение фигур (Union Selection) создаёт из нескольких объектов одну сплошную фигуру. Для всех частей этой фигуры действуют одинаковые правила заливки, обводки или других эффектов. Параметры будущей единой фигуры берутся из верхнего слоя выбранных векторов.
Вычитание
Вычитание фигур (Subtract Selection) позволяет удалить часть фигуры, сделать отверстие или изгиб. В результате становится видимым самый нижний слой векторных объектов, за исключением тех его частей, которые были перекрыты слоями выше.
Пересечение
Пересечение фигур (Intersect Selection) делает видимой только ту часть, на которой пересекаются векторные фигуры. Параметры заливки, обводки и других эффектов берутся из верхнего слоя.
Исключение
Исключение фигур (Exclude Selection) работает противоположным образом: видимыми становятся те части векторных слоёв, которые не пересекаются друг с другом. Исключение работает только с двумя векторными слоями: добавление третьего слоя инвертирует действие.
Векторные фигуры
Векторные фигуры в Figma — это объекты, которые создаются с помощью инструментов для векторного рисования и могут масштабироваться без потери качества. Они подходят для создания простых форм, кнопок, значков, логотипов и иллюстраций.
Векторные фигуры можно масштабировать и экспортировать. Они идеально подходят для создания простых иллюстраций, в том числе кнопок, логотипов и значков.
Основные инструменты
Некоторые инструменты для работы с векторными фигурами в Figma:
- Геометрические примитивы. Например, «Rectangle» (R) для прямоугольников и квадратов, «Ellipse» (O) для кругов и овалов, «Polygon» для многоугольников с настраиваемым количеством сторон, «Line» (L) для прямых линий.
- Инструмент «Перо» (Pen tool, P) для свободного рисования.
- Инструмент для изгиба (Bend tool) для скругления углов.
- Инструмент Paint bucket для заливки областей или удаления заливки.
Горячие клавиши Figma
- Ctrl + \ на Windows или ⌘ + \ на Mac — скрыть или показать боковые панели.
- Ctrl + / на Windows или ⌘ + / на Mac — открыть быстрый поиск по меню.
- V — перемещение объектов: чтобы переместить элементы, зажмите клавишу V и двигайте выделенный объект стрелками.
- F — создание фреймов: зажмите клавишу и нарисуйте рамку.
- T — добавление текста: для этого зажмите T, нарисуйте рамку — и можете писать текст.
- Ctrl + B на Windows или ⌘ + B на Mac — сделать текст полужирным: выделите нужный текст и нажмите на клавиши.
- Ctrl + I на Windows или ⌘ + I на Mac — сделать текст курсивом.
- Ctrl + A на Windows или ⌘ + A на Mac — выделить всё на экране. Это горячая клавиша для работы со слоями, чтобы применить какое-то действие ко всему дизайну сразу.
- Ctrl + G на Windows или ⌘ + G на Mac — сгруппировать объекты. Горячая клавиша для работы со слоями, которая позволяет сгруппировать несколько объектов в одну группу.
- Ctrl + Shift + G на Windows или ⌘ + Shift + G на Mac — разгруппировать объекты.
- Ctrl + Shift + 4 на Windows или Ctrl + G на Mac — увидеть или скрыть Сетку. Модульная сетка помогает выровнять макет.
- Shift + R — включить или выключите Линейку — инструмент, который позволяет добавлять направляющие линии на рабочую область, чтобы выровнять объекты.
Тени
Создание теней
Чтобы добавить тень, в разделе Effects кликните на плюс - по умолчанию Figma добавит тень,.
Для настройки тени нажать на надпись Drop Shadow, в выпадающем меню его можно изменить на Inner Shadow.
Настройки теней:
Blur — размытие краёв тени.
Spread — размер тени.
X и Y — смещение относительно центра объекта. X — влево и вправо, а Y — вверх и вниз.
Дополнительно можно настроить цвет и непрозрачность тени.
С помощь теней можно также создавать 3D открытки
Например:
Или
Примеры работ
Плюсы Figma
- Бесплатная версия. В бесплатной версии Figma можно открыть только один проект, но количество файлов в проекте может быть любым. Функции и инструменты бесплатной версии не ограничены.
- Удобство использования. «Фигму» можно установить на компьютер и смартфон или работать через браузер — достаточно авторизоваться на сайте. А посмотреть макет можно без регистрации и авторизации в системе.
- Доступность. Figma может работать на Windows, Linux, Mac и даже Chrome OS.
- Безопасность. Все файлы, над которыми вы работаете в «Фигме», находятся в облачном хранилище, поэтому сохраняются автоматически.
- Совместная работа. В одном проекте могут работать несколько человек одновременно. Также можно выдать доступ на редактирование или только просмотр.
- Работа с компонентами. В Figma можно создавать компоненты — повторно используемые элементы, такие как кнопки и иконки. Изменения, внесённые в компонент, автоматически появляются во всех его копиях.
- Настройка собственных стилей. В «Фигме» можно создавать и настраивать собственные стили, что помогает упростить работу и сделать дизайн проекта единообразным. Цветовые стили задают цвета, которые можно легко применять к элементам дизайна. Текстовые — определяют параметры текста: шрифт, размер, жирность и межстрочный интервал. Эффекты и тени применяют к объектам, чтобы придать им глубину, добавить объём и др. Стили сеток и разметки определяют параметры сетки: ширину колонок, отступы и выравнивание.
- Установка плагинов. Figma поддерживает множество плагинов, которые могут расширить функционал приложения. Например, есть плагины для автоматизации задач, генерации контента и интеграции с другими сервисами.
Минусы Figma
- Тарифный план. Хотя Figma предлагает бесплатный тариф, некоторые функции доступны только в платной версии. Например, для командной работы нужна платная подписка.
- Работа с телефона. Сейчас функционал Figma на мобильных устройствах ограничен: приложение доступно для просмотра и комментирования, но полноценно работать с дизайном не получится.
- Отсутствие защиты файлов в бесплатном тарифе. Любой пользователь, которому вы предоставите доступ для просмотра вашего проекта в Figma, может внести изменения в макет или скопировать его.
- Зависимость от интернета. Некоторые функции Figma недоступны без подключения к интернету.
Выводы
В данной статье я осветил основные инструменты работы в программе Figma. Существуют также такие инструменты как:
- плагины
- анимация
- И многие другие
Данные инструменты я разберу в другой, более углубленной статье.
Нуждаетесь в услугах графического дизайнера? Тогда обращайтесь ко мне! Пишите! Помогу во всём! Filipenckovegor@yandex.ru или https://www.avito.ru/home
Ставьте лайки, подписывайтесь на канал! Не забудьте пригласить знакомых и друзей!
#Figma #Графический дизайн