Как сделать флоу в фигме

Обновлено: 30.06.2024

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

№ 1. Как скачать Фигму, установить и настроить её?

  1. Нажимаем Sign Up, кликая по кнопке в шапке;
  2. Вводим свой email и пароль;
  3. Указываем данные, такие как фамилия и имя;
  4. Отвечаем на вопрос “для чего планируется использовать сервис?” и в раскрывающемся списке выбираем ответ. Если собираетесь использовать для дизайна, оставляем “Design”.
  5. После выполнения всех пунктов переходим на главную страницу, нажимаем на свое имя и оказываемся в профиле, здесь есть три вкладки: Teams, Plugins и Settings. В нашем случае выбираем вторую вкладку и нажимаем ссылку “Download the latest desktop app”. Пример всех действий показан на скриншоте ниже:

Ждем завершения скачивания и начинаем установку. Процесс инсталляции мало чем отличается от других программных пакетов. Если при запуске у пользователя возникнут проблемы, первое, что следует сделать, это сверить системные требования своего ПК.

Операционная система (ОС)

Десктопная программа запускается в зависимости от установленной системы. Например, если это Windows, то убедитесь, что версия не старше 8.1. В случае, когда на компьютере стоит MacOS, то здесь требования – версия не старше 10.10 (Yosemite). Linux – допустима любая версия.

Если планируете использовать сервис в браузере, то здесь уже нужно сверяться с цифрами, которые обозначены в настройках. Для корректной работы подойдут версии:

  • Google Chrome – ver 58+
  • Mozilla FireFox – ver 57+
  • Safari 11+
  • Microsoft Edge – 16+

Технические характеристики ПК

Для создания графики рекомендуется видеокарты не старше 2012 года, на более старых возможно тоже будет работать, но это будет существенно сказываться на производительности системы.

После того, как пользователь успешно прошел регистрацию в сервисе, его может заинтересовать следующий вопрос.

№ 2. Как настроить Фигму?

Все изменения производятся в личном кабинете. Для этого следует перейти в профиль, затем вам станет доступно сменить имя, email и password, а также предложение включить двухфакторную аутентификацию, что позволит установить двойную защиту на аккаунт.

Есть еще функции обновления плана, создание профиля сообщества, установка настроек, связанных с уведомлением.

В системе доступен токен и библиотека. Некоторые опции могут оказаться сложными для понимания, так как интерфейс полностью на английском, но с этим кое-что можно сделать.

№ 3. Как сделать фигму на русском языке?

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

При первом знакомстве с сервисом новичок увидит панель управления и несколько кнопок. Если сравнивать с фотошопом, то главное отличие в том, что здесь минимальный набор инструментов, поэтому запомнить все гораздо проще. Часто бывает так, что стандартного функционала недостаточно, тогда в ход вступают плагины. Их создают программисты для своих проектов, чтобы увеличить стандартные возможности. На момент написания статьи было выпущено 420 дополнений к веб-сервису. Чтобы добавить новые функции, plugin нужно подключить.

№ 4. Как установить в фигме плагин?

Первым делом создадим новый проект. На главной странице щёлкнем по +New, находится эта ссылка в правом верхнем углу, затем нас перебросит в редактор. Нажимаем на гамбургер-меню и выбираем из раскрывающегося списка пункт Plugins, нас интересует Manage. Именно там находятся все утилиты, дающие новые функции.

Переходим во вкладку. Здесь можно увидеть уже активные подпрограммы, а ,чтобы установить дополнительные утилиты, нужно перейти по ссылке.

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

Когда требуется решить конкретную задачу, то первым делом следует искать plugin под задачу в интернете.

Запустив свой первый project на рабочей области, вы скорее всего будете использовать фрейм. Наверняка вам захочется разместить примитивы. Чтобы ваши фигуры смотрелись ровно, с соблюдением всех отступов, предлагается воспользоваться сеткой. Как это сделать – рассказываем ниже.

№5. Как включить в фигме сетку и линейку?

Данный инструмент находится в свойствах фрейма, в правом окне, называется “Layout Grid”. Нажав плюсик, у вас вся область покроется красными линиями. Цвет можно отрегулировать и установить, например, оранжевый. Все это делается в настройках Grid. Там же выбираются такие параметры, как Колонки (Columns) и Ряды (Rows).

