Время чтения: 4 минуты

С развитием Figma и расширением ее функционала, программа стала актуальна не только для веб-дизайнеров. Благодаря облачной структуре и широкому набору функций, Figma позволяет упростить процесс совместной работы над проектами, повышая эффективность работы в команде.

В посте — курс для тех, кто начинает знакомство с Figma. Автор начинает с обзора интерфейса программы и рассказывает о ее основных инструментах и функциях. Вы узнаете, как работать с сетками и направляющими, применять маски и кадрировать изображения. Вы познакомитесь со стилями и компонентами, которые упрощают работу, и научитесь адаптировать свои макеты.

Ну что, давайте отвечать на ваши вопросы:

— Интерфейс программы Figma.

— Графический редактор Figma.

— Основные инструменты Фигмы.

— Направляющие в Фигме, как включить направляющие в figma. Сетка в Фигме. Как убрать сетку в Фигме.

Подсказка: [Ctrl]+[G] или [Ctrl + Shift + 4] — показать/скрыть сетку

— Кадрирование в Фигме. Маска в Фигме.

— Стили в Фигме.

— Компоненты в Фигме (как сделать компонент в Фигме).

— Варианты в Фигме (как в Фигме сделать варианты).

— Адаптивность и инструмент Constraints в Фигме.

— Как нарисовать в Фигме. Рисуем тестовый макет. Верстка сайта в Фигме

Уточнение от меня. На видео автор вручную перемещает соседние одинаковые блоки. Но в Фигме есть очень удобная функция, которая помогает упростить жизнь в разы. На скриншоте из видео показываю эту фишку: когда вы выделяете соседние блоки и они уже выровнены вдруг с другом, то появляются кружочки, как я нарисовала на скриншоте. Очень удобная штука. позволяет просто поменять местами элементы, без лишних телодвижений.

— Быстрые клавиши в Фигме

Список горячих клавиш Figma:

Быстрые (горячие) клавиши значительно ускоряют процесс работы в Фигма и над проектом в целом. Рекомендую запомнить самые основные сочетания клавиш, но если что, их всегда можно подсмотреть в Фигме. Для этого нажмите на значок вопроса в нижнем левом углу редактора и выберите Keyboard Shortcuts или нажмите быстрые клавиши [Ctrl]+[Shift]+[?].

[Cmd]+[\] или [Ctrl]+[\] — скрыть/показать панели инструментов
[Cmd]+[0] или [Ctrl]+[0] — показать 100% масштаб макета (1:1)
[Ctrl]+[G] или [Ctrl + Shift + 4] — показать/скрыть сетку
[Shift]+[R] — показать/скрыть линейки (и направляющие)
[F] — создать фрейм
[R] — инструмент прямоугольник
[T] — инструмент текст
[Cmd]+Click или [Ctrl]+Click — позволяет выделить конкретный слой в группе слоев
Чтобы увидеть расстояние в пикселях от одного объекта до другого, выделите один объект, зажмите [Option] или [Alt] и наведите курсором на другой объект.
Чтобы выделить несколько слоев, зажмите [Shift]+ Click по тем слоям, что нужно выделить. Если слой, который нужен, находится в группе слоев, удерживая [Shift] зажмите [Cmd] или [Ctrl] + Click по тому объекту, который нужно выделить.
[Cmd]+[G] — группировать слои
[Shift]+[Cmd]+[G] — разгруппировать слои
[Opt]+[Cmd]+[G] или [Alt]+[Cmd]+[G] — создать фрейм из выделенного объекта или группы объектов
[Opt]+[Cmd]+[K] или [Alt]+[Ctrl]+[K] — создать мастер-компонент
[Shift]+[Cmd]+[O] или [Shift]+[Ctrl]+[O] — сделать слой векторным
[Cmd]+[E] или [Ctrl]+[E] — упростить векторный слой
[Shift]+[H] — повернуть по горизонтали

— Как собрать макет для верстки в Фигме. Как передать из Фигмы в разработку? Как передать проект Фигма?

— Плагины для Фигма. Где найти и как установить?

Список интересных плагинов.

Unsplash https://www.figma.com/community/plugi… Первое, что рекомендую установить, это плагин изображений с ресурса unsplash.com. Можно сразу вставлять красивые изображения в свой дизайн. Разрешено бесплатно использовать, как в своих собственных, так и в коммерческих проектах.

Iconfy https://www.figma.com/community/plugi… Более 40 000 векторных иконок, которые можно использовать в своем дизайне. 50 с лишним наборов, которые включают Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji и т.п.

Insert Big Image https://www.figma.com/community/plugi… Как мы уже знаем, фигма ресайзит изображения разрешением более 4096px. Этот плагин позволяет вставлять в фигму большие картинки без потери размера и качества. Он автоматически разрезает их на необходимые куски и группирует слои.

Content Reel https://www.figma.com/community/plugi… Генерирует контент для ваших проектов: аватарки, иконки, текст.

User Profile https://www.figma.com/community/plugi… Позволяет отображать красивые сгенерированные аватары в макете.

Figmotion https://www.figma.com/community/plugi… Figmotion – инструмент для анимации проектов в Figma.

Mapsicle https://www.figma.com/community/plugi… Интегрирует карты Mapbox в дизайн вашего проекта. Удобно, когда вам нужно показать блок с картой в макете.

Map Maker https://www.figma.com/community/plugi… Еще один плагин с картами. Добавляет настоящую масштабируемую карту Google.

Image Palette https://www.figma.com/community/plugi… Генерирует палитру цветов на основе выбранного изображения.

Image Tracer https://www.figma.com/community/plugi… Переводит изображение из растра в вектор. Только для ч/б изображений.

SPELLL https://www.figma.com/community/plugi… Проверяет орфографию, как в Google Docs.

Styler Генерирует стили на основе выбранных слоев.

arc Возможность сделать текст по кругу или изогнуть в любом направлении.