___
## Оглавление
1. [**Начало работы**](#getting-started-1)
1. [Установить Python](#getting-started-1)
2. [Установить Tkinter Designer](#getting-started-2)
3. [Создать учетную запись Figma](#getting-started-3)
2. [**Форматирование дизайна Figma**](#formatting-1)
1. [Референс](#formatting-1)
2. [Руководство по элементам](#formatting-2)
3. [**Использование Tkinter Designer**](#Using-Tkinter-Designer)
1. [Токен личного доступа](#using-1)
2. [Получение URL-адреса вашего файла](#using-2)
3. [Использование CLI](#using-cli)
4. [Использование графического интерфейса](#using-gui)
4. [**Устранение неполадок**](#Troubleshooting)
<br><br>
# Начало работы <small>[[Наверх](#Оглавление)]</small>
<a id="getting-started-1"></a>
## 1. Установите Python
Перед использованием Tkinter Designer вам необходимо установить Python.
- [Вот ссылка на страницу загрузки Python.](https://www.python.org/downloads)
- [Вот полезное руководство по установке Python в различных операционных системах.](https://wiki.python.org/moin/BeginnersGuide/Download)
*Далее в этом руководстве вы будете использовать установщик пакетов для Python (pip), который может потребовать от вас добавить Python в PATH вашей системы.*
___
<br>
<a id="getting-started-2"></a>
## 2. Установите Tkinter Designer
*Три варианта:*
1. `pip install tkdesigner`
2. Установите [poetry](https:python-poetry.org)
- `poetry new <gui_project_name> && cd <gui_project_name>`
- `poetry add tkdesigner`
- `poetry install`
3. Чтобы запустить Tkinter Designer из исходного кода, следуйте инструкциям ниже.
1. Загрузите исходные файлы для Tkinter Designer, загрузив их вручную или с помощью GIT.
` git clone https://github.com/ParthJadhav/Tkinter-Designer.git `
2. Измените рабочий каталог на Tkinter Designer.
`cd Tkinter-Designer`
3. Установите необходимые зависимости, запустив
- `pip install -r requirements.txt`
- В случае, если pip не работает, попробуйте также следующие команды:
- `pip3 install -r requirements.txt`
- `python -m pip install -r requirements.txt`
- `python3 -m pip install -r requirements.txt`
- Если это по-прежнему не работает, убедитесь, что Python добавлен в PATH.
При этом будут установлены все зависимости и Tkinter Designer. Прежде чем использовать Tkinter Designer, вам необходимо создать файл Figma, следуя инструкциям ниже.
Если вы уже создали файл, перейдите к разделу [**Использование Tkinter Designer**](#Using-Tkinter-Designer).
___
<br>
<a id="getting-started-3"></a>
## 3. Создайте учетную запись Figma
1. В веб-браузере перейдите на [figma.com](https://www.figma.com/) и нажмите «Зарегистрироваться».
2. Введите свою информацию, затем подтвердите свой адрес электронной почты.
3. Создайте новый файл дизайна Figma.
4. Начните создавать графический интерфейс:
- В следующем разделе описано необходимое форматирование входных данных Tkinter Designer.
- [Вот официальная серия руководств по Figma для начинающих.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4)
- [Вот официальный канал Figma на YouTube.](https://www.youtube.com/c/figmadesign/featured)
- [Вот Справочный центр Figma.](https://help.figma.com/hc/en-us)
<br><br>
<a id="formatting-1"></a>
# Форматирование дизайна Figma <small>[[Наверх](#Оглавление)]</small>
## 1. Референс
<br>
### Имена важны!
| Имя элемента Figma | Tkinter элемент |
| --- | --- |
| Button | Button |
| Line | Line |
| Text | Name it anything |
| Rectangle | Rectangle |
| TextArea | Text Area |
| TextBox | Entry |
| Image | Canvas.Image() |
<br>
Код, сгенерированный Tkinter Designer, основан на именах элементов вашего дизайна Figma, и поэтому вам необходимо соответствующим образом называть свои элементы. В Figma переименуйте свои элементы, дважды щелкнув на них на панели «Layers».
___
<br>
<a id="formatting-2"></a>
## 2. Руководство по элементам
<br>
1. **Сначала создайте Frame, который будет служить вашим окном Tkinter.**
<br><br>
2. **Добавление изображений**
- Изображения могут быть созданы с использованием фигур и/или изображений.
- Если вы используете несколько фигур/изображений, вам необходимо сгруппировать их, выделив их все и нажав <kbd>CTRL/⌘ + G</kbd>
- После этого назовите элемент или группу «Image».
<br><br>
3. **Text (обычный текст)**
- Используйте клавишу <kbd>T</kbd>, чтобы активировать текстовый инструмент, затем добавьте текст по желанию.
- Текст не нужно переименовывать для использования в Tkinter Designer.
- Нажмите клавишу <kbd>Return</kbd> или <kbd>Enter</kbd>, чтобы перейти к следующей строке.
<br><br>
4. **Entry (однострочный пользовательский ввод)**
- Активируйте инструмент «Прямоугольник» с помощью <kbd>R</kbd>.
- Отрегулируйте прямоугольник по своему вкусу.
- Убедитесь, что прямоугольник называется «TextBox».
<br><br>
5. **Text Area (многострочный пользовательский ввод)**
- Активируйте инструмент «Прямоугольник» с помощью <kbd>R</kbd>.
- Отрегулируйте прямоугольник по своему вкусу.
- Убедитесь, что прямоугольник назван «TextArea».
<br><br>
6. **Прямоугольник**
- Активируйте инструмент «Прямоугольник» с помощью <kbd>R</kbd>.
- Отрегулируйте прямоугольник по своему вкусу.
- Убедитесь, что прямоугольник назван «Rectangle».
<br><br>
7. **Обычная кнопка**
- Добавьте прямоугольник, который будет служить кнопкой в вашем графическом интерфейсе.
- Необязательно: добавьте текст для кнопки.
- Выберите кнопку (прямоугольник) и любой дополнительный текст, затем сгруппируйте их с помощью <kbd>CTRL/⌘ + G</kbd>
- Назовите группу «Button».
#### Если у вас возникнут какие-либо проблемы, обратитесь к [этому видео](https://youtu.be/Qd-jJjduWeQ).
<br><br>
8. **Скругленная кнопка**
- Добавьте прямоугольник, который будет служить кнопкой в вашем графическом интерфейсе.
- Необязательно: добавьте текст для кнопки.
- Сделайте его закругленным, добавив угловой радиус, выделив прямоугольник и добавив угловой радиус с правой стороны. [Подробнее об этом](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing)
- Создайте прямоугольник того же размера, что и ваша кнопка. Не делайте его закругленным.
- Измените цвет прямоугольника, чтобы он соответствовал фону.
- Теперь переместите вновь созданный прямоугольник под главную кнопку (Прямоугольник).
- Выберите кнопку, прямоугольник и любой дополнительный текст, затем сгруппируйте их с помощью <kbd>CTRL/⌘ + G</kbd>
- Назовите группу «Button».
#### Если у вас возникнут какие-либо проблемы, обратитесь к [этому видео](https://youtu.be/Qd-jJjduWeQ).
<br><br>
<a id="Using-Tkinter-Designer"></a>
# Использование Tkinter Designer <small>[[Наверх](#Оглавление)]</small>
## Необходимые входные данные
Чтобы использовать TKinter Designer, вам необходимо собрать некоторые данные.
<a id="using-1"></a>
### 1. Токен личного доступа
1. Войдите в свою учетную запись Figma.
2. Перейдите в «Settings» \ «Настройки».
3. На вкладке **Account** прокрутите вниз до пункта **Personal access tokens**.
4. Введите имя вашего токена доступа в форму ввода и нажмите <kbd>Enter</kbd>.
5. Будет создан ваш личный токен доступа.
- Скопируйте этот токен и сохраните его в безопасном месте.
- **У вас больше не будет возможности скопировать этот токен.**
<a id="using-2"></a>
### 2. Получение URL-адреса файла
1. В файле дизайна Figma нажмите кнопку **Share** на верхней панели, затем нажмите **🔗 Copy link**
<a id="using-cli"></a>
## Использование интерфейса командной строки
Использовать CLI так же просто, как установить пакет и запустить инструмент CLI.
### Из PyPi
Вы можете использовать приведенную ниже команду в качестве проверки, заменив $FILE_URL и $FIGMA_TOKEN своими данными. Если у вас нет токена и ссылки, обратитесь к [**Разделу «Необходимые входные данные»**](#using-1).
```bash
pip установить tkdesigner
tkdesigner $FILE_URL $FIGMA_TOKEN
```
### Из исходников
Чтобы использовать CLI из исходного кода, вам необходимо клонировать репозиторий, а затем следовать инструкциям ниже.
Вы можете использовать приведенную ниже команду в качестве проверки, заменив $FILE_URL и $FIGMA_TOKEN своими данными. Если у вас нет токена и ссылки, обратитесь к [**Разделу «Необходимые входные данные»**](#using-1).
```bash
$ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN
# Чтобы узнать больше о том, как использовать cli, передайте флаг --help
$ python -m tkdesigner --help
```
### Выходные данные
По умолчанию код графического интерфейса будет записан в build/gui.py. Вы можете указать выходной путь, используя флаг «-o» и указав путь.
Чтобы запустить сгенерированный графический интерфейс, перейдите в каталог, в котором вы его создали (например, build/), и запустите его так же, как и любой графический интерфейс Tkinter.
```bash
cd build
python3 gui.py
```
<a id="using-gui"></a>
## Использование графического интерфейса
### Откройте Tkinter Designer, прежде чем выполнять следующие шаги.
<br>
1. Откройте графический интерфейс TKinter Designer с помощью
```bash
cd Tkinter-Designer
cd gui
python3 gui.py
```
2. Вставьте свой *персональный токен доступа* в форму **Token ID** в Tkinter Designer.
3. Вставьте ссылку в форму **File URL** в Tkinter Designer.
4. Нажмите форму **Output Path**, чтобы открыть браузер файлов.
5. Выберите путь вывода и нажмите **Select Folder**.
6. Нажмите **Generate**.
Выходные файлы Tkinter Designer будут помещены в выбранный вами каталог внутри новой папки с именем **build**. Поздравляем, вы создали графический интерфейс Tkinter с помощью Tkinter Designer!
<br><br>
<a id="Устранение неполадок"></a>
# Устранение неполадок <small>[[Наверх](#Оглавление)]</small>
- Элементы не видны? Находятся не на своём месте?
- Убедитесь, что в вашем файле Figma элементы названы правильно. * См. [Форматирование дизайна Figma, §1](#formatting-1).
- Кнопка имеет незапланированный серый фон?
- Убедитесь, что вы добавили прямоугольник позади элемента кнопки и что его цвет заливки такой же, как у фона.
- Неправильные элементы?
- Убедитесь, что вы правильно назвали свои элементы в Figma.
- См. [Форматирование дизайна Figma, §1](#formatting-1).
- Окно больше экрана?
- Уменьшите размер ваших элементов в Figma.
- Файлы не генерируются?
- Перезапустите Tkinter Designer.
- Дважды проверьте токен и URL-адрес.
- Убедитесь, что в вашем дизайне есть Frame.
- Что-то другое?
- [Сообщить о проблемах, не перечисленных здесь на GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new)