Figma → React Native (через Expo Emulator)
В Codigma появился встроенный предпросмотр в стиле Expo Emulator прямо в IDE. Это значит, что вы можете взять экран из Figma и быстро запустить его как React Native-приложение. В этом гайде — самый простой способ получать чистый результат и спокойно итератировать.
Перед началом
📖 Короткий гайд, который реально помогает
Качество экспорта зависит от структуры вашего файла в Figma. Если ещё не читали — начните отсюда: Как получить лучший результат с плагином Codigma для Figma. Там про Auto Layout, нейминг и то, что именно выбирать — мелочи, которые сильно влияют на результат. Читать гайд →
Коротко: Codigma не «угадывает», что вы имели в виду. Он читает слои и правила раскладки. Чистая Figma обычно даёт чистый React Native-вывод.
Что значит «Figma → React Native через Expo Emulator»
Обычно инструменты “design → React Native” просто генерируют код — а дальше вам всё равно нужно поднимать проект и настраивать эмулятор, чтобы вообще что-то увидеть. Со встроенным предпросмотром Expo Emulator в Codigma вы можете запускать UI прямо внутри Codigma. Это быстрый способ проверить сетку, отступы и общий вид, прежде чем идти в полноценную интеграцию.
Схема простая: экспорт → запуск → правки → запуск снова. Обратная связь за минуты, а не вечные переключения между инструментами (и борьба с настройками).
С чего начать (простой рабочий процесс)
Лучшие результаты получаются, когда экспорт повторяемый и максимально «в фокусе». По одному экрану за раз — почти всегда идеальный вариант.
Рекомендуемый процесс
- Выберите один экран в Figma (один фрейм / один экран на странице).
- Экспортируйте через Codigma, выбрав React Native.
- Откройте встроенный предпросмотр Expo Emulator в Codigma и запустите результат.
- Если что-то выглядит не так, экспортируйте меньшую часть: половину экрана, карточку, шапку, элемент списка.
- Держите ассеты лёгкими (оптимизируйте картинки), чтобы предпросмотр загружался быстро и работал стабильно.
- Повторяйте: экспорт → запуск → правки структуры → экспорт снова.
💡 Совет
Если экспорт целого экрана получается «грязным», не мучайтесь. Возьмите маленький компонент (например, карточку или секцию), экспортируйте его и собирайте экран из блоков.
Что важнее всего для аккуратного предпросмотра
Так код получается чище, и проще понять, что изменилось между итерациями.
Если экран сложный — экспортируйте часть (пол-экрана, шапку, карточку, список). Чёткие границы = более аккуратный код.
Большие картинки замедляют предпросмотр. Лёгкие ассеты обычно дают более быстрый рендер и меньше сюрпризов.
Понятные фреймы и стабильные отступы помогают экспортеру правильно «снять» правила раскладки.
Предпросмотр в Expo Emulator отлично подходит для быстрой проверки UI. Дальше вы переносите код в свой реальный React Native-проект.
Частые проблемы (и быстрые решения)
«Предпросмотр тормозит»
- Сожмите и уменьшите изображения.
- По возможности избегайте «тяжёлых» цепочек blur/shadow.
- Попробуйте сначала экспортировать меньшую секцию.
«Не похоже на Figma»
- Проверьте, что вы выбрали целостный блок (целый экран-фрейм или целый компонент).
- Попробуйте экспортировать половину экрана или более маленький компонент.
- Приведите отступы в порядок в Figma (стабильные padding + gap обычно работают лучше всего).
«Хочу более точное совпадение»
- Начните с базовых блоков: карточки, шапки, кнопки, элементы списка.
- Когда блоки выглядят хорошо — объединяйте их в экраны.
FAQ
Нужно экспортировать всю страницу целиком?
Нет. В большинстве случаев лучше экспортировать по одному экрану. Если экран тяжёлый — начните с маленьких частей.
Предпросмотр Expo Emulator — это «на продакшен»?
Скорее это быстрый чек “всё ли выглядит нормально?”. Он помогает быстро итератировать, прежде чем переносить код в реальное приложение на React Native.
Итоги
Встроенный предпросмотр Expo Emulator в Codigma делает “Figma → React Native” намного быстрее. Экспортируйте по одному экрану, держите картинки лёгкими, а если результат не радует — выберите меньшую часть и попробуйте снова. Через пару итераций вы сможете запускать свой дизайн как React Native-приложение, не выходя из Codigma IDE.
🎯 Следующий шаг
Хотите получать более чистый экспорт сразу? Начните с этого гайда: Как получить лучший результат с плагином Codigma для Figma →