10 функций Figma, которые дизайнеры не замечают (а зря)
Большинство дизайнеров использует Figma на 30% от её возможностей. Не потому что ленятся — просто функции появляются на каждой Config и теряются в release notes. Ниже — десять конкретных вещей, которые прямо сейчас доступны в вашем Figma и реально меняют рабочий процесс.
Всё, о чём пойдёт речь, — это не экспериментальные флаги и не платные плагины. Стандартный план, стандартный интерфейс.
1. Variables + Modes: два варианта дизайна в одном файле
Variables появились в Figma в 2023-м, но большинство команд до сих пор использует их только для spacing — или не использует вообще. Главная их ценность — это Modes.
Как работает: открываешь Variables panel (Shift+X), создаёшь коллекцию, добавляешь Mode. Например, Light и Dark. Или Brand A и Brand B. Каждая переменная получает два значения — по одному на режим. Потом переключаешь режим на любом фрейме через правую панель, и весь дизайн моментально меняется.
Клиенту можно показать светлую и тёмную тему без двух отдельных файлов. Дизайну не нужны задвоенные компоненты. При сравнении вариантов на ревью достаточно одного экрана.
Одна коллекция — один набор компонентов — любое количество вариаций.
2. Именование компонентов через слэш
Простейший приём, который дизайнеры не используют, пока библиотека не разрастётся до 300 компонентов. Тогда начинается боль.
Figma читает слэш в названии компонента как иерархию. Назови компонент Button/Primary/Default — и в панели выбора компонентов появится дерево: Button → Primary → Default. Соответственно Button/Primary/Hover, Button/Secondary/Default, Button/Secondary/Disabled выстраиваются в читаемую структуру.
Это не магия — просто парсинг строки. Но если начать с первого компонента, через полгода работы с библиотекой вместо плоского списка из 200 названий будет нормальное дерево.
Переименовать существующие компоненты — не проблема. Figma автоматически перестраивает иерархию. Instances не ломаются.
3. Grid Auto Layout: двумерные сетки без плагинов
До Config 2025 сделать bento-сетку в Auto Layout означало городить вложенные горизонтальные и вертикальные фреймы вручную. Либо брать плагин.
Теперь есть Grid режим внутри Auto Layout. Выделяешь фрейм, нажимаешь Shift+A (или Add Auto Layout в правой панели) — появляется иконка переключения между Horizontal, Vertical и Grid. В Grid режиме задаёшь количество колонок, gap по осям и минимальный размер ячейки. Figma сама раскладывает контент.
Карточные сетки, галереи, адаптивные layouts — всё держится в одном фрейме. Добавляешь карточку — сетка автоматически перестраивается. Меняешь ширину фрейма — колонки пересчитываются.
Для responsive-прототипов это снимает значительную часть ручной работы.
4. Dev Mode: разработчик видит токены, не hex
Dev Mode включается клавишей D (или переключателем в правом верхнем углу). По умолчанию он показывает размеры, отступы, цвета — всё то, что было в Inspect раньше.
Но есть разница: если ты используешь Variables, Dev Mode показывает не #1A73E8, а color.brand.primary. Не 16px, а spacing.md. Разработчик получает названия токенов, которые напрямую совпадают с CSS-переменными в коде — при условии что система именования согласована заранее.
Это требует одного условия: использовать Variables, не Styles. Цвет, назначенный через Color Style, Dev Mode покажет как hex. Цвет через Variable — как токен.
Переход от стилей к переменным займёт время, но после него handoff становится конкретнее. Разработчик не гадает, какой это оттенок синего — он видит имя.
5. Eyedropper захватывает цвет с любого экрана
Маленькая функция, которую регулярно переоткрывают с удивлением.
Нажимаешь I (или кликаешь иконку пипетки при выборе цвета) — курсор превращается в eyedropper. Дальше можно кликнуть не только на объект в Figma, но на что угодно: вкладку браузера, фотографию в другом приложении, системный интерфейс macOS или Windows.
Figma захватывает цвет с любого пикселя на экране. Работает на десктопном приложении. В браузере — ограничения зависят от ОС.
Полезно при работе с референсами, скриншотами клиентских брендбуков или при матчинге цветов с продовой версией сайта.
6. Suggest Auto Layout: Figma сама предлагает структуру
Команда Cmd+Shift+A (Ctrl+Shift+A на Windows) — не просто «применить Auto Layout». Это Suggest режим.
Выделяешь несколько элементов — кнопку, иконку, текст — и нажимаешь комбинацию. Figma анализирует расположение, определяет направление и вложенность, создаёт auto layout фреймы с готовой структурой. Не просто оборачивает всё в один фрейм, а предлагает иерархию с вложенными группами там, где это логично.
Появилось на Config 2024. Особенно выручает при работе с импортированными дизайнами — когда нужно быстро придать структуру чужому файлу или Sketch-переносу.
Результат не всегда идеален, но как стартовая точка — экономит пять минут рутины на каждом компоненте.
7. Variable Scope: переменная работает только там, где нужно
Когда переменных много, дизайнер может случайно применить цвет фона к тексту, или spacing к border-radius. Чтобы этого не происходило, у каждой переменной есть Scope.
Где настроить: Variables panel → правый клик на переменной → Edit variable → раздел Scopes. Там список: Fill, Stroke, Text, Gap, Padding, Corner radius и другие. Отмечаешь только те области, где переменная должна быть доступна.
Если color.background.primary отмечена только как Fill, она не появится в выпадающем списке при попытке применить её к тексту или обводке. Защита от случайных ошибок без дополнительных инструкций команде.
Для дизайн-систем с несколькими дизайнерами — существенная деталь.
8. Multi-edit текста: 40 заголовков за одно действие
Распространённая задача: нужно поменять шрифт на всех заголовках макета. Или увеличить размер у всего body text. Раньше — либо вручную, либо через плагин.
Сейчас: выделяешь несколько текстовых слоёв (Shift+клик или через Edit → Select All with Same Properties), и правая панель переходит в режим Multi-edit. Там доступны все типографические свойства — шрифт, начертание, размер, межстрочный интервал, выравнивание.
Изменение применяется ко всем выделенным слоям одновременно. Содержимое текста при этом не трогается.
Работает и с несколькими объектами разных типов — Figma показывает только те свойства, которые есть у всех выделенных элементов.
9. Figma Make: из дизайна в рабочий код
Figma Make — отдельный режим, появившийся в 2025 году. Его можно найти в меню переключения режимов (рядом с Design и Dev Mode).
Работает в двух сценариях. Первый: пишешь текстовый промпт — «сделай форму регистрации с тремя полями и кнопкой» — и получаешь интерактивный прототип. Второй: берёшь готовый фрейм из дизайна и Figma генерирует из него код — HTML/CSS или React-компонент.
Результат — не скриншот и не статичная разметка. Это кликабельный прототип с реальным поведением или компонент, который разработчик может взять как стартовую точку, а не переписывать с нуля.
Качество кода зависит от сложности компонента. На простых — формы, карточки, кнопки — выходит пригодный для работы результат. На сложных layout'ах потребуется доработка. Но как инструмент для быстрого proof-of-concept или передачи в разработку простых компонентов — это быстрее, чем то, что было до.
10. Arc Tool: дуги и pie charts без плагинов
Почти никто не знает про эту точку. Создаёшь эллипс — и видишь маленькую белую точку на окружности. Если потянуть её мышью, эллипс превращается в дугу.
В правой панели появляются три параметра: Start angle (начальный угол), End angle (конечный) и Ratio (отношение внутреннего радиуса к внешнему — для donut-формы). Всё это можно вводить числами.
Применения: прогресс-бары в круговом формате, pie charts, loader'ы, декоративные дуги в иллюстрациях. Без плагинов, без векторного редактирования, без импорта из другого инструмента.
Функция существует давно. Просто про неё не говорят.
Как получить Figma с документами для бизнеса
Если вы или ваша команда работаете в России и нужна официальная лицензия Figma с закрывающими документами — счётом, актом, возможностью оплаты от юридического лица — это можно оформить через Prodmag.ru.
Мы поставляем лицензионное ПО с полным пакетом документов: договор, счёт, УПД или акт. Подходит для ИП и ООО, принимаем оплату по безналичному расчёту. Доставка лицензии — после подтверждения оплаты.
Оставьте заявку на сайте или напишите в форму обратной связи — уточним актуальные условия и наличие нужного плана.