12 ---blog
12 ---
остальное
Личный кабинет

Как сделать прототип сайта в Figma: инструменты и возможности редактора

pageblock_iconО дизайне
pageblock_icon23 августа 2023
pageblock_icon1998 просмотров
pageblock_iconсредняя
pageblock_icon20 минут
Поделиться

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

Для чего нужна Figma

Фигма полезна всем, кто связан с дизайном и разработкой. Она подходит для прототипирования, создания интерфейса, векторных изображений, презентаций, юзабилити-тестов, логотипов.

Для чего нужна Figma.png

Прототипы. В Фигме удобно делать прототип страниц со структурой расположения отдельных блоков, изображений, кнопок, меню и т.д. Отрисованные страницы сайта можно связать между собой, адаптировать их к разрешениям разных устройств.

Интерфейсы. Фигма позволяет отрисовать все иконки, формы, кнопки, раскрывающиеся блоки и анимировать их.

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

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

Юзабилити-тест. В Фигме можно протестировать прототип до его передачи разработчикам. Это позволяет сразу исправить критические ошибки, проверить удобство использования страниц и кнопок.

Логотипы. В Фигме можно создавать не только иконки и кнопки, но и полноценные логотипы.

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

Совместная работа в Figma

Одна из причин популярности Figma – возможность совместной работы. Проекты доступны для просмотра всем членам команды. Любой из них может изменять дизайн, оставлять комментарии к проекту и просматривать историю версий.

Совместная работа в Figma.png

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

Как начать пользоваться Figma

Чтобы начать создавать дизайн в Figma, нужно зарегистрироваться на официальном сайте программы figma.com. Вы можете выбрать бесплатный тариф с ограниченным набором функций или платные пакеты с расширенными возможностями. Figma не ограничивает пользователей из России в использовании инструмента, но не принимает оплату с российских карт. 

Как начать пользоваться Figma.png

Сервис можно использовать в режиме онлайн, а также скачать десктопную программу или мобильное приложение со страницы figma.com/downloads. Чтобы проверять корректность отображения прототипов на мобильных устройствах, скачайте на смартфон приложение Figma Mirror (Android/iOS).

Интерфейс Figma

Интерфейс Figma разделяется на инструменты для работы с графическими изображениями и на менеджер файлов. 

Менеджер файлов

Менеджер файлов содержит настройки профиля и проектов.

Менеджер файлов.png

Профиль. В настройках профиля можно изменить имя, установить аватарку, настроить пароль и email. Здесь же есть опции смены тарифа и возможность при необходимости удалить аккаунт Figma.

Поиск. В поиске можно найти нужные файлы и проекты. 

Последние файлы. В Фигме работает автосохранение, и все изменения отображаются в истории. Последние открытые файлы сохраняются в соответствующем блоке. Все сохраненные файлы отображаются во вкладке Recent.

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

Новый файл. Создать его можно через кнопки Drafts или New File. Для удобства файл лучше сразу переименовать. 

Команда. Фигма позволяет работать в команде, но в бесплатной версии в проекте могут участвовать только два человека. Чтобы начать совместный проект, нажмите на New Team и придумайте команде название. Чтобы добавить участника, пригласите его присоединиться к проекту по электронной почте.

Проекты. Проект – это папка, в которой хранятся все принадлежащие к ней файлы. Бесплатная версия позволяет создать до трех папок проектов, платный тариф снимает это ограничение. Внутри одной команды также можно создать несколько проектов, для этого нужно нажать на New Projects. 

Редактор файлов

Редактор содержит инструменты для работы с файлами. Он включает в себя три области: рабочую область, панель инструментов и панель слоев.

Редактор файлов.png

Поиск. Элемент Search поможет в поиске пунктов меню, если вы забыли нужную вам команду. 

Панель File. Панель предлагает инструменты манипуляции с файлами: создание, импорт из Sketch, сохранение и просмотр истории изменений, а также отдельный пункт для его экспорта в формате PDF. 

Панель Edit. Эта панель нужна для работы с элементами дизайна в файле. Чтобы применить к элементу команду, его нужно выделить. Тогда его можно будет скопировать как код CSS, SVG или PNG-файл с помощью Copy As. Чтобы вставить скопированный элемент в левом верхнем углу другого объекта, воспользуйтесь командой Paste Over Selection. 

