Как экспортировать дизайны из Figma в React Native код - Sizze Plugin

В этом обзоре мы расскажем как превратить Figma макеты в готовый продукт без кодинга. В этом нам поможет плагин, который выгружает готовые дизайны в React Native код.

Sizze - это плагин от создателей Sizze.io, который позволяет интерактивно экспортировать макеты интерфейса мобильного приложения из Figma в код React Native без потери качества и структуры исходных файлов.

Главные плюсы

- Точная конвертация из дизайна в код
- Чистота кода
- Поддержка flexbox
- Быстрая имплементация в существующий проект

Возможности плагина

Auto-layout

Все компоненты, собранные в режиме Auto Layout, превращаются в элементы, которые легко использовать для построения динамических списков и подключения бэкэндов.

Constraints

Создатели разработали алгоритмы адаптации макетов для всех экранов приложений. Просто добавив свойство constraints, можно увидеть насколько легко можно адаптировать размеры под разные девайсы.

Прокрутка и сетка

Создавать динамический контент можно прямо из прототипов. Все, что необходимо сделать для добавления анимаций, это написать свойства элементам, чтобы получить результат без какого-либо программирования.

Возможности экспорта

С помощью Sizze плагина можно выгрузить SVG элементы с высокой детализацией, а также экспортировать шрифты

Сколько стоит плагин?

Плагин предоставляет три бесплатных скачивания без подписки. Оформляя подписку на плагин, вы также получаете доступ к sizze.io, в котором можно разрабатывать собственные дизайны из готовых шаблонов в самом приложении и импортировать готовые макеты из Фигмы. Месячная подписка с неограниченным составляет 22 $, также есть продвинутый тариф за 169$. Если платить за год вперед дают скидку 20%.

Как им пользоваться ?

Скачать плагин можно в Figma Community или перейдя по ссылке sizze.io/plugin. После активации плагина вам откроется окно, в котором вы сможете скопировать код выбранного макета.

Далее на сайте expo.dev необходимо создать новый snack, в котором нужно вставить скопированный ранее код. После проверки кода на разных девайсах остается скачать его в zip.

Второй вариант выгрузки кода: перейти на sizze.io платформу, в котором также можете внести изменения, проверить адаптацию на разных девайсах и скачать уже готовый код в React Native.

Вывод - кому подойдет плагин ?

Плагин подходит абсолютно всем: начинающим разработчикам, UI&UX дизайнерам, командам и студиям по разработке мобильных приложений для быстроты и облегчения процесса создания приложений. Ноукод разработка может удовлетворить некоторые потребности в продукте и сэкономить время и ресурсы. Стоит подумать о платформах без кода, даже если у вас достаточно денег. Они могут помочь вам быстрее принимать решения, проверять идеи и быть на шаг впереди ваших оппонентов. Плагин Sizze дает возможность создавать и тестировать продукты в считанные дни.