Собрали в одной подборке множество полезных уроков для тех, кто хочет освоить Фигму или перейти на нее с других редакторов. В подборке есть как уроки по освоению интерфейса самой программы, так и по созданию дизайна цифрового продукта.
Как работать в Figma: разбираемся в интерфейсе и создаем первый макет в новой части гайда с Академией дизайн-профессий Pentaschool.
В предыдущей части цикла мы знакомились с возможностями Figma. Сегодня мы разберем, как начать пользоваться редактором: создавать документы, работать с примитивами и текстом, настраивать модульные сетки.
Шаг первый. Знакомство с главным меню
Чтобы начать работать в Figma, необходимо пройти регистрацию. После этого вам станут доступны основные инструменты редактора. Вы можете пользоваться как браузерной версией (это удобно, если вы запускаете Figma с разных устройств), так и приложением, которое можно скачать здесь. На главном экране вы увидите недавние файлы (вкладка Recents).
Если вы новичок и пока еще не создавали проекты, на рабочем столе будут доступны только шаблоны, разработанные другими авторами. Как только вы сохраните свой первый макет или откроете файл, созданный другим пользователем, он отобразится на этом экране.
Главный экран рабочего стола Figma
Находить файлы можно через поиск (строка Search в верхней панели). Отдельного внимания заслуживает раздел Community – в нем вы сможете искать шаблоны, иконки, иллюстрации и плагины, которые можно использовать при создании макетов.
Примеры шаблонов из раздела Community
Чтобы вернуться на главный экран из Community, кликните на иконку, расположенную в левом верхнем углу.
Кнопка возврата на главный экран
Также в верхнем меню находится панель настроек аккаунта. Здесь вы можете выбрать фотографию профиля, посмотреть информацию об установленных плагинах, скачать офлайн-версию редактора, сменить пользователя.
Меню настроек профиля в Figma
Шаг второй. Создание макета
Для создания макета нажмите на кнопку New design file на рабочем столе или в панели Drafts. Перед вами откроется пустой бланк. Новый файл будет называться Untitled, но вы можете переименовать его, перейдя во вкладку Rename в меню Drafts или дважды кликнув по названию левой кнопкой мыши.
Панель Drafts в рабочем окне Figma
Основные объекты в Figma – фреймы. Фрейм – это рабочая область: экран мобильного приложения или страница сайта. Если вы знаете, для какого устройства будете создавать дизайн-макет, вы можете выбрать фрейм соответствующего размера. Для этого зайдите в меню Frame (значок решетки в левом верхнем меню). Справа откроется список доступных форматов.
Выбор доступных фреймов
Выбрав какой-либо формат, вы создадите рабочую область соответствующего размера. В одном файле вы можете создать несколько фреймов для разных носителей.
Фреймы для смартфонов
Одно из преимуществ Figma в сравнении с другими аналогичными программами – возможность совместной работы. Чтобы создать командный проект, вернитесь на главный экран (кнопка Back to files в верхнем левом углу). Далее нажмите на значок Create new team.
Создание команды в Figma
Этим действием вы создаете команду, которой необходимо придумать название. После этого откроется окно, где вам будет предложено пригласить участников. Вы можете назначить их редакторами (они смогут изменять файлы) или же ограничить их доступ режимом просмотра. В бесплатной версии Figma права могут быть только у двух человек, включая вас. Если вы пока не знаете, кто будет участвовать в создании дизайна, пропустите этот этап – изменить список участников можно позднее.
Командный проект представляет собой папку, в которой находятся файлы, относящиеся к вашему дизайну. В ней могут храниться десятки файлов. Каждая созданная вами команда может иметь несколько проектов одновременно, однако в бесплатной версии Figma можно создать не более 3-х совместных проектов. Если вы часто работаете в группе с большим числом участников (например, разработчиками, дизайнерами, менеджерами продукта), вам пригодится платная подписка, которую можно оформить на сайте редактора.
Если же вы работаете самостоятельно и хотите просто предоставить доступ к вашему макету другому человеку, создавать командный проект не нужно. Достаточно выбрать файл и нажать кнопку Share в верхнем левом углу. Откроется окно, в котором вы сможете пригласить участников, указать, смогут ли они вносить изменения в макет, а также скопировать ссылку на проект.
С помощью кнопки Share вы можете открыть доступ к файлу другим людям
Шаг третий. Работа с фигурами и текстом
При разработке практически любого макета используются примитивы – геометрические фигуры. С их помощью создаются иконки, кнопки и другие элементы дизайна. Чтобы добавить примитив в файл, выберите нужную фигуру в меню. Затем выделите область на макете, на которой вы хотите разместить объект.
Выбор примитивов в Figma
Размещение примитива на макете
Как и в других векторных редакторах, например в Adobe Illustrator, при размещении примитива создается новый слой (layer). Вы можете редактировать фигуру – изменять размер, вращать, скруглять углы, менять ее положение на макете и т.д. Чтобы объект был правильной формы, при создании зажмите клавишу Shift. А если вы хотите создать сложную фигуру с большим количеством опорных точек, воспользуйтесь инструментом Pen.
Когда вы нажимаете правой кнопкой мыши на слой, открывается меню его настроек. В нем вы можете выбрать расположение слоя, скрыть/показать, сгруппировать, копировать и т.д. Но чтобы работать со слоями было быстрее и проще, используйте горячие клавиши. Посмотреть список горячих клавиш легко – нажмите на значок вопроса, который находится в нижнем правом углу. В открывшемся меню выберите кнопку Keyboard shortcuts.
Просмотр горячих клавиш
Еще одна функция, которая упрощает работу с примитивами – использование модульных сеток. С их помощью вы сможете быстро выровнять элементы на макете. Чтобы включить сетку, выберите фрейм и нажмите на значок «+» рядом с кнопкой Layout grid. Автоматически будет создана простая сетка с шагом в 10 пикселей, но вы можете регулировать этот параметр – например, выбрать Rows (горизонтальное деление) или Columns (вертикальное), изменить размер шага, комбинировать несколько сеток в одном документе.
Создание модульной сетки
В созданные примитивы вы можете загружать изображения с вашего жесткого диска. Для этого используйте функцию Place image или перетащите картинку из папки в выделенный примитив.
Размещение изображения внутри примитива
При добавлении текста (кнопка T в верхнем левом углу) вы также создаете новый слой в выбранной области на макете.
Создание текстового слоя
Когда вы выделяете текстовую область, справа открывается панель настроек текста. Вы можете выбрать шрифт (в Figma представлены все шрифты из библиотеки Google Fonts, но также возможно добавить другие шрифты с помощью дополнения Figma Font Helper), начертание (жирный, курсив, обычный), кегль, цвет, расстояние между буквами, выравнивание и другие настройки.
Панель настроек текста в Figma
Шаг четвертый. Работа с цветом
По умолчанию все фигуры в Figma окрашены в серый. Чтобы изменить цвет заливки, выберите слой, перейдите в меню Fill (находится справа) и кликните на квадрат с цветом. Откроется цветовой круг. Вы можете выбрать цветовую модель, например RGB. Ввести код цвета можно вручную, воспользоваться пипеткой или же просто кликнуть на подходящий оттенок.
Чтобы изменить прозрачность, поменяйте значение в окне, находящемся справа от значения цвета (в примере указан показатель 100%).
Настройки заливки фигуры
Работая с цветом, вы также можете создавать градиенты и различные эффекты. Для этого перейдите в меню, находящееся в левом верхнем углу панели цвета, и выберите нужный режим.
Создание градиента в Figma
Вы также можете управлять обводкой фигур. Чтобы добавить обводку, нажмите на знак «+» рядом с кнопкой Stroke.
Создание обводки (Stroke)
В панели настроек можно выбрать толщину линии, ее цвет, местоположение, указать, какой тип линии нужен (пунктир или неразрывная).
Дополнительные возможности Figma
Возможности Figma не ограничены стандартным набором инструментов. С помощью плагинов (дополнительных модулей) вы можете значительно расширить функционал редактора – например, добавить возможность загрузки изображений прямо со стоков, создавать анимацию, генерировать диаграммы для инфографики и другое. Полный список плагинов вы найдете в разделе Community. Также вы всегда можете использовать шаблоны и элементы дизайна, представленные в библиотеке редактора.
Чтобы создавать современные, гармоничные и удобные сайты в Figma, не нужно разбираться в программировании или иметь художественное образование. В Академии дизайн-профессий Pentaschool вы с нуля освоите редактор на курсе Figma, выполните первые проекты, научитесь создавать профессиональный дизайн сайтов, получите рекомендации от экспертов и соберете портфолио, благодаря которому сможете найти заказчиков уже во время обучения. Программа разработана специально для начинающих – даже если вы никогда не занимались дизайном, вы получите все знания и навыки, необходимые для старта.
А в следующей части нашего гайда мы подробнее поговорим о плагинах и расширенных возможностях редактора. Вы узнаете, как устанавливать дополнения Figma и какие плагины могут пригодиться каждому дизайнеру.
Источник: timeweb.com
Как пользоваться Figma — подробная инструкция
В Figma можно создавать прототипы сайтов, векторные иллюстрации, кнопки, плашки и другие элементы интерфейсов. Рассказываем, как пользоваться «Фигмой», о преимуществах и недостатках сервиса и кому он подойдёт.
Содержание статьи скрыть
Что такое Figma
«Фигма» — онлайн-сервис для веб-дизайна. В нём можно отрисовать иллюстрации и элементы интерфейса, создать интерактивный макет сайта, прототип приложения или векторную графику.
Раньше команде дизайнеров было сложно одновременно работать над одним проектом, показывать готовые варианты клиентам и отдавать макеты разработчикам. Чтобы открыть макет, нужно было скачивать, устанавливать и настраивать отдельные программы типа Adobe Photoshop.
Работа в «Фигме» строится по другому принципу. Для доступа в сервис нужен лишь интернет и браузер. Все правки можно вносить одновременно в одном макете, настроив совместный доступ.
Ежедневные советы от диджитал-наставника Checkroi прямо в твоем телеграме!
Подписывайся на канал Подписаться
Возможности Figma
Сервис позволяет решать большое количество дизайнерских задач. Расскажем про основные проекты, которые можно делать в «Фигме».
Создание прототипов
В «Фигме» можно отрисовывать модель сайта или приложения. Такие прототипы дизайнеры обычно демонстрируют заказчикам, чтобы показать, как будет выглядеть проект в будущем. В сервисе можно не только отрисовать нужные экраны, но и настроить связи между ними.
Прототип, созданный в «Фигме». Источник: figma.com
Отрисовка элементов интерфейса
В «Фигме» дизайнеры могут создавать иконки, плашки, кнопки, формы обратной связи и др. Также программа позволяет настраивать эффекты на каждом элементе: делать кнопки кликабельными, раскрывать списки, скрывать плашки, создавать анимацию для блоков и всплывающих окон.
Отрисованные элементы в «Фигме». Источник: setproduct.com
Работа с векторными объектами
В «Фигме» можно создавать векторную графику, импортировать векторные объекты из редакторов Adobe Illustrator и Sketch, а также экспортировать дизайн в формат svg.
Создание блок-схем
В «Фигме» можно быстро создавать диаграммы, графики и схемы. Благодаря встроенному в сервис онлайн-конструктору блок-схем и большой библиотеке компонентов, можно просто перетаскивать элементы на холст и за считаные минуты создавать свою блок-схему. Готовый вариант можно экспортировать в png, svg или в другом удобном формате, также у «Фигмы» есть интеграции с программами для управления проектами и документами: Asana и Dropbox Paper.
Элементы для создания блок-схем в «Фигме». Источник: figma.com
Плюсы и минусы Figma
Перед началом использования сервиса, важно узнать о его сильных и слабых сторонах.
В «Фигме» над одним документом могут работать одновременно несколько людей. Можно открывать доступ для просмотра или редактирование. Если команда параллельно работает над макетом, то на экране видны курсоры разного цвета
Не работает без интернета
«Фигма» — это онлайн-сервис, для работы в нём необходим интернет. Если интернет резко пропадёт, все действия дизайнера автоматически сохранятся, но продолжить работу будет нельзя
Незаконченные версии не нужно выкладывать в облако и контролировать версии. Все исходники хранятся в аккаунте «Фигмы» и видны всем у кому открыт совместный доступ
Ограниченные возможности работы с текстом
В программе нельзя сделать отступ между абзацами, поставить межбуквенный интервал и настроить интерлиньяж
Чтобы начать самостоятельную работу нужна только регистрация в сервисе, все инструменты программы доступны сразу, также в бесплатной версии можно давать доступ на просмотр документа. Для совместной работы необходимо выбрать платный тариф
Нельзя добавить плагины
В отличие от похожих графических редакторов Sketch или Adobe Photoshop, в «Фигме» при нехватке определённых функций нельзя добавить плагины или создать скрипт — сценарий последовательных действий пользователей, которые запоминает программа, записывает и воспроизводит их
«Фигма» — онлайн-сервис, но есть и версия, в которой можно работать со стационарного компьютера без использования браузера. Для работы нужен интернет и авторизация. Файлы сохраняются в облаке, но также их можно импортировать в браузерную версию
Нельзя настроить горячие клавиши
В «Фигме» можно использовать минимальный набор горячих клавиш, которые стоят по умолчанию, но опытные дизайнеры, считают, что их не хватает для быстрой работы
Основные инструменты Figma
У «Фигмы» много инструментов для работы над проектами, расскажем об основных.
Фреймы
Фрейм — главный элемент дизайна в «Фигме». Это рабочая область, которая может быть страницей сайта или экраном приложения. Фреймы хорошо масштабируются, можно самостоятельно задать размер фрейма или выбрать готовый размер, рассчитанный под популярные устройства и форматы.
Модульная сетка
Сетка — это линии и клетки, которые позволяют выравнивать и упорядочивать все объекты дизайна во фрейме. Сетки создаются через панель Grid Layout. В сервисе можно поменять цвет сетки, растянуть её или настроить нужный размер, в одном макете можно использовать неограниченное количество сеток.
Модульная сетка в «Фигма»
Компоненты
Компоненты — это объекты пользовательского интерфейса, которым можно задавать общие стили и при необходимости быстро их изменять. Допустим, вы создали макет из 30 страниц, а заказчик попросил поменять шрифт в заголовках, чтобы не менять всё вручную, можно использовать компоненты и заменить шрифт лишь в одном заголовке, остальные изменятся автоматически.
Настройка компонентов в «Фигме»
Векторные формы
В онлайн-сервисе есть основные векторные объекты: прямоугольник, линия, треугольник, стрелка, круг и звезда. Они позволяют отрисовывать кнопки, плашки и другие элементы интерфейса. Создать векторные объекты можно инструментом Shape Tool.
Использование векторных форм в «Фигме»
Изображения
В макет можно добавить любое изображение и начать работу с ним. Для этого нужно открыть панель File и использовать инструмент Place Image или просто перетащить нужные картинки с рабочего стола.
Так можно добавить изображения в «Фигму»
История версий
Все изменения, внесённые в документ, автоматически сохраняются в облаке. При совместном доступе можно отслеживать историю действий каждого сотрудника, просматривать и восстанавливать предыдущие версии документа. Также всем версиям можно присвоить названия.
Так можно посмотреть историю версий в «Фигме»
Кому пригодится Figma
Изначально программа создавалась для дизайнеров, но сейчас ей пользуются люди самых разных профессий. Рассказываем кому и как сервис помогает решать рабочие задачи.
Дизайнерам
Дизайнеры могут создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений, а также работать с векторной графикой.
Разработка пользовательского интерфейса в «Фигме»
Разработчикам
Разработчики могут использовать режим Developer Handoff. Этот режим позволяет увидеть вкладку «код» в панели свойств. Разработчики могут использовать направляющие, чтобы определить расстояния до объектов и их размер, копировать CSS-стили элементов, их код для Android и iOS.
Режим Developer Handoff в «Фигме»
Блогерам
Блогеры могут создавать в «Фигме» мудборды, чтобы привлекательно оформлять посты в ленте и сторис.
Шаблоны для в «Фигме»
Smm-специалистам
Smm-специалисты могут использовать многочисленные шаблоны для постов в соцсетях, чтобы создавать баннеры и др.
Создание рекламных объявлений в «Фигме»
Менеджерам
Менеджеры могут вести в «Фигме» проекты с диаграммой Ганта и создавать блок-схемы. Диаграмма Ганта — это один из методов планирования рабочего времени и отслеживания процессов для относительно небольших проектов, обычно создаётся в виде столбчатых диаграмм. Блок-схемы помогают пошагово прописать конкретный алгоритм или определённый процесс работы.
Создание Диаграммы Ганта в «Фигме»
Редакторам
Редакторы могут схематично отрисовывать иллюстрации к статьям и передавать их в работу дизайнерам, а также создавать диаграммы и блок-схемы для управления редакцией.
Создание блок-схем в «Фигме»
Начало работы в Figma
Создавать проекты в онлайн-сервисе можно из браузера или десктопной версии. Если вам мешают многочисленные вкладки, то лучше скачать «Фигму» на рабочий стол. Если же вы часто пользуетесь разными устройствами, то используйте браузер, зайдите на сайт «Фигмы» и зарегистрируйтесь.
Для начала работы нажмите кнопку Sign up в правом верхнем углу, чтобы зарегистрироваться в сервисе
Для регистрации нужно ввести адрес электронной почты и сгенерировать пароль.
Форма регистрации в «Фигме»
После регистрации вы можете начать работу над своим первым проектом. Чтобы открыть рабочую область нажмите на крестик рядом с вкладкой Drafts. Все файлы, которые вы открывали ранее, можно увидеть во вкладке Recent, она находится выше.
Так создаётся новый файл
После того как откроется рабочая область, создайте фрейм и задайте размер вашему будущему макету. Можно ввести данные самостоятельно в поле Design либо выбрать размер из готовых шаблонов.
Начать работу совсем несложно. Это простая и интуитивно понятная программа, но чтобы освоить все её тонкости и дополнительные возможности, придётся потратить время: посмотреть ролики на ютубе и почитать обучающие статьи. В сети можно найти много роликов по работе с онлайн-сервисом. Также разработчики создали большую базу знаний, найти ответ на интересующий вопрос или инструкцию по применению того или иного инструмента можно на сайте Figma.center. Если нет много времени на освоение сервиса, можно выбрать более короткий путь.
Как быстро освоить онлайн-сервис Figma
Если у вас нет времени на самостоятельное освоение программы и вам нужно более глубокое погружение в особенности «Фигмы» — выберите один из онлайн-курсов.
Вы освоите главные инструменты «Фигмы», узнаете, как создавать текстовые слои и свои текстовые стили, научитесь создавать элементы навигации и сможете самостоятельно адаптировать элементы под разные размеры экрана. Курс состоит из 5 видеоуроков с подробными лекциями и домашними заданиями.
Срок обучения: 1 месяц
Стоимость обучения: бесплатно
На этом интенсиве вы всего за три дня научитесь работать с фреймом и сеткой, поймёте принципы работы с текстом и сможете создать свой первый дизайн: иконку или баннер. На интенсиве вы сможете пообщаться с другими участниками курса и получить обратную связь от преподавателей.
Срок обучения: 3 дня
Стоимость обучения: бесплатно
Вы с нуля освоите «Фигму» и научитесь использовать плагины, компоненты и горячие клавиши для быстрой работы. Вы сможете создавать прототипы с разной степенью детализации и адаптировать их под любые устройства. Вас ждёт 48 онлайн-уроков и столько же практических заданий, которые помогут отточить навыки и собрать портфолио.
Срок обучения: 4 месяца
Стоимость обучения: 22 400 руб.
Коротко о главном
«Фигма» — удобный онлайн-сервис для веб-дизайна. Он пригодится дизайнерам, разработчикам, менеджерам, smm-специалистам, редакторам и блогерам. В «Фигме» можно создавать макеты сайтов, делать прототипы приложений, отрисовывать элементы интерфейса и решать другие творческие задачи.
В сервисе можно работать всей командой одновременно, все изменения макета сохраняются в облаке, поэтому всегда можно увидеть актуальную версию дизайна. Для работы в «Фигме» нужен лишь интернет и браузер, программа откроется даже на самом простом ноутбуке. Чтобы по максимум использовать возможности сервиса пройдите один из онлайн-курсов.
