Самоучитель по Figma
2026-02-21 18:13 Diff

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

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

В нашем спецпроекте — всё, что вам нужно знать о Figma.

9 марта Figma отменила подписки для пользователей из России. На момент публикации бесплатная версия графического редактора работает.

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

Рассказываем о базовых эффектах и показываем, как за две минуты сделать «матовое стекло».

Как добавить изображение на макет и отредактировать его без Photoshop.

Как работать с изображениями

Зачем нужно и как пользоваться

Как настроить и использовать

В чём преимущества Figma перед другими редакторами и почему ей стоит пользоваться.

Что такое Figma: возможности и принципы работы

Рисуем мяч для регби, хитрим с наложением слоёв и избегаем «мятых» линий.

Как рисовать векторные изображения

Рассказываем, как её настроить и использовать сразу в нескольких макетах.

Как работать с модульной сеткой

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

Глитч, голограмма и неоновое свечение.

Зачем они нужны и как их рисовать.

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

Варианты элементов интерфейса

Каждый раз делать разн��е состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.

Пошаговая инструкция, которая поможет грамотно поменять цвета в интерфейсе.

Заранее отловить ошибки в сценариях использования своего приложения — довольно сложно. Прототип решает эту проблему, а в Figma собрать его очень просто даже без программистов.

Как сделать красивые переходы в макете приложения.

Кнопки, прокрутка и поп-апы

Как сделать прототип интерфейса в Figma, чтобы показать его клиенту.

Как самостоятельно проверить макет прямо в телефоне, не привлекая к этому программистов.

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

Создаём рабочий чекбокс, радиокнопку и всплывающее меню с умной анимацией.