Skip to content

Latest commit

 

History

History
276 lines (189 loc) · 10.5 KB

instructions.fr-FR.md

File metadata and controls

276 lines (189 loc) · 10.5 KB
Raw

Comment utiliser Tkinter Designer

Sommaire

  1. Commencer

    1. Installer Python
    2. Installer Tkinter Designer
    3. Créer un compte Figma

  2. Formater votre design Figma

    1. Référence
    2. Guide des éléments

  3. Utiliser Tkinter Designer

    1. Clé d'accès personnelle
    2. URL du fichier
    3. Utilisant CLI
    4. Utilisant GUI

  4. Diagnostic des anomalies



Commencer [Haut]

1. Installer Python

Avant d'utiliser Tkinter Designer, vous devez installer Python.

Plus loin dans ce guide, vous utiliserez le programme d'installation de packages pour Python (pip), ce qui peut vous obliger à ajouter Python à votre PATH système.


2. Installer Tkinter Designer

Une fois Python installé, vous pouvez télécharger Tkinter Designer depuis le dépôt officiel.

Dans la barre latérale de droite, cliquez sur la dernière version et, sous Assets, choisissez tkinter_designer.exe. Une fois l'exécutable téléchargé, vous êtes prêt à exécuter le programme !

Pour exécuter Tkinter Designer à partir du code source, suivez les instructions ci-dessous.

  1. Téléchargez les fichiers sources de Tkinter Designer en les téléchargeant manuellement ou en utilisant git :-

git clone https://github.com/ParthJadhav/Tkinter-Designer.git

  1. Changez votre répertoire de travail en Tkinter Designer.

cd Tkinter-Designer

  1. Installez les dépendances nécessaires en exécutant pip install -r requirements.txt
    • Si pip ne fonctionne pas, essayez également les commandes suivantes :
      • pip3 install -r requirements.txt
      • python -m pip install -r requirements.txt
      • python3 -m pip install -r requirements.txt
    • Si cela ne fonctionne toujours pas, assurez-vous que Python est ajouté au PATH.

Cela installera toutes les exigences et Tkinter Designer. Avant d'utiliser Tkinter Designer, vous devez créer un fichier Figma avec les instructions ci-dessous.

Si vous avez déjà créé un fichier, passez à la section Utilisation de Tkinter Designer.


3. Créer un compte Figma

  1. Dans un navigateur web, rendez-vous sur figma.com et cliquez sur 'Sign up'
  2. Entrez vos informations, puis vérifiez votre email
  3. Créez un nouveau fichier de design Figma
  4. Commencez à créer votre interface graphique



Formater votre design Figma [Haut]

1. Référence


L'importance du nom

Nom de l'élément Figma Élément Tkinter
Button Button
Line Line
Rectangle Rectangle
TextArea Text Area
TextBox Entry
Image Canvas.Image()

Le code généré par Tkinter Designer est basé sur les noms des éléments de votre design Figma et, en tant que tel, vous devez nommer vos éléments en conséquence. Dans Figma, renommez vos éléments en double-cliquant dessus dans le panneau Calques.


2. Guide des éléments


  1. Tout d'abord, créez une Frame qui servira de fenêtre Tkinter.

  2. Ajout d'images

    • Les images peuvent être créées à l'aide de formes et/ou d'images
    • Si vous utilisez plusieurs formes/images, vous devez les regrouper en les sélectionnant toutes et en appuyant sur CTRL/⌘ + G
    • Après cela, nommez l'élément ou le groupe comme "Image".

  3. Texte (Texte normal)

    • Utilisez la touche T pour activer l'outil texte, puis ajoutez du texte comme vous le souhaitez
    • Le texte n'a pas besoin d'être renommé pour être utilisé dans Tkinter Designer
    • Appuyez explicitement sur la touche Retour ou Entrée pour passer à la ligne suivante.

  4. Entrée de texte (Entrée utilisateur sur une seule ligne)

    • Activez l'outil Rectangle avec R
    • Ajustez le rectangle à votre convenance
    • Assurez-vous que le rectangle est nommé "TextBox"

  5. Zone de texte (Entrée utilisateur sur plusieurs lignes)

    • Activez l'outil Rectangle avec R
    • Ajustez le rectangle à votre convenance
    • Assurez-vous que le rectangle est nommé "TextArea"

  6. Rectangle

    • Activez l'outil Rectangle avec R
    • Ajustez le rectangle à votre convenance
    • Assurez-vous que le rectangle est nommé "Rectangle"

  7. Bouton normal

    • Ajouter un rectangle pour servir de bouton dans votre interface graphique
      • Facultatif : ajoutez du texte au bouton
    • Sélectionnez le bouton (Rectangle) et tout texte facultatif, puis regroupez-les avec CTRL/⌘ + G
    • Nommez le groupe "Button"

