Настройка Figma
для Формли
Пошаговое руководство по интеграции библиотеки компонентов в ваш дизайн-процесс. От импорта файла до финальной верстки макетов с соблюдением строгих сеток.
Шаг 1: Импорт
файла библиотеки
Базовый файл библиотеки весит 4.2 МБ и содержит 85+ компонентов. Для начала работы вам нужно добавить его в ваш проект.
Откройте панель Assets (Ctrl+Alt+A) и нажмите кнопку «+» в правом верхнем углу. Выберите Import from URL и вставьте ссылку на файл «Formli System v2.0.fig».
После импорта вы увидите папку «Formli UI», содержащую разделы: Grid, Typography, Colors и Components. Не удаляйте папку «Styles» — она содержит глобальные настройки текста и цветов.
Проверить версию файла →Шаг 2: Настройка
Auto Layout
Сила Формли заключается в адаптивности. Каждый компонент обернут в Auto Layout с жесткими правилами отступов.
Мы используем базовую единицу сетки (Space Unit) в 8px. Все внутренние отступы (padding) внутри кнопок, карточек и полей ввода кратны 8px (8, 16, 24, 32).
При изменении размера контейнера компоненты автоматически перестраиваются. Убедитесь, что свойство Resizing установлено в «Hug contents» для строк и «Fill container» для колонок.
- • Gap: 16px между элементами списка
- • Padding: 24px внутри карточек
- • Radius: 4px (строгий стиль)
Шаг 3: Использование
Variants
Система состояний реализована через Variants. Это позволяет переключать состояния элементов интерфейса без дублирования слоев.
Каждый интерактивный элемент (кнопки, инпуты, чекбоксы) имеет свойства:
Default
Hover
Active
Disabled
Error
Для изменения состояния используйте панель Properties справа. Не меняйте свойства напрямую на слое, если вы не создаете новую ветку дизайна.
Частые ошибки новичков
Игнорирование сетки
Самая частая ошибка — сдвиг элементов «на глаз». Всегда привязывайте объекты к направляющим 12-колоночной сетки. Свободное перемещение разрушает визуальный ритм.
Прямое редактирование
Не меняйте шрифты или цвета внутри компонента напрямую. Используйте свойства компонента (Instance Settings), чтобы сохранить связь с мастером.
Нарушение ритма
Не используйте отступы 5px или 13px. Система работает на модуле 8px. Используйте значения 8, 16, 24, 32, 48 для сохранения визуальной чистоты.
Нужна помощь с интеграцией?
Наши технические консультанты помогут настроить библиотеку под ваш рабочий процесс за 30 минут.