Что такое Figma и где в ней работают
Figma — облачный редактор, в котором рисуют интерфейсы сайтов и приложений, баннеры, презентации и прототипы. Файлы живут на серверах Figma, поэтому один и тот же макет открывается в браузере, в настольном приложении и на телефоне, а коллеги видят правки в реальном времени.
Интерфейс только на английском, и это первое, что мешает новичку. Но названий, которые нужно запомнить, немного: Frame, Layer, Auto layout, Component и Prototype. На них держится всё остальное.
Пять понятий, без которых не обойтись
- Frame (фрейм) — контейнер-«монтажная область». Экран телефона, слайд, баннер — это фреймы. Инструмент вызывается клавишей F, справа сразу предлагаются готовые размеры под iPhone, Android, десктоп и соцсети.
- Layer (слой) — любой объект: прямоугольник, текст, картинка. Список слоёв слева, свойства выбранного слоя справа.
- Auto layout — режим, в котором элементы внутри фрейма сами выстраиваются в строку или столбик с заданными отступами. Кнопка, которая растягивается под текст, — это автолейаут. Включается сочетанием Shift+A.
- Component — многоразовый элемент. Меняете главный компонент, и все его копии в файле обновляются.
- Prototype — вкладка справа, где экраны связываются переходами: по клику на кнопку открывается следующий фрейм.
Первый макет пошагово
Создайте файл
На главной странице нажмите New design file. Черновики на бесплатном тарифе не ограничены по числу.
Поставьте фрейм
Нажмите F и выберите размер справа, например Desktop или iPhone. Это ваш экран.
Разметьте блоки
Прямоугольником (R) обозначьте шапку, первый экран и блоки ниже. Не стремитесь к красоте — сначала структура.
Добавьте текст
Клавиша T, клик по холсту — и печатайте. Шрифт, размер и начертание задаются справа в разделе Typography.
Соберите кнопку
Напишите текст кнопки, выделите его и нажмите Shift+A. Задайте заливку и скругление — кнопка будет подстраиваться под длину надписи.
Вставьте картинки
Перетащите файл изображения прямо на холст или в нужную фигуру.
Проверьте прототип
На вкладке Prototype протяните связь от кнопки к другому фрейму и нажмите кнопку просмотра.
Как не утонуть в слоях
Главная беда новичка — сотня безымянных слоёв Rectangle 1, Rectangle 2. Называйте фреймы по смыслу: «Главная», «Шапка», «Кнопка заявки». Двойной клик по имени слоя в левой панели позволяет его переименовать.
Группируйте связанные элементы (Ctrl+G на Windows, Cmd+G на Mac) и чаще используйте автолейаут вместо ручной расстановки. Тогда при правке текста не придётся двигать полстраницы вручную.
Что учесть в России в 2026 году
Бесплатный тариф Starter работает, но с ограничениями: три дизайн-файла в командном пространстве и неограниченные личные черновики. Платные тарифы Figma новым клиентам из России не продаёт — это прямо написано в её справке, так что оплатить Professional российской картой не выйдет.
В конце мая 2026 года пользователи в России жаловались на перебои с доступом к сайту и приложению. Если Figma у вас не открывается, это не обязательно ошибка на вашей стороне — подробнее о доступе в разделе «Без VPN» на этом сайте.
Горячие клавиши, которые экономят часы
Большую часть времени в Figma съедает не рисование, а переключение инструментов. Выучите десяток сочетаний — и работа ускорится вдвое. На Mac вместо Ctrl используется Cmd.
- V — выделение и перемещение, F — фрейм, R — прямоугольник, O — эллипс, T — текст.
- Shift+A — обернуть выделенное в автолейаут.
- Ctrl+G — сгруппировать, Ctrl+Alt+K — создать компонент.
- Ctrl+D — дублировать объект со сдвигом.
- Shift+1 — показать весь холст, Shift+2 — приблизить выделенное.
- Удерживайте Alt и наведите курсор на соседний объект — Figma покажет расстояние до него в пикселях.
Когда быстрее через ИИ-агента
Figma — инструмент для тех, кто готов учиться дизайну. Если нужен не навык, а результат — баннер, макет главной, презентация или карточка товара, — задачу можно описать словами ИИ-агенту LeanTech. Он отдаст PNG, PPTX, PDF или готовую страницу HTML, работает на русском и оплачивается картой РФ.
Чего агент не делает: он не работает внутри вашего файла Figma, не правит чужие компоненты и не заменяет дизайнера на сложной продуктовой системе. Это способ быстро получить готовую картинку или страницу, а не редактор.