Кроме всего этого, может понадобиться линейка, она пригодится для выравнивания по линии. Чтобы на экране появилась линийка, нужно её включить, для этого перейдите в меню view->Rulers, как показано на картинке.

Появятся две полоски с цифрами, вертикальная и горизонтальная, чтобы добавить линию, нужно щелкнуть мышкой по линейке и удерживая переместить на frame, затем на области появится “line”. В дальнейшем line можно переместить на удобную позицию. Здесь мы дали ответ, как сделать в фигме сетку и расположить объекты.

При создании крупных проектов, иногда приходится взаимодействовать с мелкими деталями и, чтобы подробнее рассмотреть контейнеры, может понадобиться приблизить область, и тут перед начинающим дизайнером встает вопрос: как увеличить объект в фигме?

Для этого существует зумер. Пункты по настройке зума, соответственно, находятся в меню в разделе View.

Чтобы отдалить или приблизить, воспользуемся первыми двумя кнопками Zoom In и Zoom out, горячие клавиши “+” и “-”. Когда требуется “приблизить на 100 %”, то включаем третий параметр. Если “полностью показать дизайн”, то активируем четвертый пункт. Пятый, selection, отображает только выделенный контейнер. Например, если выбрать rectangle и потом нажать Zoom to selection, то камера сконцентрируется на квадрате, то же самое и с любым другим контейнером.

Увеличивать можно, используя колесико мыши. Когда будете прокручивать, то удерживайте клавишу CTRL.

При разработке макетов важно уметь быстро взаимодействовать с контейнерами, поэтому необходимо знать, как выделять элементы в фигме . Чтобы выбрать несколько объектов из группы, щелкайте по ним, удерживая Shift. В левой панели есть вкладка Layers, с её помощью тоже можно выбирать отдельные блоки. Если хотите ускорить процесс своей работы, то используйте горячие клавиши.

  • Shift+Tab – переходит на следующий контейнер, предыдущий должен быть выбран заранее мышкой.
  • Enter – чтобы провалиться внутрь и отобрать все содержимое, нажмите “Ввод”. Помните, что frame при этом должен быть выбран.
  • Shift+Enter – это обратный способ. Он позволяет подняться на уровень вверх и сделать отмеченным главную область. Запомните, что в этом случае один или несколько блоков должны быть выбраны.
  • Main menu->Edit->Select All – отмечает все объекты. Если вдруг потребуется отобрать только с одинаковым цветом заливки, то в этом случае “same fill”.

№6. Как сделать текст в Фигме?

При разработке прототипа вам понадобятся надписи, из которых сформируется меню. Для этих целей существует Text, чтобы вставить текстовое поле, нажмите на кнопку в панели управления или же горячую клавишу T.

Щелкайте по области и начинайте вписывать название. Иногда может понадобиться разнообразить шрифты, поэтому следует загрузить дополнительные fonts (шрифты). Работая в десктопной версии программы на ПК, у вас автоматически пойдет подгрузка всех встроенных на компьютере шрифтов. Когда речь заходит о том, как установить шрифт в Фигму, то в этом случае, достаточно скачать нужный font, найти специальную папку на ПК (воспользовавшись поиском), и туда скинуть новые текстовые стили.

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

Как добавить шрифт в Фигму ?

Здесь нет ничего сложного: переходим в панели Settings аккаунта пользователя и ищем кнопку “Download installer to enable local fonts”. Пример всех действий показан на скриншоте:

Чтобы сделать профессиональный дизайн, придется прорабатывать разные технические моменты. Для этих целей существуют примитивы, которые предлагается использовать для создания рисунков и логотипов. Например, одним из веб-инструментов является линия, с её помощью можно чертить прямые и делать захват края, когда требуется отрегулировать наклон.

Так как работа преимущественно состоит из графики, соответственно, нам придется разнообразить веб-дизайн интересными иллюстрациями из интернета.

№ 7. Как вставить в Фигме картинку?

