Программа Figma (Фигма)

Одним из главных преимуществ (хотя некоторые посчитают это недостатком) Figma перед другими программами то, что она работает в режиме Online. Это значит если вдруг у вас выключили свет или вы забыли нажать «сохранить», то ваша работа не пропадёт.  Открыть Figma можно как в браузере, так и скачать программу, разницы по функциональности нет.

Так же одним из преимуществ Figma то, что она условно-бесплатна. Есть free версия, возможностей которой вполне хватает дизайнеру.

Ссылку на проект можно передать другим людям и самое главное разработчику. Он сам сможет смотреть все размеры, цвета и шрифты. А самое главное он сможет самостоятельно оттуда все выгружать.

Как выгружать объекты из Figma.

Для этого выделяем наш объект, справа жмем Export, выбираем формат экспорта для изображения JPG или PNG (для экспорта векторного объекта выбираем SVG), далее жмем кнопку Export и сохраняем куда надо наш файл.

skrin01

Как поделиться ссылкой на проект в Figma.

Шаг №1. Жмем кнопку Share

skrin02

Шаг №2. Жмем Copy link, ссылка скопирована.

skrin03

Далее вставляем ссылку в сообщение и отправляем кому захотим. Любой сможет открыть ссылку, но у него будет доступен только режим просмотра.

Чтобы другой человек мог редактировать этот файл необходимо дать ему доступ. Для этого выбираем необходимого нам пользователя.

skrin04

Выбираем can edit. Правда в бесплатной версии допустить к редактированию можно только несколько человек.

skrin05

Так же всегда можно следить, что человек сейчас делает или смотрит в вашем проекте.

skrin06

В Figma есть очень удобная функция выравнивания объектов относительно друг друга. Допустим у нас есть несколько объектов и мы хотим разместить их ровно. Для этого выделяем объекты, нажимаем Tidy Up

skrin07

skrin08

Далее можно задать расстояния, на которых они будут находиться. По ширине и высоте

skrin09

skrin10

Если вам нужно много изображений одного размера

Работа с изображениями в Figma.

В Фигме удобно работать с изображениями. Их можно вставлять в нужный нам размер и вставляем нужное нам изображение.

skrin11

Можем выбрать каким способом будет размещено наше изображение (залито).

skrin12

Fill – все пространство фигуры заполняется изображением.

Fit – изображение вписывается в данную фигуру.

Tile – здесь изображение заполняет фигуру как плитка.

Crop – в этом режиме можно настроить как будет располагаться изображение в фигуре.

skrin13

Синие засечки определяют границы изображения, их можно менять. Изображение можно растягивать и сжимать, двигать в самом заданном пространстве.

Заключение.

Это далеко не все на что способна Figma. Как видим, в не есть много возможностей как работы с изображениями, векторами. Легко и удобно создавать прототип и в последующем дизайн сайта. И самое главное легко передавать в разработку.