Чтобы создать несколько объектов одного цвета, примените команду Set Default Properties – скопируйте цвет нужного объекта, а следующие элементы будут автоматически в него окрашены. 

1 - Set-Default-Properties.gif

Цвет отдельного объекта можно скопировать пипеткой Pick Color. Цвет выделенной точки на рабочей области будет установлен в настройку Fill у выделенного слоя.

2 - Pick-Color.gif

Группа команд Select All with подсвечивает все похожие объекты: с одинаковыми свойствами, заливкой, шрифтами, эффектами и т.д.

3 - Select-All-with.gif

Панель View. Панель просмотра позволяет масштабировать макет, за это отвечают команды Zoom In/Zoom Out. 

4 - Zoom-In-Zoom-Out.gif

Функция Rules отображает линейку и вытягивает направляющие.

5 - Rules.gif

Чтобы увидеть, как будет выглядеть объект на экране, посмотрите на него в пикселях с помощью команды Pixel Preview. 

7 - Pixel-Preview.gif

Для расширения рабочей области скройте панель слоев и интерфейс функцией Layers Panel, Show/Hide UI.

8 - Show-Hide-UI.gif

Панель Preferences. Позволяет управлять пользовательскими предпочтениями. С помощью пунктов Snap to Geometry, Snap to Pixel Grid, Snap to Objects настраивается привязка к геометрии / объектам / сетке. 

6 - Snap-to.gif

7 - Pixel-Preview.gif

8 - Show-Hide-UI.gif

Функция Highlight Layers on Hover подсвечивает мелкие элементы дизайна при наведении на них курсора. 

9 - Highlight-Layers-on-Hover.gif

Команда Keyboard Zooms into Selection позволяет масштабировать макет относительно выбранного на экране элемента.

10 - Keyboard-Zooms-into-Selection.gif

Инструменты для работы с графикой Figma

Часть интерфейса Figma содержит инструменты для работы с дизайном: изображениями, фигурами, шрифтами, слоями.

Инструменты для работы с графикой Figma.png


Фреймы.

Фрейм (артборд) – это основной элемент в виде законченного документа. Фреймом может быть завершенный дизайн страницы сайта или макет экрана приложения. Можно выбрать предложенные программой размеры фрейма или задать собственный. 

Фрейм объединяет внутри себя объекты и слои. Их можно сгруппировать или разбить на еще более мелкие сочетаниями клавиш. Чтобы объединить объекты во фрейм, используйте сочетание Ctrl+Alt+G для Windows или Cmd+Opt+G для MacOs. 

11 - объединение-объектов-в-фрейм.gif

Фреймы разбиваются сочетанием Ctrl+Shift+G для Windows или Cmd+Shift+G для MacOs, 

12 - разбить-фрейv.gif

а группируются с помощью команды из меню Object → Group Selection или сочетанием клавиш Ctrl (Cmd) + G.

13 - group-selection.gif

Для выравнивания объектов по оси X/Y или между элементами используйте правую панель инструментов. 

Готовый фрейм скачивается одним файлом. Перед этим убедитесь, что объекты не выходят за пределы фрейма, иначе они не отобразятся на макете. 

Модульная сетка.

Модульная сетка в Figma позволяет упорядочить и выровнять все элементы дизайна страницы. Оптимальный формат – модульная сетка из 12 колонок, но вы можете задать любое удобное вам количество. Чтобы настроить сетку, нужно нажать на «+» в блоке Layout Grid справа. Настраиваются цвет колонок, уровень прозрачности, отступы между колонками и по бокам от экрана. 

14 - grid.gif

Чтобы добавить вертикальный ритм, нужно еще раз нажать на «+» в блоке Layout Grid.

15 - add-grid.gif


Векторные формы.

Для дизайна векторных объектов используйте инструмент Shape Tool. С его помощью отрисовывают иконки, логотипы и другие векторные изображения. Основные формы, доступные в редакторе – это прямоугольник, линия, треугольник, стрелка, круг, звезда. Их можно вытягивать в произвольной форме или сделать объект правильной формы с помощью зажатой клавиши Shift. Чтобы растянуть объект из центра, нажимайте Alt.