В интернете предлагается широкий доступ к изображениям. С помощью “гугл” и “яндекс картинки” можно подыскать фото на любую тематику. После скачивания фотографию следует добавить к себе в программу. Лучше всего это сделать, просто перетащив её на рабочую область.

Другой вариант воспользоваться командой “Place Image (Ctrl+Shift+K)”.

В открывшемся окне выбираем мышкой подходящие файлы, удерживая при этом Shift, нажимаем открыть. Файлы прикрепятся к курсору, после каждого щелчка на frame, они будут размещены. Можно воспользоваться Place All, для быстрого добавления.

Создавая прототип, рекомендуется уметь вырезать объекты из jpg-файла. Например, когда потребуется создать логотип для компании. Если посмотреть в интернете знаменитые лого, то можно обнаружить некоторые закономерности, они все включают в себя примитив – круг, квадрат или треугольник, остальное – это просто название компании.

Сейчас создадим logo гостиницы, для этого возьмем подходящее фото в интернете и уберем background, оставим только здание.

№ 8. Как вырезать в Фигме объект?

Чтобы отобразить только постройку, нужно применить Tools Pen. Перо подходит, так как способно обеспечить высокую точность. Начинаем прокладывать линии вокруг здания.

Если посмотреть на вкладку Layers, то видно, что у нас получился “Vector 1”. Воспользуемся параметром Fill в правой панели, чтобы сделать заливку.

Vector1, который отображается в слоях – это маска, с помощью неё мы удалим background и оставим только здание. Перетащим маску, чтобы она отображалась на верхней ступени и не закрывала “отель”. Щелкнем на vector1 в слоях и применим Use to mask (Ctrl+Alt+M).

Нам удалось скрыть background. Иногда веб-дизайнер может столкнуться с ситуацией, когда объект вырезан неровно и часть скрыта под маской. В этом случае можно применить одну хитрость. Добавить на линии “вектора” усики, за которые можно потянуть и сдвинуть границу. Делается это следующим образом. В первую очередь, следует закрыть основную картинку от редактирования, повесив замок. После того, как изображение заблокировано, двойным щелчком нажимаем на Vector1. Появится новая панель редактирования.

Выбираем перо, как показано выше, и добавляем усик, щелкая по границе вектора, и рисуем в направления внутрь картинки. Чтобы закрепить , жмем дважды мышкой или на кнопку “Done”.

Дальше хватаем точку и двигаем в нужном направлении, настраивая выравнивание. Когда удалось добавить Mask, нужно соединить все слои.

№ 9. Как объединять в Фигме?

Для этих целей существует группировка, чтобы её сделать, нужно выделить оба объекта и нажать комбинацию клавиш CTRL+G. Другой вариант – воспользоваться контекстным меню, нажав правой кнопкой мыши Group Selection.

Чтобы разгруппировать элементы, щелкаем на объединенном объекте и CTRL+SHIFT+G. В контекстном меню появится новый пункт Ungroup, он тоже используется для разъединения. Иногда может потребоваться создать компоненты. Они нужны, чтобы добавлять большое количество шаблонов с одинаковыми свойствами, но измененными некоторыми составляющими.

Примером может служить кнопка, у которой проставлены одинаковые размеры, но цвет и имя должны отличаться. Для объединения в компонент, выберем два блока и нажмем CTRL+ALT+K или на верхней панели соответствующую кнопку, там также есть раскрывающий список, где предлагается использовать Create Multiple Components. Он позволяет сделать компоненты из всех отмеченных объектов.

Сейчас применим группировку (CTRL+G) и объедим здание с “маской”. Теперь создадим логотип рекламы “отеля”. Чтобы здание отображалась в круге. Нарисуем эллипс и заполним его цветом.

Расположите его ниже Group 1, сделайте копию и перетащите рядом. Ctrl+C и Ctrl+V.

Ко второй группе снова применим маску.

Выступающие края у первой группы (Group1) следует убрать, а именно срезать углы.

№10. Как обрезать в фигме картинку?

Сначала найдем в Group img1. Убедитесь, что в img1 замочек открыт, иначе не удастся срезать края. После отметки иллюстрации сверху появится Crop Image, нажимаем на него. Отобразятся захваты вокруг картинки, хватаем нижний и перемещаем наверх. Последовательность всех действий показана ниже:

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

