Фреймворк Luisa — это проект с открытым исходным кодом, который превращает проекты Figma и Quant-UX в полнофункциональные приложения Vue.

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

Фреймворк Luisa использует идею Low-Code для разработки интерфейса и гарантирует, что дизайн остается единственным источником истины. Концепция Low-Code заключается в том, что определенные аспекты приложения проще описать с помощью визуальных инструментов. Отличным примером такого аспекта является пользовательский интерфейс. В любом случае он разработан в графическом инструменте, таком как Figma, Sketch или Framer, так зачем переводить его вручную в код?

Low-Code не означает, что все ваше приложение должно быть визуально смоделировано. Простой код по-прежнему является лучшим выбором для многих аспектов, например, для бизнес-логики или вызовов серверных служб. Фреймворк Luisa решает эти проблемы и тщательно уравновешивает Low-Code и ручное кодирование. Хотя по умолчанию весь дизайн автоматически переводится в HTML, JavaScript и CSS, легко можно подключить бизнес-логику, пользовательские компоненты или перезапись CSS.

В конце руководства вы узнаете, как создать визуально привлекательное приложение Vue.js, не написав ни одной строки HTML или CSS.

Дизайн

Начнем с примера Hello World. Идея проста. Пользователь может ввести свое имя, и когда она нажимает кнопку, ее приветствуют с ее именем. Прежде чем вы сможете начать использовать Luisa, вам нужно создать дизайн в Figma. Самый минимум показан ниже. Есть элемент ввода, кнопка и текстовый элемент для вывода. Элемент ввода состоит из рамки автоматического макета со встроенным текстовым элементом.
«Hello World» на основе дизайна Figma.

Настройка проекта

Когда дизайн готов, вам нужно настроить проект Vue. Лучший способ начать — клонировать наш репозиторий шаблонов для нового старта. Он включает в себя все необходимое и полностью настроен. Прочтите главу Добавить в существующий проект на домашней странице Luisa.cloud, если вы хотите добавить Luisa в существующий проект.

Связывание Фигмы

После того, как вы настроили Luisa, пришло время включить ваш дизайн. Есть два способа сделать это.

  1. Самый простой способ — связать Луизу с «живой» версией в Figma. Связывание проекта выгодно, потому что последний дизайн загружается при перезагрузке страницы. Когда вы что-то меняете в Figma, просто перезагружаете страницу, и дизайн обновляется.
  2. Кроме того, вы можете загрузить файл Figma в свой проект и загрузить все изображения и векторную графику. Страница будет загружаться намного быстрее; однако вам придется повторно загружать все после изменения дизайна. Дополнительную информацию вы можете найти в разделе Развертывание в производство.

Чтобы связать Luisa с Figma, вам нужно передать идентификатор figmaFile и figmaAccessKey, иногда называемый токеном доступа Figma. Идентификатор figmaFile является частью URL-адреса, отображаемого в браузере. Таким образом, если URL-адрес https://www.figma.com/file/abcdefghijkl/My-project, идентификатор файла — abcdefghijkl. Получить figmaAccessKey можно в настройках Figma (Подробности)

Откройте файл src/views/Home.vue и передайте ссылку как объект дизайна.

Теперь вы можете запустить сервер и проверить свои результаты по адресу http://localhost:8080. Вы также запускаете сервер из командной строки (npm run serve), как и любой другой проект Vue.

Использование плагина

Если вы попробуете приложение в браузере, вы не заметите интерактивности. Элемент ввода — это просто DIV, поэтому вы не можете вводить данные в текстовое поле, а также нет никакой реакции на нажатие кнопки. Чтобы изменить это, вам нужно использовать плагин Figma-Low-Code и добавить метаданные в дизайн, чтобы Луиза знала, как отображать элементы, например, для создания реального элемента ввода HTML.

После того, как вы установили плагин Figma, вам нужно запустить его (щелчок правой кнопкой мыши > Плагины > Figma Low Code). Плагин позволит вам установить необходимые метаданные. Для нашего примера Hello World выполните следующие шаги:

1) Выберите элемент, который вы хотите превратить в элемент ввода. В нашем случае текстовый элемент помещается внутрь рамки. Пользовательский интерфейс плагина будет обновлен. Теперь вы можете выбрать правильный тип ввода, в данном случае Поле ввода.

2) Перейдите на вкладку Параметры и введите «имя» в поле Привязка данных. В результате Луиза сохранит весь текст, который вводят пользователи, в переменную с именем «имя».

3) Выберите текстовый элемент, который должен отображать выходное сообщение. Установите в поле Привязка данных значение «результат». Во время выполнения Луиза заменит текст в дизайне значением, хранящимся в переменной «результат».

4) Выберите элемент кнопки и введите «sayHello» в поле Привязка метода. Когда пользователь нажимает на кнопку, Луиза попытается найти метод с именем «sayHello» и выполнить его.

Бизнес-логика

При обновлении браузера можно увидеть, что теперь есть поле ввода и ввести в него данные.

Последний шаг — обработать данные и превратить их в сообщение «Привет, {имя}». Для этого вам нужен доступ к данным Луизы. Это происходит через так называемую viewModel. Добавьте две строковые переменные с именами «имя» и «результат» в модель представления, определенную в файле Home.vue. Кроме того, вам нужно создать метод с именем «sayHello», который будет объединять переменную имени со словом «Hello» и сохранять результат в переменной результата.

Когда вы обновляете браузер, вы можете вводить данные. Нажатие кнопки «Произнести» обновит текстовый элемент рядом с ним.

Глядя на приведенный выше фрагмент кода, можно увидеть, как мало пользовательского кода пришлось написать. Компонент ‹Luisa› отображает весь пользовательский интерфейс, и нужно было реализовать только модель представления и бизнес-логику.

Вы можете найти больше информации о Luisa на https://luisa.cloud. Не забудьте поставить нам звезду на GitHub, если вам понравился проект.