Проєктування та кодування користувацьких інтерфейсів інколи здаються двома різними завданнями. FigmaFlet допомагає з’єднати ці завдання, перетворюючи дизайни Figma у код Flet, що полегшує втілення дизайнів в життя.
У цьому підручнику ми покажемо, як за допомогою FigmaFlet швидко перетворити ваші дизайни Figma в робочі додатки Flet, економлячи час і зусилля.
Що таке Figma?
Figma — це потужний веб-інструмент для дизайну, який використовується для створення користувацьких інтерфейсів, прототипів та спільних проєктів дизайну. Він відомий своєю простотою у використанні, можливостями для співпраці в реальному часі та можливістю створювати дизайни, які легко можна поділитися та переглядати.
Що таке Flet?
Flet — це відкритий фреймворк Python для створення крос-платформених додатків з багатим інтерфейсом. Завдяки Flet, ви можете створювати веб-, настільні та мобільні додатки без необхідності писати складний фронтенд код.
Передумови
- Базові знання Figma та Flet
- Встановлений Python на системі
- Обліковий запис Figma, якщо у вас немає облікового запису, ви можете створити його.
Крок 1: Налаштування середовища
- Встановіть FigmaFlet з PyPI.
pip install figmaflet
Далі створіть новий проєкт у Figma або відкрийте існуючий. Коли дизайн готовий, вам потрібно дві ключові pieces of information:
- Ключ Figma TOKEN: Цей ключ дозволяє FigmaFlet отримати доступ до ваших файлів Figma. Ви можете створити цей токен в налаштуваннях вашого облікового запису Figma.
налаштування-figma
У налаштуваннях вашого облікового запису Figma виберіть розділ "Security", потім прокрутіть вниз до Personal access tokens і натисніть Generate new token.
генерація-токену-figma
- URL файлу (URL проєкту): Це посилання на ваш конкретний файл Figma. Ви можете знайти це в рядку URL браузера, коли ваш проєкт відкритий у Figma.
urlфайлу_
Крок 2: Використання FigmaFlet
- Метод Gui
Щоб використовувати Gui, виконайте цю команду
python -m figmaflet.gui
Це відкриє GUI для FigmaFlet
FigmaFlet-gui
Заповніть усі поля відповідно. Output PATH — це локальний шлях, де буде збережено ваш проєкт. Потім натисніть GENERATE, згенерований проєкт буде збережено у вказаному Output PATH.
Примітка: Вам потрібно встановити Flet, щоб ви могли запустити згенерований код.
2. Метод CLI
Ви також можете використовувати CLI для генерації коду інтерфейсу.
У вашому терміналі виконайте цю команду.
figmaflet --apitoken YOUR_API_TOKEN --fileurl YOUR_FILE_URL --output YOUR_OUTPUT_PATH
Єдина різниця полягає в тому, що для fileurl вам не потрібно вказувати весь URL, необхідно лише вказати filekey, який міститься в URL проєкту.
file-key
Налаштування згенерованого коду
- Ви можете змінювати згенерований код Flet для власних потреб (наприклад, обробка подій, кілька сторінок тощо).
- Для TextFields вам потрібно буде перейменувати компоненти Figma Rectangle в "textfield", щоб figmaflet розпізнав їх як такі.
Готові втілити свої дизайни з Figma в життя за допомогою Flet?
Почніть з встановлення FigmaFlet і перетворіть свої ідеї дизайнів у додатки на Flet.
Якщо цей підручник був корисним, обов’язково поділіться ним зі своєю мережею та розкажіть іншим, як легко можна з’єднати Figma і Flet.
Для додаткових порад і підказок стежте за мною для наступних підручників!
Додаткові ресурси:
- Документація Figma API.
- Документація та підручники Flet.
- Сторінка FigmaFlet на PyPI.
- GitHub репозиторій Figmaflet
Перекладено з: How To Convert Your Figma design to Flet Code