Таким образом, используя маски и срезы можно создавать logo для компании, конечный результат:

В свободном пространстве эллипса можно написать названия отеля.

№11. Как сделать в Фигме фон или убрать его вообще?

Иногда дизайнеру нужно оставить некоторые предметы, а background удалить или заменить. Разумеется, подойдет вариант, описанный выше, способ с помощью пера и маски, но есть более действенный способ. Для этих целей существует plugin, который называется Remove BG. Он работает на нейронных сетях и умеет автоматически вырезать фон. Чтобы быстро его найти, вбиваем название в google и переходим на веб-сайт.

Нажимаем Install, теперь, если перейти в веб-сервис, появится Remove Bg, там есть два пункта “Run” и “Set Api Key”. Сначала перейдем в Set Api Key. Появится инструкция из двух шагов, выбираем ссылку и переходим на вебсайт, чтобы пройти регистрацию.

Посещаем сайт и регистрируемся, в верхнем левом углу жмем кнопочку Login/Sign Up. Переходим во вкладку и заполняем данными, указываем почтовый адрес и пароль. Есть две галочки, первая обязательная, вторая – это запрос “присылать уведомления, рассылки о новых функциях и предложениях”.

После заполнения щелкаем по Sign up, на почту придет письмо с активацией. Если не пришло, проверьте папку “Спам”, иногда по ошибке почта попадает туда. Переходим по ссылке и активируем аккаунт, теперь можно пользоваться функционалом. Зайдем в My Dashboard и направимся в Api Key, затем нажимаем на Show, появится ключ Api.

Копируем ключ и возвращаемся в плагин, открываем окно и вставляем key, потом щелкаем по save:

Чтобы протестировать, как работает Remove BG, найдем подходящую картинку в интернете, например, “Люди”.

Применим к фото plugin->Run и посмотрим результат, в итоге должна получиться фотография девушки без лишних объектов. Теперь сделаем background, например, офис, и наложим на картинку. При этом делайте так, чтобы слой office находился ниже в слоях, чтобы не перекрывал фото девушки. Пример:

Таким образом, с помощью плагина накладывается и убирается фон. Достаточно удобный инструмент Remove BG, так как нет надобности вырезать отдельные объекты с помощью “пера”, все делает утилита автоматически.

Каждый прототип обычно сопровождается кнопками. Они создаются с помощью обычных примитивов: квадратов, эллипсов и, соответственно, сверху накладывается надпись. Создадим контейнер с название button1. Цвет и другие настройки можно назначить в Design. Делаем объединение в компонент, придумываем название.

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

№ 12. Как сделать в Фигме градиент?

Кроме заливки в палитре цвета присутствует такой параметр как gradient. Чтобы добавить его, нужно выбрать стиль в раскрывающемся списке: Solid, Linear, Radial, Angular и Diamond. Ниже под списком можно обнаружить цветовой ползунок, на нем отмечаются цвета, которые помогут придать другой оттенок линиям.

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

Обсудим некоторые вопросы, которые интересуют пользователей figma.

№13. Как удалять в фигме?

Выделяем любой контейнер и нажимаем клавишу на клавиатуре del или delete.

№14. Как скопировать в фигме?

Чтобы сделать сразу несколько копий, потребуется произвести действие на выбранном субъекте CTRL+C.

№15. Как вставить в фигме?

Когда элемент скопирован, его нужно вставить, для этого существует быстрый способ CTRL+V.

№16. Как отменить в фигме последнее действие?

Чтобы сделать шаг назад, используются комбинации клавиш CTRL+Z.

№17. Как сохранять в фигме?

После завершения проектных работ, нужно сделать сохранение. В системе уже заранее предусмотрено autosave, все копии хранятся в истории. Чтобы занести в историю еще копию, нажмите Ctrl+Alt+S.

№ 18. Как экспортировать из фигмы?

Когда требуется сделать Export конкретного jpg файла или группы из нескольких image, в этом случае в правой панели нужно воспользоваться опцией Export, нажать плюсик, и выбрать формат сохранения, после этого нажать Export Group.

В левом верхнем есть дополнительные пункты для сохранения и показа истории версий копий (Show Version History).

