Старт проекта
Начинать работу над проектом необходимо с создания нового файла. В левой колонке необходимо нажать Drafts, затем New Design File. Если вам необходимо импортировать файлы из Sketch, нажмите Import в правой части экрана:
Рассмотрим основное меню.
- Recents — список файлов, которые вы просматривали в последнее время.
- Drafts — ваши доски, на которых вы ведете проекты.
- Create New Team — создание команды, которая сможет совместно работать над проектом. Напомним, что в бесплатной версии команда состоит всего из двух человек.
Internal profile — настройки профиля. Здесь можно загрузить фотографию аккаунта, посмотреть список доступных команд и последние проекты, которые вы просматривали.
Plugins — важный пункт для новичков. Здесь можно посмотреть список расширений, которые могут существенно ускорить и облегчить работу в программе. Если у вас не установлено ни одного плагина, программа предложит их найти в Community. Не стоит пропускать этот шаг, полезных расширений в фигме действительно много:
Например, вы можете скачать Lorem Ipsum, который автоматически будет вставлять текст согласно верстке при проектировании дизайна лендинга. А плагин Unsplash позволяет найти иллюстрации в стока без покупки дополнительных фотобанков.
Начинаем работу
Новый файл можно создать двумя способами. Первый — нажать вкладку Drafts. Второй – нажать New file в правой части экрана. Автоматически ваш файл будет назван Untitled. Если вам предстоит работа над несколькими файлами, стоит заранее переименовать каждый из них.
Если вы работаете в команде, то нажмите Create New Team и пригласите других участников удобным способом. При добавлении команды Figma автоматически создаст новый проект. Новый проект в команде создается через кнопку New project.
Чтобы отметить последнее действие в Figma, можно нажать сочетание клавиш Ctrl (Cmnd) + Z, либо в следующей последовательности нажать кнопки в меню слева: File - Edit - Undo.
Как показать свой проект другому человеку, не состоящему в команде? Используйте кнопку Share.
Новый файл в Figma
В новом файле вам доступно несколько областей.
- Слева — слои.
- Наверху и справа — панели инструментов.
- В самом центре располагается рабочая область. Именно здесь будет располагаться ваш дизайн.
Если кликнуть по меню в левой части экрана, откроется доступ к следующим функциям:
Back to files — возврат к списку рабочих файлов.
Search — быстрая панель поиска нужной команды или расширения.
File — список действий, которые можно применить к рабочему файлу. Например, можно быстро сохранить все изменения через Save to version history, посмотреть, как менялся ваш файл коллегами, нажав Show version или экспортировать файл в pdf, нажав Export Frames to PDF.
Edit — работа с разными элементами. Чтобы отредактировать тот или иной элемент, необходимо его выделить, нажав на него правой кнопкой мыши. Обратите внимание — каждый вновь созданный объект в фигме имеет по умолчанию серый цвет. Функция Set Default Properties пригодится, если необходимо последовательно создать несколько объектов одинакового цвета. Покрасить элемент в задуманный цвет можно с помощью Pick Color — в просторечии «пипеткой». Select All with — целая группа команд, которая располагается внизу выпадающего списка Edit. С их помощью можно быстро выбрать одинаковые объекты по разным параметрам, например, свойствами, шрифтами, заданными эффектами и пр.
View — позволяет настраивать отображение проекта. Менять масштаб удобнее через кнопки + и -. Но можно использовать пункты из этого меню — Zoom in и Zoom Out.
Preferences — помощью в навигации. Первые три пункта помогают настроить ровное отображение элементов, что пригодится, если времени на проверку уже нет. Highlight Layers on Hover — полезная функция для тех, кто работает с мелкими элементами. Если включить ее, программа будет автоматически подсвечивать, иконки, значки и пр.
Основные инструменты и возможности Figma
Фрейм — основной инструмент для работы в этой программе. Его также называют артбордом. Это проект, который в итоге может стать лендингом, креативом, экраном мобильного приложения и пр. Вы можете заранее задать необходимые размеры или отредактировать его уже в процессе работы, перетягивая углы при наведении на объект.
Нажмите на клетку в верхнем меню — справа откроется список доступных форматов — от десктопа до определенной модели с телефона. Необходимый размер артборда можно задать вручную.
Дизайн создается непосредственно внутри фрейма. Помните, что каждый фрейм — это представление заказанного формата дизайна, внутрь которого вы помещаете элементы — фоны, тексты, графические элементы и пр. По умолчанию каждый новый элемент в фрейме — это отдельный слой. Чем больше объектов вы добавляете, тем больше слоев появляется в меню проекта в левом меню. Это позволяет быстро откорректировать один конкретный элемент, не задевая другие.
В Figma есть возможность группировки объектов внутри фрейма. Это очень удобно, если вы создаете карусель из нескольких креативов с несколькими одинаковыми графическими элементами. Для этого выберите пункт Object, затем перейдите в Group Selection. Готово! элементы объединились в группу.
Пункт Constraints позволяет закреплять положение определенного объекта. Это может пригодиться, например, если вы делаете несколько вариантов лендинга для А/Б теста, но при этом есть задача сохранить кнопку на одном и том же месте.
Сетка пригодится для проектирования продуктовых страниц сайта и продающих лендингов. Чтобы открыть ее, выделите фрейм, в котором работаете, а затем из правой панели инструментов выберите пункт Layout grid.
Линейки (направляющие) в Figma удобнее включать, используя горячие клавиши. Нажмите комбинацию Shift + R — сверху и слева артборда появятся линейки. Более долгий способ — Меню - вкладка View - вкладка Rulers.
Чтобы скачать дизайн, выделите готовый фрейм, перейдите в меню File, а затем нажмите Export и выберите необходимые параметры.
Изображения в Figma
В артборд изображения можно добавить в два клика, используя сначала File, а затем перейдя по вкладке Place Image. Можно сделать проще и перетащить нужную картинку просто с рабочего стола.
Обратите внимание: Figma не воспринимает фото как отдельный объект. По сути это заливка фрейма-прямоугольника, а это значит что при автозаливке изображения, оно может некорректно отображаться. Чтобы исправить отображение, используйте параметры Fill, Fit, Crop, Tile.
Fill — весь артборд заполняется изображением и практически недоступен для редактирования.
Fit — картинка целиком отображается во фрейме. Если пропорции картинки и артборда не совпадают, то появятся пустые зоны.
Crop — картинку можно обрезать.
Tile — помогает создать узор из картинок во фрейме.
Чтобы откорректировать яркость, контраст и другие параметры изображения, выделите его и используйте панель в правой части экрана.
Чтобы отзеркалить изображение в Figma, используйте горячие клавиши.
- Shift + H позволит отразить объект по горизонтали.
- Shift + V поворачивает фигуру по вертикали.
Градиенты в программе сделать можно за пару кликов. Выделите рабочий фрейм и в меню слева кликните на пункт Fill. В открывшемся окне вы можете выбрать цвет и характер градиента: линейный, радиальный, кристальный или радиальный.
Еще один полезный инструмент — маски. Их используют, например для того, чтобы обрезать контур у определенного объекта, удалить фон или сделать макет или обложку с изображением в окошке. Для создания маски вам потребуется минимум 2 элемента. Выделите их оба и нажмите в меню Use a mask. В открывшемся меню отредактируйте параметры маски по своему усмотрению.
Типографика в Figma
В программе есть возможность использования предустановленных шрифтов из Google. Чтобы сделать текст на изображении, нажмите T на верхней панели инструментов. В левой части экрана отображается информация о текстовом слое: стиль, размер и пр.
Можно менять расположение текста, межстрочный интервал, цвет и пр.
Обратите внимание: для удобного редактирования лучше создавать заголовок и обычный текст отдельными блоками.
Добавить новый шрифт в Figma очень просто: вам нужно скачать нужный в формате Otf, установить следуя указаниям на экране, а затем перезапустить программу. После перезапуска новый шрифт появится в списке доступных.
Для рекламных креативов и логотипов часто требуется сделать текст, идущий по кругу, с изображением в центре. Удобнее всего это делать, используя плагин to Path. Установите плагин и перезапустите программу.
- В рабочем фрейме нарисуйте круг.
- Напишите нужный текст.
- Через меню Plugins откройте to Path и нажмите Link.
- Во всплывающем окне настройте межстрочный и межбуквенный интервалы.
- Готово!
Как сделать прототипирование?
Чтобы создать прототип (мокап), вам нужно выбрать подходящий артборд, далее правой кнопкой мыши щелкнуть на Prototype, а затем выбрать Prototype Settings. Здесь можно выбрать устройство, для которого вы планируете разрабатывать прототип. В правом верхнем углу будет расположена кнопка воспроизведения — нажмите ее, чтобы увидеть отображение дизайна в выбранном прототипе.
Обратите внимание: масса возможностей для создания мокапов откроется вам, если вы установите плагин Artboard studio. В нем есть масса бесплатных мокапов — от разных моделей телефонов до ноутбуков, упаковок и пр. Это существенно упростит процесс дизайна в программе.
Экспортируем файлы из Figma:
1. Выберите объект, который хотите экспортировать.
2. Нажмите на кнопку Export. Она расположена в правом нижнем углу экрана.
3. Выбирайте нужный формат из предложенных.
4. Готово!
Простая анимация прототипа доступна с функцией Smart Animate. В этом варианте программа сама подбирает скорость анимации без каких либо дополнительных настроек. С помощью этой функции можно делать объекты больше, меньше, передвигать их и подключать новые. На выходе вы получите плавные переходы от одного изображения к другому.
Не забудьте добавить прокрутку в ваш прототип. Это делается в несколько кликов.
- Зайдите в меню Prototype
- Выделите тот фрейм, в который вы планируете добавить этот эффект.
- Выберите пункт Overflow scrolling. Здесь же выбирается и формат скролла.
- Не забудьте нажать Fix position when scrolling, чтобы экран прототипа был зафиксирован во время скроллинга.
- Готово!
Кстати, этот же прием подойдет и если вы хотите сделать, например, слайдер на лендинге — изображения будут плавно меняться.
В фигме масса эффектов, которые позволяют сделать прототипы максимально похожими на настоящий планшет или смартфон. Например, с помощью дизайна можно поместить объект под стекло. Для этого на изображение в выбранном фрейме наложите фигуру, которая будет служить «стеклом», а затем с помощью параметров Fill и Stroke отредактируйте его прозрачность. И не забудьте добавить Drop Shadow для более яркого визуального эффекта.
Кстати, вы можете скруглить углы вашего «стекла», просто перетащив круглые точки ближе к середине фигуры, как показано здесь
Обратите внимание: слой с изображением обязательно должен быть ниже слоя со «стеклом».
Переносим дизайн лендинга в Tilda.
Для начала необходимо получить API Access токен для импорта. Идем в главное меню, далее нажимаем Help and account, а после этого — Account settings. Всплывающее окно необходимо пролистать до конца, а в пункте Create a new personal access token прописать Tilda. Спустя секунду-другую программа сформирует токен, который нужно поместить в тильду через zero-блок.
