Как экспортировать дизайны из 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 дает возможность создавать и тестировать продукты в считанные дни.