В этой статье мы ответили на вопросы, как работать в фигме , сохраняться, рисовать новые объекты и примитивы, делать группировку и вставлять фотографию поверх другого фона.

Дизайн приложения в Figma - стили и маски

Как назначаются текстовые стили в Figma? Как поместить изображение в форму и создать дизайн галереи, используя маски? Узнайте это и многое другое, продолжив работу над приложением Proper Nutrition вместе со мной.

Данная статья является продолжением цикла статей, посвященных разработке мобильного приложения Proper Nutrition:

При создании страницы будем ориентироваться на ранее разработанный прототип .

Рисуем дизайн первой страницы приложения в Figma

Стили текстовых заголовков

Если у вас не включены линейки – включите их (Shift + R).

Как в Photoshop вытяните горизонтальную направляющую, обозначив границу status bar и вертикальные направляющие с отступами 24 px слева и справа. Это 3 клеточки по 8px в нашей сетке.

Дизайн приложения в Figma - стили и маски

Дизайн приложения в Figma - стили и маски

Используем стандартный шрифт Google Fonts – Comfortaa 14 Bold.

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

В группе Text на панели свойств щелкните на значок Style и нажмите + (Create Style)

Дизайн приложения в Figma - стили и маски

Задайте имя стиля – H2.

Дизайн приложения в Figma - стили и маски

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

Дизайн приложения в Figma - стили и маски

Открепить данный стиль от текста и изменит его параметры можно, нажав иконку Detach Style напротив названия стиля.

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

Галерея картинок (слайдер)

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

Заливка фигуры растровой картинкой

О загрузке изображений в Figma мы уже говорили, когда создавали дизайн страницы SplashScreen .

Сейчас поместим изображение другим методом. Сделаем заполнение фигуры растром.

Таким образом фигура будет служить рамкой для фотографии.

Под заголовком разместите прямоугольник. Потянув за точки рядом с углами – закруглите их. Размер прямоугольника – 325 x 216. Это соотношение сторон 3×2.

Дизайн приложения в Figma - стили и маски

На панели свойств найдите пункт Fill (заполнить) и вместо цвета выберите Image (изображение).

Дизайн приложения в Figma - стили и маски

В появившемся окне нажмите на кнопку Choose Image и выберите изображение. (Я, например, скачала изображения на одном из бесплатных фотостоков )

Там же в настройках можно поменять режим заполнения фигуры. Их 4:

  • Fill (по умолчанию). Изображение полностью заливает фигуру и подстраивается под большую из сторон. Если изменить размер прямоугольника, картинка будет менять свои размеры. Центр растра совпадает с центром фигуры.
  • Fit: Картинка заполняет фигуру и подстраивается под меньшую из сторон. Если пропорции фото и изображения не совпадают – появятся пустоты.
  • Crop: Изображение вписывается в фигуру в своих точных размерах, а фигура обрезает его. Она служит маской (рамкой) картинки. В этом режиме можно двигать изображение в рамке, зажав CMD (Ctrl)
  • Tile: данный режим используется для заполнения фигуры бесшовными, повторяющимися паттернами.

Мы оставим режим Fill.

Мы специально преобразовали фигуру с картинкой в компонент, так как еще ни раз будем использовать его в нашем проекте.

Кнопки индикаторов изображений на слайдере

Теперь нарисуйте три эллипса с диаметром 8 пикселей, это будут индикаторы переключения картинок на слайдере. Примените к ним следующие настройки:

Дизайн приложения в Figma - стили и маски

Дизайн приложения в Figma - стили и маски

Дизайн приложения в Figma - стили и маски

Блок с описанием картинок на слайдере – изучаем маски

Дизайн приложения в Figma - стили и маски

Заметно, что края этого прямоугольника заходят за фигуру с картинкой. Чтобы этого избежать сделаем следующее:

Дизайн приложения в Figma - стили и маски

Разместите следующий текст с описанием блюда.

Дизайн приложения в Figma - стили и маски

Послесловие

Дизайн приложения в Figma - стили и маски

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

по e-mail или социальных сетях

и мы обязательно опубликуем для вас еще больше полезных бесплатных уроков и материалов!

