FigCraft для Mac: собираем макет с привычками Figma

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

Сравнение с Figma здесь не случайно: разработчик прямо указывает её рабочие приёмы как ориентир. При этом FigCraft является самостоятельным приложением с открытым кодом. Локальный проект хранится файлом на компьютере, для обычного редактирования не требуется учётная запись. Звучит привлекательно, особенно если хочется спокойно собирать макет на Mac и самому решать, когда его кому-то передавать.

Для первого знакомства полезнее собрать небольшой экран, чем сразу переносить всю библиотеку продукта. Подойдёт карточка события: картинка, название, дата, место и кнопка. На ней видно почти всё, что важно в повседневном интерфейсном дизайне. Как меняется высота после длинного названия? Что происходит с отступами? Сохраняется ли кнопка там, где её ожидает пользователь?

В FigCraft для этого есть auto layout. Содержимое можно располагать с заданными промежутками, а размеры связывать с доступным местом или объёмом текста. Практическая проверка проста: заменить короткое название длинным, увеличить ширину карточки и убрать изображение. Если приходится вручную двигать каждый элемент после любого изменения, стоит вернуться к структуре фреймов и правилам размера.

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

Повторяющиеся элементы в FigCraft можно оформлять как компоненты с вариантами. Для кнопки это могут быть обычное состояние, недоступное действие и вариант с другим текстом. Главный вопрос при знакомстве: сохраняются ли нужные изменения в экземплярах, когда обновляется основной компонент. Это важнее количества кнопок в демонстрационном файле.

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

Цвета лучше связывать через стили и переменные. Тогда светлая и тёмная темы становятся двумя наборами значений, а не двумя независимыми рисунками. При проверке важно смотреть не только на фон. Часто слабые места находятся в подписях второстепенного текста, границах полей и недоступных кнопках, которые хорошо видны в одной теме и теряются в другой.

У FigCraft заявлены связи между экранами, события и анимированные переходы. Чтобы оценить эти возможности, достаточно короткого пути: список событий, страница события, подтверждение регистрации. Такой прототип помогает проверить логику переходов, не отвлекаясь на десятки второстепенных экранов.

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

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

Самое существенное ограничение FigCraft находится на границе с привычной экосистемой. Разработчик обозначает импорт .fig как best effort. Это означает попытку перенести поддерживаемые данные, а не обещание получить полностью идентичный проект. Программа находится на стадии alpha, поэтому открывшийся файл ещё не доказывает, что все компоненты, эффекты и связи сохранились.

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

Плагины Figma здесь не работают: у FigCraft собственная система расширений. Если повседневный процесс зависит от конкретного плагина, это нужно учесть заранее. Аналогично стоит отдельно оценить экспорт SVG, PNG или PDF на тех объектах, которые вы собираетесь передавать дальше.

Скачать FigCraft для macOS можно на mac-soft.ru.