16 - shape-tool.gif

В Figma есть все возможности для работы с объектами: изменение расположения и цвета, растяжение по оси X/Y, скругление углов с помощью инструмента Corner Radius,

17 - corner-radius.gif

изменение толщины линий в пункте Stroke.

18 - stroke.gif

Раздел Effects позволяет добавить фигуре тень или размытие.

19 - effects.gif

Кривые.

Pen Tool – это инструмент для рисования кривых линий, несложных иконок и графики.

20 - pen-tool.gif

Подробные и детальные иконки лучше нарисовать в Photoshop или Sketch.

Дополнительная опция Bend Tool позволяет скруглять кривые линии. 

21 - bend-tool.gif

С помощью Paint Bucket можно закрашивать закрытый контур. 

22 - paint-bucket.gif


Изображения.

В макет можно добавлять изображения или через панель File → Place Image или с помощью перетаскивания картинки с рабочего стола компьютера. Figma воспринимает изображения не как отдельные объекты, а как shape – фрейм-прямоугольник, изменяемый параметрами Fill, Fit, Crop, Tile. 

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

23 - fill.gif

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

24 - fit.gif

Инструмент Crop позволяет обрезать картинку. 

25 - crop.gif

Узор или паттерн создаются с включенным параметром Tile.

26 - tile.gif

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

Градиент добавляется через значок «+» в панели свойств. Доступно четыре вида градиента: 

Linear (Линейный) 

27 - lianer.gif

Radial (Радиальный)

28 - radial.gif

Angular (Угловой) 

29 - angular.gif

Diamond (Ромбовидный).

30 - diamond.gif

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

Векторные объекты можно использовать в качестве масок. Чтобы сделать маску, создайте объект и перенесите слой ниже фотографии. Выделите оба слоя и кликните на Object → Use as mask.

31 - use-as-mask.gif

Фигма поддерживает формат SVG, но вставляет изображение как фрейм. Перейдите в слои, объедините векторные объекты в группу клавишами Ctrl+G и перетяните их выше фрейма.

Эффекты и маски.

Figma позволяет работать с заливкой фреймов и текстовых слоев. Инструменты заливки находятся в левой панели свойств. Выберите цвет, прозрачность и тип заливки. Всего есть шесть типов заливки: сплошной цвет (Solid), линейный градиент (Linear), радиальный градиент (Radial), угловой градиент (Angular), радиальный с четырьмя лучами (Diamond), изображение (Image). По умолчанию для объекта выбран режим ровной заливки Solid.

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

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

Текст.

В Figma доступны шрифты Google Fonts. Есть возможность дополнить их своими шрифтами в десктопной версии или через браузер, но тогда придется установить Font Installers. Набор инструментов для работы с текстом стандартный: начертание, размер, выравнивание, высота строки, отступ между параграфами и красная строка.

Тип текстового блока изменяется в меню Advanced Type. Всего есть три типа:

width – ширина текстового блока подстраивается под контент, 

32 - Advanced-Type---width.gif

height – высота текстового блока подстраивается под контент,

33 - Advanced-Type---height.gif

fixed – для блоков фиксированной ширины.

34 - Advanced-Type----fixed.gif  

Figma позволяет перевести шрифт в кривые с помощью команды Flatten и двойного клика на текст. 

35 - flatten.gif

Результат можно сохранить в формате .svg и вставить в дизайн.

Компоненты.

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

Чтобы сделать объект или группу объектов компонентами, их нужно выделить, а затем нажать на Create Component или применить сочетание клавиш Ctrl+Alt+K. Цвет слоя компонентов станет фиолетовым. При этом родительский компонент будет помечен иконкой с 4 ромбами, а дочерние – иконкой с одним ромбом.

36 - Create-Component.gif

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

37 - Компоненты.gif

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

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

Стили. 

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

Сохраните шаблон из компонентов и стилей, чтобы создать собственную дизайн-библиотеку для будущих проектов. 

Текст. Создайте отдельные стили для заголовков, параграфов, подписей и тегов. Вы можете настраивать шрифт, начертание, выравнивание и т.д. Параметры стиля задаются в правой панели свойств. 

38 - стили-текст.gif

Цвет. Создайте стили с заливкой в основных цветах дизайна, подпишите их названия и укажите код цвета.

39 - стили-цвет.gif

Эффекты. Создайте стили размытия, тени слоя или фона.

40 - стили-эффекты.gif

Дополнительные возможности

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

  • Chart и Charts – генерируют графики и диаграммы по заданным значениям.

  • Table Creator – создание таблиц по заданным параметрам.

  • Material Symbols – набор редактируемых иконок и эмодзи. 

  • Iconify – набор стоковых иконок.

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

  • Fishtext in Russian – генерация текстов Lorem Ipsum на кириллице.

В инструменте Keyboard Shortcuts настраиваются горячие клавиши. В меню горячих клавиш синим будут подсвечены используемые комбинации, а серым – те, которыми вы не пользуетесь. 

Фреймы из Figma экспортируются в удобном для вас размере и формате. Иконки можно сохранить в формате .svg, изображения – в .jpeg или .png, а макетам и масштабируемым векторным объектам подойдет формат PDF.

Начало работы в Figma

Начать работать с Фигмой очень просто. Вы можете воспользоваться шаблонами для создания разных графических элементов или самостоятельно создать новый файл. 

Работа с шаблонами в figma 

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

41 - шаблоны.gif

Создание нового файла в figma 

Работа с новым файлом позволит раскрыть все возможности Фигмы и создать дизайн любого продукта. 

Определите монтажные области. Перед началом работы в Figma определите монтажные области. Возможно, вам их понадобится несколько, особенно в том случае, если вы делаете прототип сайта с несколькими страницами. Самую верхнюю область сделайте вашим UI-kit. Эта область особенно полезна, если проект большой и над ним работают несколько дизайнеров. Для маленьких проектов с небольшой командой он не обязателен.

42 - Монтажные-области.gif

В UI-kit сохраняют все повторяющиеся графические элементы дизайна: кнопки, формы, поля. В это поле добавляют элементы, которые используются в проекте несколько раз. Это позволяет при необходимости вносить изменения во все элементы сразу и не тратить время на поиск родительского компонента. UI-kit позволяет, во-первых, сохранить единообразие всех элементов, во-вторых, сэкономить время на их изменение и в-третьих, облегчить другим дизайнером ориентацию в макете проекта. 

43 - ui.gif

Кроме UI-kit, определите монтажную область проекта. Если это, например, макет посадочной страницы, может потребоваться несколько областей под размеры экранов компьютеров, мобильных устройств и планшетов. 

44 - Монтажные-области-2.gif

Для удобства лучше сразу переименовать экраны. В название включите их разрешение, номер страницы и ее название. 

Выберите модульную сетку. Модульная сетка – это горизонтальные, вертикальные и диагональные линии и блоки заданной ширины. Она определяет вид макета, помогает организовать пространство и элементы внутри него. В Фигме есть разные виды модульных сеток, которые можно объединять – это делает работу с макетами очень удобной.

Сетка Uniform grid состоит из одинаковых равномерно распределенных полей по всей поверхности фрейма – как в тетради в клетку. Размер клеток можно задать самостоятельно, хотя по умолчанию он 10 на 10 пикселей.

45 - grid 2.gif

Сетка Column Grid состоит из вертикальных колонок с отступом.

46 - columns.gif

Сетка Row Grid состоит из строк и делит макет горизонтально.

47 - raws.gif

Чтобы включить сетку, выделите фрейм, с которым работаете, и на панели настроек нажмите напротив блока Layout Grid плюсик. По умолчанию включится сетка Uniform grid, но вы можете выбрать и настроить любые в неограниченном количестве.

Для всех сеток задается количество колонок Count, ширина колонок Width, межколоночный отступ Gutter и отступ от края макета Margin. При этом Figma позволяет создавать неограниченное количество сеток в пределах одного фрейма. 

48 - grid settings.gif