Для замкнутых векторов в Figma доступна обычная заливка (цветом, градиентом или изображением), но в некоторых случаях требуется выполнить заливку части вектора, или наоборот, частично ее убрать.

Частичная заливка вектора

Частичная заливка вектора

Для этого можно воспользоваться инструментом Paint Bucket, который доступен в режиме редактирования вектора (горячая клавиша B)

Инструмент заливки

Инструмент заливки

Чтобы начать редактировать вектор, либо нажмите на него несколько раз подряд, либо используйте кнопку Edit Object.

Инструмент Edit Object

Инструмент Edit Object

Заливка позволяет точно выбрать области, которые надо залить фоном, либо наоборот сделать прозрачными.

Как устроена цветовая модель в Фигме? Эта программа позволяет видеть цвета в пяти цветовых моделях: HEX, HSB, HSL, CSS и RGB. Переключение между цветовыми моделями влияет только на то, как Фигма описывает цвета, но не влияет на то, как программа их визуализирует.

По умолчанию Фигма представляет значения цвета с помощью шестнадцатеричной модели. Что это значит? Это объединение красного, зеленого и синего цвета - наиболее часто используемых в цветовых моделях. Каждый цвет, отображаемый на мониторе или экране, будет состоять из различных количеств этих трех цветов. Сейчас мы рассмотрим, как на практике работать со цветами в Фигме, и как выглядит шестнадцатеричная модель.

Добавив какой-нибудь объект в правой части панели вам будет доступна настройка цвета. По умолчанию все фигуры имеют серый цвет.

панель управления цветом в Figma

Кликнув на этот раздел, появится панель управления цветом. После выбора цвета, вы просто кликаете на него левой кнопкой мыши. Вы можете выбрать любой оттенок, а также определить его прозрачность. По умолчанию прозрачность составляет 100%.

раздел Color Styles в Figma

Использование стилей – удобная функция, так как с ее помощью вы можете редактировать цвет элементов всего проекта, а не по отдельности каждый. То есть если вы уже создали десятки фреймов (страниц сайтов), в которых используется один и тот же стиль цвета, то при необходимости поменять этот стиль, вам нужно всего лишь выбрать его в данном разделе, и редактировать. После изменений, все элементы, которые имели этот цветовой стиль также примут данные правки.

Использование пипетки в Figma

После того как вы кликните пипеткой на выбранную вами область, созданный элемент станет такого же цвета. Это также удобная возможность получить код найденного вами цвета.

копирование цвета при помощи пипетки

В панели цветов представлен HEX-код, обозначающий шестнадцатеричную систему счисления цвета. Данную строку также можно использовать для того чтобы скопировать код цвета, или наоборот вставить необходимый код оттенка. Также эта панель позволит вам более точно определить оттенок, так как у вас будет возможность менять код по одной цифре.

HEX-код для определения оттенка в Figma

При использовании градиентов цветов, то есть постепенного перехода из одного цвета в другой, вам будут доступны несколько вариантов настроек.

Каждый созданный шейп в этой программе заливается сплошной заливкой. Однако вы всегда сможете изменить стандартные свойства на линейный, ангулярный, круговой, или диамантовый режим.

изменение шейпа в Figma

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

  • Exposure – экспозиция. Это параметр регулирующий количество света.
  • Contrast – контраст. Здесь вы сможете сменить диапазон яркости и плотности изображения.
  • Saturation – насыщенность. Это степень выражения цветов. Чем больше этот спектр, тем ярче они будут.
  • Temperature – температура. При движении шкалы в право, преобладают холодные цвета (синий), а при движении вправо - теплые (желтый).
  • Tint – оттенок. При движении влево преобладает зеленый цвет, а при движении вправо красный.
  • Highlights – освещение. При помощи этой настройки вы сможете приглушать темные или светлые тона, или сделать их еще более насыщенными.
  • Shadows – тени. При помощи этой шкалы детали в тенях можно высветлить, или наоборот сделать более глубокие тени.

параметры редактирования картинки в Figma

Итак, мы рассмотрели, как работать со цветами в Фигме. Эти настройки распространяются на все элементы, с которыми можно работать в программе. Например, по такому принципу меняется цвет текста.

Читайте также: