В этом обзоре мы расскажем как превратить 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 дает возможность создавать и тестировать продукты в считанные дни.
кому нужен ваш реакт натив?
Блин ну бизнес готов платить например $4000 на обе платформы против $3000 но на одну. Получается $6000 на две платформы против $4000 на реакте. Смотря что делать. Например запись стоматологии или обработка заявок э, ведение клиентов, расписание занятий - с этим реакт адекватно справляется. А если нужно AR и прочие штуки то конечно мимо.
Ау, изобрели flutter с 120 fps.
Медленный, закрытый рн уходит в небытие. И слава богу
Так с анимациями в RN уже давно проблем нет. Про 120 FPS ещё слишком мало устройств. Представьте что у вас уже есть бизнес логика на реакте в вебе. И вместо того чтобы использовать ее, вы будете с нуля писать ее на флаттер.
Пробовал флаттер, что-то много строк кода получается. В моем кейсе была примерно такая разница 120-140 строк RN против 200-250 Флаттер. Вряд ли бизнес готов будет заплатить за лишнюю работу просто ради того, чтобы у него заявка на планшете на складе появлялась со скорость не 60 FPS а 120. На планшете за $200-$300 ага. Возможно вы имеете ввиду рынок B2C. Но у внутренних корпоративных приложений некоторые другие требования и стоимость разработки для автоматизации бизнес процесса должна быть ниже вот и все. RN решает эту задачу. А так да флаттер радует производительностью тут вопросов нет. Вы ещё не забывайте что Google не может использовать чужие фреймворки поэтому он пилит свои. И они не всегда лучше конкурентов. Просто у них нет выбора, они не могут использовать например React и RN в своих продуктах. Facebook в любой момент поменяет пользовательское соглашение или что нибудь ещё и все. Риски для Google слишком высоки, поэтому то и существует Angular и прочие.
Комментарий недоступен
Я про цены на фрилансе, не студий. Текущая средняя цена разработки RN 1500 рублей в час
Кто пробовал уже? Насколько чистая получается верстка экрана?
Попробовал, не понравилось. Я руками намного компактнее и понятнее код для вёртски наберу. Но авторам респект за старание.
Из забавного. В макете который я ей скормил есть иконка локации, а прога целый компонент из этого слепила с MapView и кучей всего что там даже близко не нужно.
Жаль, надеялся что хотя бы можно его использовать как визуальный редактор, ну раз такое дела то будем по старинке.
Хорошая новость для тех кто запускает первый небольшой бизнес... Для начала пойдет, но со временем все равно придется переделывать уже 'руками'
Вопрос знатокам, возможно ли экспортировать уже созданный прототип из фигмы где настроена анимация и навигация внутри прототипов?