Первым шагом в изучении работы с Figma для дизайна является понимание её основной терминологии. Это включает знакомство с базовыми элементами интерфейса, функциями различных инструментов и возможностей, а также языком, используемым для описания дизайнерских процессов на этой платформе. Чёткое понимание этих терминов не только облегчит навигацию по программе, но и улучшит взаимодействие с другими участниками команды, обеспечивая более эффективный и продуктивный процесс проектирования.
Проекты (Projects)
Проект (Projects) — это способ организации и управления вашей дизайнерской работой в Figma. Можно представить его как папку на вашем компьютере. Так же как вы храните разные типы файлов в отдельных папках для порядка, в Figma проекты служат для группировки связанных дизайн-файлов. Каждый проект может содержать множество отдельных дизайн-файлов, известных как файлы Figma. Например, если вы работаете над веб-сайтом, вы можете создать один проект для всего сайта. Внутри этого проекта можно поместить отдельные файлы Figma для главной страницы, страницы контактов и страницы о компании.
Проекты допускают совместный доступ для просмотра или редактирования, что делает их удобными для командной работы. Создание проектов доступно владельцам, администраторам и членам команды с правами редактирования. Чтобы создать проект, перейдите в браузер файлов, выберите название команды в боковом меню и нажмите + Проект в панели меню.
Файлы (Files)
Файл (Files) — это отдельный документ, в котором вы создаёте и разрабатываете свой дизайн. Его можно сравнить с документом в текстовом редакторе или холстом в приложении для рисования. Каждый файл в Figma представляет собой отдельное рабочее пространство, в котором можно рисовать, проектировать и создавать прототипы. Например, если вы разрабатываете веб-сайт, каждая отдельная веб-страница может быть представлена отдельным файлом.
Файл Figma содержит все элементы вашего дизайна: текст, фигуры, изображения и слои. Вы также можете добавлять интерактивные компоненты и создавать прототипы прямо в этом же файле. Иными словами, файлы — это то место, где происходит непосредственная дизайнерская работа. Чтобы создать новый дизайн-файл в Figma, нажмите + Design File («+ Дизайн-файл») в правом верхнем углу браузера файлов Figma.
Figma использует собственный облачный формат для хранения дизайн-файлов, что обеспечивает удобство совместной работы и редактирование в реальном времени. Для экспорта поддерживаются форматы PNG, JPG, SVG и PDF. Импортировать можно файлы форматов SVG, PNG, JPG, а также файлы, созданные в Sketch.
Страницы (Pages)
Страницы (Pages) — это подразделения внутри файла Figma, которые позволяют дополнительно организовать вашу дизайнерскую работу. Если файл Figma — это записная книжка, то страницы — это отдельные листы внутри этой книжки. Например, если вы разрабатываете главную страницу сайта в файле Figma, каждая страница внутри файла может отображать отдельный вариант этого дизайна.
Ключевое различие между файлами и страницами в Figma заключается в уровне их организации. Файл — это более широкий контейнер, охватывающий ваш проект целиком или значительную его часть, а страницы внутри этого файла позволяют разделить проект на более управляемые и логично организованные части.
Такая структура особенно полезна при работе с большими или сложными проектами, позволяя вам держать связанные элементы дизайна отдельно, но при этом внутри одного общего файла. Таким образом, вы легко можете перемещаться и работать с конкретными частями проекта, не просматривая всё сразу.
Слои (Layers)
В Figma, как и в большинстве дизайнерских инструментов, слои представляют собой базовое понятие, помогающее организовать различные элементы вашего дизайна. Слои можно представить в виде прозрачных листов, наложенных друг на друга. Каждый слой содержит разные элементы дизайна: текст, фигуры или изображения. Эти слои можно расположить в определённом порядке — элементы на верхних слоях будут отображаться поверх нижних, подобно стопке бумаги на рабочем столе. Такая организация позволяет контролировать, какие части дизайна видны поверх других.
Слои также полезны для разделения различных частей дизайна. Например, один слой может быть предназначен для фона, другой — для текста, третий — для изображений или иллюстраций. Такое разделение облегчает редактирование отдельных частей дизайна без затрагивания остальных. В Figma панель слоёв расположена слева, там вы можете выбирать, переименовывать, скрывать или блокировать слои по необходимости.
Значения шага смещения (Nudge values)
Значения шага смещения — это небольшие шаги, с помощью которых можно точно настроить положение и размер элементов дизайна. Их можно представить как инструменты тонкой настройки. Используя клавиши со стрелками на клавиатуре, вы можете смещать элемент на заданное расстояние в нужном направлении (вверх, вниз, влево или вправо). Чтобы изменить величину шага смещения в Figma, откройте меню «Preferences» («Настройки») → «Nudge Amount» («Величина шага смещения») и задайте значения для малого шага (по умолчанию 1) и большого шага (по умолчанию 10). Значения малого и большого шага указываются в пунктах (points) и не зависят от разрешения.
Эта точная регулировка особенно важна для аккуратного выравнивания и размещения элементов дизайна. Например, можно слегка сдвинуть кнопку влево, чтобы идеально выровнять её относительно текстового блока. Значения шага смещения особенно полезны при работе над UI-дизайном и графикой, где требуется точность до пикселя, обеспечивая аккуратность и опрятность дизайна.
Маски (Masks)
Маска — это функция, с помощью которой можно управлять видимостью отдельных частей объекта в дизайне. Представьте, что у вас есть миниатюра видео, и вы хотите показать только определённую часть этой картинки внутри конкретной фигуры (например, круга для аватара или звезды для специального значка). В таком случае вы применяете маску. Используя маску, вы скрываете ту часть изображения, которая выходит за пределы выбранной фигуры. Это похоже на просмотр сцены сквозь вырезанное в бумаге окно — вы видите только то, что попадает в это окно.
Маски — базовый инструмент в дизайнерских программах, и работают они примерно одинаково на разных платформах, не только в Figma. Они необходимы для создания сложных изображений и композиций, позволяя дизайнерам показывать или скрывать части изображения без деструктивного редактирования, то есть исходные изображения при этом не изменяются навсевсегда.
Группы (Groups)
Группировка позволяет объединять несколько элементов в единый блок. Допустим, вы разрабатываете дизайн, состоящий из различных элементов — фигур, текста, изображений. Вместо того чтобы перемещать или редактировать каждую деталь по отдельности, их можно сгруппировать. После этого элементы можно перемещать, изменять размер и модифицировать как единый объект. Это делает управление дизайном проще и эффективнее, особенно при работе со сложными композициями.
Группы особенно полезны, когда нужно сохранить относительное положение и размеры элементов друг относительно друга. Например, при разработке кнопки, состоящей из текста и иконки, группировка обеспечит, чтобы они оставались единым целым. При необходимости каждый элемент внутри группы можно редактировать отдельно.
Сетки (Grids)
Сетки помогают точно выравнивать и упорядочивать элементы вашего дизайна. Они предоставляют визуальную структуру в виде линий или точек, наложенных на рабочее пространство. Сетку можно сравнить с разметкой на миллиметровой бумаге, которая помогает точно размещать и выравнивать элементы.
Например, при дизайне визитной карточки сетка помогает убедиться, что текст (например, имя и контактные данные) и логотипы равномерно распределены и правильно выровнены. Эта сетка не будет видна на напечатанной карточке — это лишь вспомогательный инструмент в процессе разработки дизайна.
Figma предлагает различные типы сеток: колонки, строки и квадратные сетки, каждая из которых используется для своих задач.
Секции (Sections)
Секции помогают организовать и маркировать отдельные области вашего рабочего пространства, упрощая вам и вашим коллегам навигацию и понимание содержимого файла дизайна. Секции можно представить как выделенные области на рабочем пространстве, куда вы группируете связанные идеи или элементы.
Секции особенно полезны при совместной работе над проектами. Их можно использовать, чтобы обозначить зоны для командного мозгового штурма, генерации идей, или выделить части дизайна, которые завершены и готовы к разработке. Такая организация помогает коллегам ориентироваться в процессе проектирования и понимать статус и назначение различных частей дизайна.
Таким образом, секции идеально подходят для того, чтобы разделить рабочее пространство на чёткие области, каждая из которых соответствует своему этапу или задаче в дизайнерском процессе.
Векторы (Vectors)
Векторы — это графические изображения, состоящие из точек, линий и кривых, описанных математическими формулами, а не пикселями. В отличие от растровых изображений (например, JPEG или PNG), которые могут размываться при изменении размера, векторные изображения сохраняют чёткость при любом масштабе. Это делает их идеальным решением для дизайнов, которые нужно увеличивать или уменьшать без потери качества, таких как логотипы или иконки.
При создании или редактировании векторного изображения в Figma вы управляете его точками и контурами (путями). У каждой точки есть управляющие маркеры, перемещая которые можно менять форму и направление кривых. Это обеспечивает большую гибкость и точность при создании сложных форм и элементов дизайна.
Векторная графика особенно полезна в UX/UI-дизайне благодаря масштабируемости и небольшому размеру файлов. Векторы гарантируют, что элементы интерфейса, такие как иконки и кнопки, остаются чёткими на любых экранах — от небольших смарт-часов до широкоформатных мониторов. Это делает векторы фундаментальным инструментом для любого дизайнера.
Линейки (Rulers)
Линейки — это инструменты, которые помогают измерять и выравнивать элементы в вашем дизайне. Они отображаются вдоль верхнего и левого края рабочего пространства и показывают измерения в пикселях. Можно представить линейки как цифровую измерительную ленту, которая служит ориентиром для точного размещения и выравнивания объектов. Например, если вы разрабатываете веб-страницу и хотите убедиться, что текст и изображения расположены равномерно относительно верхнего края страницы, используйте горизонтальную линейку сверху. Аналогично вертикальная линейка слева поможет выровнять элементы друг относительно друга.
Чтобы включить линейки в Figma, перейдите в основное меню, выберите «View» («Вид») > «Rulers» («Линейки») или используйте сочетание клавиш Shift + R.
Плагины (Plugins)
Плагины — это дополнительные инструменты, расширяющие стандартные возможности Figma. Их можно сравнить с приложениями для смартфона, добавляющими новые функции или упрощающими выполнение задач. Например, плагин может автоматически упорядочивать элементы дизайна, облегчать импорт изображений или проверять доступность дизайна по таким параметрам, как контрастность цветов.
Плагины особенно полезны для повторяющихся или специфических задач, позволяя вам сосредоточиться на творческой составляющей дизайна. В библиотеке сообщества Figma представлено множество различных плагинов. Чтобы получить доступ к ним, нажмите иконку «Resources» («Ресурсы») на панели инструментов и перейдите на вкладку «Plugins» («Плагины»). Здесь вы можете просматривать, устанавливать и управлять плагинами, улучшая свой рабочий процесс в Figma.
Изучите на нашем сайте подборку полезных плагинов для Figma, мы собрали для вас самое интересное.
FigJam
FigJam — это онлайн-инструмент для командной работы, который представляет собой интерактивную доску от Figma, созданную специально для совместного мозгового штурма и обмена идеями. FigJam похож на цифровой холст, на котором члены команды могут совместно обсуждать идеи, делать наброски концепций, создавать схемы и строить диаграммы рабочих процессов. Этот инструмент особенно полезен на ранних стадиях проекта, когда важны свободный обмен мнениями и коллективное участие.
В FigJam можно использовать функции, такие как стикеры, инструменты для рисования, фигуры и соединительные линии для визуальной организации мыслей и идей. Он удобен в использовании и интерактивен, поэтому внести свой вклад может любой участник команды, независимо от уровня подготовки в дизайне. FigJam поддерживает совместную работу в реальном времени, позволяя нескольким пользователям одновременно работать с одной доской, что делает его отличным решением для удалённых команд и проектов, требующих вовлечения разных специалистов.
Чтобы создать новый файл FigJam, нажмите на значок «+» в левом верхнем углу браузера файлов Figma и выберите «New FigJam file» («Новый файл FigJam»).