Выбор цвета. Чтобы дизайн выглядел единообразно, определите основные цвета и укажите их UI-kit. В дальнейшем вы сможете их изменять или добавлять новые, также вносите эти изменения в UI-kit. Так вы сможете отслеживать и контролировать оттенки, которые используете. Если вы дадите доступ к вашей работе другому дизайнеру, он также сможет легко сориентироваться в том, какие цвета в дизайне вы используете. 

Компоненты. Кнопки, логотипы, формы – вносите все их сначала в UI-kit, а затем дублируйте в нужные места. Если вам потребуется что-то изменить в дизайне, просто отредактируйте родительскую кнопку, а дочерние изменятся вместе с ней. При этом если вам будет нужно поменять внешний вид только одной дочерней кнопки, вы сможете сделать это без изменения всех остальных. 

Сохраняйте в UI-kit состояния компонентов, даже если используете их не везде. Это поможет легко ориентироваться в документе, и не искать нужную кнопку по всем экранам. 

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

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

Как работать с цветом в Figma

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

49 - fill-2.gif

Чтобы скопировать цвет, воспользуйтесь инструментом «Пипетка» – она находится в панели выбора цвета. Кликните пипеткой по цвету, в который хотите покрасить фигуру. Вы получите код этого цвета и сможете использовать его в макете. 

2 - Pick-Color.gif

Как добавлять картинки в Figma

Логотипы, баннеры, картинки вставляют в макет несколькими способами:

  • перетащить картинку в макет;

  • открыть меню File, а затем выбрать Place image;

  • если нужно вставить картинку из интернета – просто скопируйте ее и вставьте в Фигме горячими клавишами Ctrl + V;

  • вставить картинку из сайта unsplash.com можно с помощью специального плагина Unsplash. Он позволяет свободно использовать тысячи изображений, размещенных на сайте. 

Как сделать кнопки в Figma

Кнопки на сайтах обычно делают со скруглением. При этом они могут быть цветными или прозрачными. Чтобы добавить кнопке обводку, нажмите на нее и в правой панели напротив надписи Stroke кликните иконку плюсика. Задайте ширину для линии обводки, например, 2 px. Вверху бокового меню добавьте скругление. Впишите значение, например, 4. 

Теперь вы можете вписать в кнопку текст. Для удобства не забудьте про функцию Auto Layout. С ее помощью размер кнопки будет изменяться под размер текста.

51 - кнопки.gif

Как работать с текстом в Figma

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

Если текст нужно разместить внутри фигуры или кнопки, Фигма сама покажет, где центр. Также можно центрировать текст, зажав shift и нажав на текст. В боковом меню появится возможность выбрать выравнивание по центру, по горизонтали и вертикали.

Как добавить иконки с помощью плагинов Figma

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

Один из популярных плагинов для иконок – это, например, Iconify. Чтобы добавить его, перейдите в раздел Community, а затем в Plugins. Откроется строка поиска. Введите название плагина, который ищете – Iconify, а когда найдете, нажмите на Install.

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

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

Заключение

Figma – это онлайн-редактор для создания прототипов и макетов сайтов или приложений, разработки интерфейсов, создания векторных изображений. Редактор пригодится дизайнерам, разработчикам, маркетологам и всем тем, кто работает с дизайном изображений. Возможности Фигмы почти не ограничены, а многочисленные плагины расширяют ее функционал. 

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

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

Чтобы эффективно работать с Фигмой, разберитесь с назначением основных элементов веб-дизайна: фреймов, кривых линий, эффектов и масок, компонентов, стилей. Из них состоят прототипы, логотипы, кнопки. Основные инструменты редактирования в Figma перечислены в статье. Эти знания помогут создавать дизайн простых макетов,, элементов интерфейса. Когда вы разберетесь с основными возможностями Фигмы, сможете эффективно использовать ее в работе. 

Дополнительные возможности.png

Скидка на разработку сайта 15%
при оставлении заявки на разработку до 29.02.2024
Поставить лайк
Добавить комментарий
Ваше имя и E-mail не будут опубликованы.
Отправляя данные, вы разрешаете обработку персональных данных и соглашаетесь
с Политикой конфиденциальности.
Получить коммерческое предложение в WhatsApp