Référez vous à cette vidéo si vous rencontrez tout problème



  1. Bouton arrondi
    • Ajouter un rectangle pour servir de bouton dans votre interface graphique
      • Facultatif : ajoutez du texte au bouton
    • Arrondissez-le en ajoutant un rayon d'angle en sélectionnant le rectangle et en ajoutant un rayon d'angle à partir du côté droit. En savoir plus
    • Créez un rectangle avec la même taille de votre bouton. Ne l'arrondissez pas.
    • Changez la couleur du rectangle pour qu'elle corresponde à l'arrière-plan
    • Déplacez maintenant le rectangle nouvellement créé sous le bouton principal (Rectangle).
    • Sélectionnez le bouton (Rectangle) et tout texte facultatif, puis regroupez-les avec CTRL/⌘ + G
    • Nommez le groupe "Button"

Référez vous à cette vidéo si vous rencontrez tout problème



Utiliser Tkinter Designer [Haut]

Ouvrez Tkinter Designer avant de suivre les étapes suivantes


1. Clé d'accès personnelle

  1. Connectez-vous à votre compte Figma
  2. Accédez à Paramètres
  3. Dans l'onglet Compte, faites défiler jusqu'à Personnal access tokens
  4. Saisissez le nom de votre clé d'accès dans le formulaire de saisie et appuyez sur Entrée
  5. Votre clé d'accès personnelle sera créé.
    • Copiez cette clé et conservez-la dans un endroit sûr.
    • Vous n'aurez pas d'autre chance de copier cette clé.
  6. Collez votre clé d'accès personnelle dans le formulaire Token ID dans Tkinter Designer

2. URL du fichier

  1. Dans votre fichier de conception Figma, cliquez sur le bouton Partager dans la barre supérieure, puis cliquez sur 🔗 Copier le lien
  2. Collez le lien dans la zone File URL au sein de Tkinter Designer

Utilisation de l'interface de ligne de commande

L'utilisation de la CLI est aussi simple que l'installation du package et l'exécution de l'outil CLI.

Vous pouvez utiliser la commande ci-dessous comme test en remplaçant $YOUR_FIGMA_TOKEN par votre token d'accès personnel Figma généré. Si vous n'avez pas le jeton, reportez-vous à la Section des entrées requises .

# Exemple de données
$ python -m tkdesigner.cli https://www.figma.com/file/WVLnulVsI177tvnxSdqOUZ/Untitled?node-id=0%3A1 $YOUR_FIGMA_TOKEN -f
# Pour en savoir plus sur l'utilisation de la cli, passez l'indicateur --help
$ python -m tkdesigner.cli --help

Par défaut, le code GUI sera écrit dans build/gui.py. Pour exécuter l'interface graphique générée, cd dans le répertoire dans lequel vous l'avez construit (par exemple build/) et exécutez-le comme vous le feriez avec n'importe quelle interface graphique Tkinter.

cd build
python3 gui.py

Utilisation de l'interface graphique

  1. Ouvrez TKinter Designer en
cd Tkinter-Designer
interface graphique cd
python3 gui.py
  1. Collez votre jeton d'accès personnel dans le formulaire ID de jeton dans Tkinter Designer
  2. Collez le lien dans le formulaire URL du fichier dans Tkinter Designer
  3. Cliquez sur le formulaire Chemin de sortie pour ouvrir un navigateur de fichiers
  4. Choisissez un chemin de sortie et cliquez sur Sélectionner un dossier
  5. Appuyez sur Générer

Les fichiers de sortie de Tkinter Designer seront placés dans le répertoire de votre choix, dans un nouveau dossier appelé build. Félicitations, vous avez maintenant créé votre interface graphique Tkinter à l'aide de Tkinter Designer !



Diagnostic des anomalies [Haut]

  • Éléments non visibles ? Mal placés ?

  • Le bouton a un arrière-plan gris non désiré ?

    • Assurez-vous que vous avez ajouté un rectangle derrière votre élément de bouton et que sa couleur de remplissage est la même que celle de l'arrière-plan

  • Éléments incorrects ?

  • La fenêtre est plus grande que l'écran ?

    • Réduisez la taille de vos éléments dans Figma

  • Les fichiers ne se génèrent pas ?

    • Redémarrez Tkinter Designer
    • Vérifiez la clé d'API et l'URL
    • Assurez-vous que votre design a une Frame

  • Autre chose ?