# Technical Documentation: ParthJadhav/Tkinter-Designer > ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/ParthJadhav/Tkinter-Designer) ### Overview (`README.md`) [](https://bloom.parthjadhav.com)

logo

Tkinter Designer

Drag & Drop GUI Creator

GitHub Trending #3 in Python on June 8, 2021 Product Hunt #8 on launch day, September 19, 2021


## Translations - [简体中文](/docs/README.zh-CN.md) - [Français](/docs/README.fr-FR.md) - [ગુજરાતી](/docs/README.gu-GU.md) - [हिन्दी](/docs/README.hin-HIN.md) - [Italiano](/docs/README.it-IT.md) - [عربية](/docs/README.ar-DZ.md) - [Turkish](/docs/README.tr-TR.md) - [Brazil](/docs/README.pt-BR.md) - [Spanish](/docs/README.spa-SPA.md) - [मराठी](/docs/README.mr-MR.md) - [Korean](/docs/README.kr-KR.md) - [Tiếng Việt](/docs/README.vi-VN.md) - [বাংলা](/docs/README.ban-BAN.md) - [Русский](/docs/README.ru-RU.md) ___ ## 💡 Introduction Tkinter Designer was created to speed up the GUI development process in Python. It uses the well-known design software [Figma](https://www.figma.com/) to make creating beautiful Tkinter GUIs in Python a piece of cake 🍰. Tkinter Designer uses the Figma API to analyze a design file and create the respective code and files needed for the GUI. Even Tkinter Designer's GUI is created using Tkinter Designer. Tkinter Designer GUI ## 📢 Announcement ### 🎉 Multi frame support is here! 🎉 You can now create multiple frames in a single design file and Tkinter Designer will create the respective code and files for each frame. This is a huge step for Tkinter Designer and I'm really excited to see what you guys create with it. Feel free to share your creations with the community on [Discord](https://discord.gg/QfE5jMXxJv). If you encounter any bugs or have any suggestions, please create an issue [here](https://github.com/ParthJadhav/Tkinter-Designer). ## ☄️ Advantages of Tkinter Designer 1. Interfaces with drag and drop. 2. A great deal quicker than writing code by hand 3. Produce more gorgeous interfaces ## ⚡️ Read the instruction here View the YouTube video or read the instructions below. Instructions Youtube Tutorial ## Requirements Tkinter Designer supports Python 3.9 and newer. Install it with: ```bash pip install tkdesigner ``` The CLI accepts both current `figma.com/design/...` links and legacy `figma.com/file/...` links. If you select a specific frame before copying the Figma link, Tkinter Designer will generate that selected frame. Always wrap Figma URLs in quotes when running from a shell, because Figma links often include `?` and `&` query parameters. ```bash tkdesigner "$FILE_URL" "$FIGMA_TOKEN" ``` To generate a class-based Tkinter app: ```bash tkdesigner --template class $FILE_URL $FIGMA_TOKEN ``` To generate one app with Back/Next navigation across multiple Figma frames: ```bash tkdesigner --template pages $FILE_URL $FIGMA_TOKEN ``` Generated apps can also apply a ttk theme: ```bash tkdesigner --theme clam $FILE_URL $FIGMA_TOKEN ``` Generated `gui.py` files can be imported from another Python file without starting `mainloop()` automatically, so you can attach commands separately and regenerate the UI later. Use `-f` when you want the CLI to clear and regenerate an existing `build` directory. ## 🦋 Supporting Tkinter Designer Consider making a donation to the Tkinter Designer project if you or your business have benefited from it. This will accelerate Tkinter Designer's development! Making coffee is simple; I'll be happy to enjoy one. Buy Me A Coffee Paypal ## 🔵 Discord server & Linkedin Click the button below to join the discord server or Linkedin Join Discord Server Connect on Linkedin ## 📐 How it Works The only thing the user needs to do is design an interface with Figma, and then paste the Figma file URL and API token into Tkinter Designer. Tkinter Designer will automatically generate all the code and images required to create the GUI in Tkinter. How it Works ___ ## 🎯 Examples The possibilities are endless with Tkinter Designer, but here are a couple of GUIs that can be perfectly replicated in Tkinter. The following are not my creations. ### HotinGo [(More Info)](https://github.com/Just-Moh-it/HotinGo) Example 3 ### CodTubify [(More Info)](https://github.com/iamDyeus/CodTubify) Example 3 ### BeAnonymous [(More Info)](https://github.com/MambaCodes/BeAnonymous) Example 1 ### Frame Recorder [(More Info)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(More Info)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ### Atarbals-Modern-Antivirus [(More Info)](https://github.com/HarshscGithub/Atarbals-Modern-Antivirus) Example 3 ## 🔥 Showcase Please let me know if Tkinter Designer was used to create your app. More illustrations will be beneficial for other people! (See: [Contact Me](#-contact-me)) or use [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) section in Discussions. ## 📄 License Tkinter Designer is licensed under the BSD 3-Clause "New" or "Revised" License. [View Here.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | Permissions | Restrictions | Conditions | --- | --- | --- ✓ Commercial Use | × Liability | 🛈 License and Copyright Notice ✓ Modification | × Warranty ✓ Distribution ✓ Private Use ## Contribute All contributions from the open-source community, individuals, and partners are welcomed. Our achievement is a result of your active participation. [Contributing guidelines](docs/CONTRIBUTING.md) [Code of conduct](CODE_OF_CONDUCT.md) [LEARN.md](LEARN.md) Connect with me on [](https://www.linkedin.com/in/parthjadhav04/) ## Author Created by [Parth Jadhav](https://www.parthjadhav.com/). --- ### Overview (`tkdesigner/figma/README.md`) Python representation of Figma nodes. ## References - --- ### CONTRIBUTING (`docs/CONTRIBUTING.md`) # Welcome to Tkinter-Designer contributing guide Thank you for investing your time in contributing to our project! Read our [Code of Conduct](../CODE_OF_CONDUCT.md) to keep our community approachable and respectable. In this guide you will get an overview of the contribution workflow from opening an issue, creating a PR, reviewing, and merging the PR. ## New contributor guide To get an overview of the project, read the [README](../README.md). Here are some resources to help you get started with open source contributions: - [Finding ways to contribute to open source on GitHub](https://docs.github.com/en/get-started/exploring-projects-on-github/finding-ways-to-contribute-to-open-source-on-github) - [Set up Git](https://docs.github.com/en/get-started/quickstart/set-up-git) - [GitHub flow](https://docs.github.com/en/get-started/quickstart/github-flow) - [Collaborating with pull requests](https://docs.github.com/en/github/collaborating-with-pull-requests) ## Getting started If you find something that can be improved, solved or changed you are welcome to do so. #### Create a new issue If you spot a problem with the Tkinter-Designer, [search if an issue already exists](https://github.com/ParthJadhav/Tkinter-Designer/issues). If a related issue doesn't exist, you can open a new issue using a relevant [issue form](https://github.com/ParthJadhav/Tkinter-Designer/issues/new/choose). #### Solve an issue Scan through our [existing issues](https://github.com/ParthJadhav/Tkinter-Designer/issues) to find one that interests you. You can narrow down the search using `labels` as filters. ### Make Changes Once you find the thing you want to work on. 1. Fork the repository. 2. Create a branch for your changes. 3. Clone and checkout that branch locally. 4. Install dependencies by `pip install -r requirements.txt` 5. Make sure it works as expected. 6. Make the changes. 7. Test the changes. 8. Commit and Push the changes. 9. Create a Pull Request. ### Pull Request The created Pull request should have a brief description on why and how you made the changes. ### Your PR is merged Congratulations :tada::tada: Thank you :sparkles:. Once your PR is merged, your contributions will be publicly visible on the [Tkinter-Designer](https://github.com/ParthJadhav/Tkinter-Designer/). --- ### README.Ar DZ (`docs/README.ar-DZ.md`)

logo

Tkinter Designer

إنشاء واجهات المستخدم Tkinter آليًا


___ ## مقدمة تم إنشاء Tkinter Designer لتسريع عملية تطوير واجهات المستخدم GUI في Python. يستخدم هذا المشروع برنامج التصميم المعروف [Figma](https://www.figma.com/) لتسهيل علمية تطوير واجهات المستخدم الجميلة GUI. يستخدم المشروع Figma API لتحليل ملف تصميم وإنشاء الكود والملفات المطلوبة لواجهة المستخدم GUI. حتى واجهة المستخدم هذا المشروع تم إنشاؤها باستخدام Tkinter Designer. Tkinter Designer GUI ## ☄️ مزايا Tkinter Designer 1. واجهات drag and drop 2. أسرع بكثير من تطوير الواجهات يديويًا 3. القدرة على إنشاء واجهات أكثر جمالاً ___ ## ⚡️ تثبيت واستعمال Tkinter Designer تحتوي التعليمات على كل المعلومات حول تثبيت واستعمال Tkinter Designer، بالإضافة إلى troubleshooting والإبلاغ عن المشاكل. يوجد أيضًا مقطع فيديو. ### [إقرأ التعليمات](/docs/instructions.ar-DZ.md) ## 🦋 دعم Tkinter Designer الحياة بدون قهوة، كشيءٍ بلا شيء... آسف، لم أشرب أي قهوة بعد. Buy Me A Coffee ___
## 🔵 إنضم للDiscord server الرسمي لTkinter Designer إضغط على الزر أدناه للانضمام الى الdiscord server للمشاركة في النقاشات. Join Discord Server ___
## 📐 كيف يعمل الشيء الوحيد الذي يحتاجه المستخدم هو تصميم الواجهة باستعمال Figma ثم نسخ URL الملف والtoken إلى Tkinter Designer. سيقوم Tkinter Designer تلقائيًا بإنشاء الكود والصور المطلوبة لإنشاء واجهة المستخدم في Tkinter. How it Works ___
## 🎯 أمثلة لا حصر لما يمكنك فعله مع Tkinter Designer، ولكن ستجد أدناه بعض الواجهات التي يمكن نسخها بشكل مثالي إلى Tkinter. الأمثلة الموالية ليست من إنشائي ### صفحة تسجيل Example 1 ### صفحة علامة تجارية Example 2 ### مسجل إطارات [(المزيد من المعلومات)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(المزيد من المعلومات)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ## 🔥 عرض إذا تم إنشاء تطبيقك باستخدام Tkinter Designer، أخبرني بذلك. رؤية المزيد من الأمثلة سيكون مفيدًا لآخرين! (أنظر إلى: [إتصل بي](#-contact-me)) أو استعمل قسم [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) في الDiscussions. ___
## 📝 إتصل بي إذا أردت الإتصال بي، يمكنك التواصل معي على Jadhavparth99@gmail.com ___
## 📄 الرخصة تم ترخيص Tkinter Designer بموجب الرخصة BSD 3-Clause "New" or "Revised" [إنظر هنا.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | الإذن | القيود | الشروط | --- | --- | --- ✓ الاستخدام التجاري | × المسؤولية القانونية | 🛈 إشعار الترخيص وحقوق النشر ✓ التعديل | × الضمان ✓ التوزيع ✓ الاستخدام الشخصي
--- ### README.Ban BAN (`docs/README.ban-BAN.md`)

লোগো

টিকিন্টার ডিজাইনার

জিইউআই ক্রিয়েটরকে ড্র্যাগ এবং ড্রপ করুন

Tkinter Designer - No-code solution for Python GUI's | Product Hunt


___ ## 💡 পরিচিতি টিকিন্টার ডিজাইনার পাইথন এ জিইউআই ডেভেলপমেন্ট প্রক্রিয়া ত্বরান্বিত করার জন্য তৈরি করা হয়েছিল। এটি সুপরিচিত ডিজাইন সফ্টওয়্যার [ফিগমা](https://www.figma.com/) ব্যবহার করে পাইথনে সুন্দর টিকিন্টার জিইউআই তৈরি করে কেকের টুকরো তৈরি করে 🍰. টিকিন্টার ডিজাইনার একটি ডিজাইন ফাইল বিশ্লেষণ করতে এবং জিইউআই-এর জন্য প্রয়োজনীয় কোড এবং ফাইলগুলি তৈরি করতে ফিগমা এপিআই ব্যবহার করে। এমনকি টিকিন্টার ডিজাইনার এর জিইউআই টিকিন্টার ডিজাইনার ব্যবহার করে তৈরি করা হয়েছে। টিকিন্টার ডিজাইনার জিইউআই ## 📢 ঘোষণা ### 🎉 মাল্টি ফ্রেম-এর সমর্থন এখানে! 🎉 আপনি এখন একটি একক ডিজাইন ফাইলে একাধিক ফ্রেম তৈরি করতে পারেন এবং টিকিন্টার ডিজাইনার প্রতিটি ফ্রেমের জন্য সংশ্লিষ্ট কোড এবং ফাইল তৈরি করবে। এটি টিকিন্টার ডিজাইনারের জন্য একটি বিশাল পদক্ষেপ এবং আপনি এটি দিয়ে কী তৈরি করেন তা দেখে আমি সত্যিই উত্তেজিত। [ডিসকর্ড](https://discord.gg/QfE5jMXxJv)-এ সম্প্রদায়ের সাথে আপনার সৃষ্টি নির্দ্বিধায় ভাগ করুন। আপনি যদি কোন বাগ সম্মুখীন হন বা কোন পরামর্শ থাকে, দয়া করে একটি সমস্যা তৈরি করুন [এখানে](https://github.com/ParthJadhav/Tkinter-Designer)। ## ☄️ টিকিন্টার ডিজাইনারের সুবিধা 1. ড্র্যাগ এবং ড্রপ সহ ইন্টারফেস। 2. হাত দিয়ে কোড লেখার চেয়ে অনেক দ্রুত। 3. আরো চমত্কার ইন্টারফেস উত্পাদন। ## ⚡️ এখানে নির্দেশ পড়ুন ইউটিউব ভিডিও দেখুন বা নীচের নির্দেশাবলী পড়ুন. নির্দেশ ইউটিউব টিউটোরিয়াল ## 🦋 টিকিন্টার ডিজাইনার সমর্থনকারী টিকিন্টার ডিজাইনার প্রকল্পে দান করার কথা বিবেচনা করুন যদি আপনি বা আপনার ব্যবসা এটি থেকে উপকৃত হন। এটি টিকিন্টার ডিজাইনারের বিকাশকে ত্বরান্বিত করবে! কফি তৈরি করা সহজ; আমি একটি উপভোগ করতে খুশি হবে. Buy Me A Coffee Paypal ## 🔵 ডিসকর্ড সার্ভার এবং লিঙ্কড-ইন ডিসকর্ড সার্ভার বা লিঙ্কড-ইনে যোগ দিতে নীচের বোতামে ক্লিক করুন ডিসকর্ড সার্ভারে যোগ দিন লিঙ্কড-ইনে যোগ করুন ## 📐 কিভাবে এটা কাজ করে ব্যবহারকারীকে শুধুমাত্র যা করতে হবে তা হল ফিগমা এর সাথে একটি ইন্টারফেস ডিজাইন করুন এবং তারপর ফিগমা ফাইল ইউআরএল এবং এপিআই টোকেন টিকিন্টার ডিজাইনারে পেস্ট করুন। টিকিন্টার ডিজাইনার টিকিন্টার-এ জিইউআই তৈরি করার জন্য প্রয়োজনীয় সমস্ত কোড এবং ছবি স্বয়ংক্রিয়ভাবে তৈরি করবে। কিভাবে এটা কাজ করে ___ ## 🎯 উদাহরণ টিকিন্টার ডিজাইনারের সাথে সম্ভাবনাগুলি অফুরন্ত, তবে এখানে কয়েকটি জিইউআই রয়েছে যা টিকিন্টার-এ পুরোপুরি প্রতিলিপি করা যেতে পারে। নিম্নলিখিত আমার সৃষ্টি নয়। ### HotinGo [(অধিক তথ্য)](https://github.com/Just-Moh-it/HotinGo) Example 3 ### CodTubify [(অধিক তথ্য)](https://github.com/iamDyeus/CodTubify) Example 3 ### BeAnonymous [(অধিক তথ্য)](https://github.com/MambaCodes/BeAnonymous) Example 1 ### Frame Recorder [(অধিক তথ্য)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(অধিক তথ্য)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ### Atarbals-Modern-Antivirus [(অধিক তথ্য)](https://github.com/HarshscGithub/Atarbals-Modern-Antivirus) Example 3 ## 🔥 প্রদর্শনী আপনার অ্যাপ তৈরি করতে টিকিন্টার ডিজাইনার ব্যবহার করা হয়েছে কিনা দয়া করে আমাকে জানান। আরও দৃষ্টান্ত অন্য মানুষের জন্য উপকারী হবে! (দেখুন: [আমার সাথে যোগাযোগ করুন](#-আমার সাথে যোগাযোগ করুন)) অথবা ব্যবহার করুন [দেখান এবং বলুন](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) আলোচনা বিভাগে। ## 📄 লাইসেন্স টিকিন্টার ডিজাইনার বিএসডি ৩-ক্লজ "নতুন" বা "সংশোধিত" লাইসেন্সের অধীনে লাইসেন্সপ্রাপ্ত। [এখানে দেখুন](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | অনুমতি | বিধিনিষেধ | শর্তাবলী | --- | --- | --- ✓ বাণিজ্যিক ব্যবহার | × দায় | 🛈 লাইসেন্স এবং কপিরাইট বিজ্ঞপ্তি ✓ পরিবর্তন | × ওয়ারেন্টি ✓ বিতরণ ✓ ব্যক্তিগত ব্যবহার ## অবদান ওপেন সোর্স সম্প্রদায়, ব্যক্তি এবং অংশীদারদের থেকে সমস্ত অবদানকে স্বাগত জানানো হয়। আমাদের অর্জন আপনার সক্রিয় অংশগ্রহণের ফল। [Contributing guidelines](docs/CONTRIBUTING.md) [Code of conduct](CODE_OF_CONDUCT.md) [LEARN.md](LEARN.md) ## 📝 আমার সাথে যোগাযোগ কর আমার সাথে যোগাযোগ করতে চাইলে করতে পারেন আমার কাছে পৌঁছান Jadhavparth99@gmail.com আমার সাথে সংযোগ করুন [](https://www.linkedin.com/in/parthjadhav04/) --- ### README.Fr FR (`docs/README.fr-FR.md`)

logo

Tkinter Designer

Automatisez la création d'interfaces Tkinter


___ ## 💡 Introduction Tkinter Designer a été créé pour accélérer le processus de développement des interfaces en Python. Il utilise le logiciel de design bien connu [Figma](https://www.figma.com/) afin de rendre la création de magnifiques interfaces Tkinter en Python du gâteau 🍰. Tkinter Designer utilise l'API de Figma pour analyser les fichiers de design afin de créer le code et les fichiers respectifs nécessaires à l'interface. Même l'interface de Tkinter Designer à été créée avec Tkinter Designer. Tkinter Designer GUI ## ☄️ Avantages de Tkinter Designer 1. Interfaces en drag and drop 2. Significativement plus rapide que créer le code manuellement 3. Capacité de créer des interface encore plus belles ___ ## ⚡️ Installation et utilisation de Tkinter Designer Les instructions contiennent toutes les informations à propos de l'installation et de l'utilisation de Tkinter Designer, ainsi que les informations pour diagnostiquer et signaler les problèmes. ### [Lire les instructions](instructions.fr-FR.md) ## 🦋 Soutenir Tkinter Designer La vie sans café est quelque chose sans quelque chose… désolé, je n'ai pas encore eu mon café. Buy Me A Coffee ___
## 📐 Comment ça marche La seule chose que l'utilisateur a besoin de faire est de designer l'interface avec Figma, puis coller le lien du fichier Figma et de sa clé d'API dans Tkinter Designer. Tkinter Designer génèrera automatiquement tout le code et les images requises à créer l'interface avec Tkinter. How it Works ___
## 🎯 Exemples Les possibilités sont infinies avec Tkinter Designer, mais voici quelques interfaces pouvant être parfaitement répliquées au sein de Tkinter. Les créations suivantes ne sont pas les miennes. ### Page d'inscription Example 1 ### Page de marque Example 2 ### Enregistreur d'images [(More Info)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(More Info)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ## 🔥 Vitrine Si votre application a été créée avec Tkinter Designer, faites le moi savoir. Il sera utile pour d'autres de voir plus d'exemples ! (Se référer à la rubrique [Me contacter](#-contact-me)) ou utilisez la section [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) dans les Discussions. ___
## 📝 Me contacter Si vous souhaitez me contacter, vous pouvez me joindre à Jadhavparth99@gmail.com ___
## 📄 Licence Tkinter Designer est mis à disposition sous licence BSD 3-Clause "Nouvelle" ou "Révisée". [Trouvez-la ici.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | Permissions | Restrictions | Conditions | --- | --- | --- ✓ Utilisation commerciale | × Responsabilité | 🛈 License et Copyright ✓ Modification | × Garrantie ✓ Distribution ✓ Utilisation privée --- ### README.Gu GU (`docs/README.gu-GU.md`)

لوگو

Tkinter ડિઝાઇનર

Tkinter GUI બનાવટને સ્વચાલિત કરો.


___ ## પરિચય Tkinter ડિઝાઇનરને પાયથોનમાં GUI વિકાસ પ્રક્રિયા ઝડપી બનાવવા માટે બનાવવામાં આવી હતી. તે Python માં સુંદર Tkinter GUI બનાવવા માટે જાણીતા ડિઝાઇન Software [Figma](https://www.figma.com/) નો ઉપયોગ કરે છે. Tkinter ડિઝાઇનર ડિઝાઇન ફાઇલનું વિશ્લેષણ કરવા અને GUI માટે જરૂરી કોડ અને ફાઇલો બનાવવા માટે ફિગ્મા APIનો ઉપયોગ કરે છે. ટિંકટર ડીઝાઈનરની જીયુઆઈ પણ ટિંકટર ડિઝાઇનરની મદદથી બનાવવામાં આવી છે. ટિંકટર ડિઝાઇનર GUI ## Tkinter ડિઝાઇનરના ફાયદા 1. ઇન્ટરફેસો ખેંચો અને છોડો 2. મેન્યુઅલી કોડ બનાવવા કરતાં નોંધપાત્ર રીતે ઝડપી 3. વધુ સુંદર ઇન્ટરફેસો બનાવવાની ક્ષમતા ___ ## ઇન્સ્ટોલ અને ઉપયોગ કરી રહ્યું છે Tkinter Designer સૂચનોમાં મુશ્કેલીનિવારણ અને રિપોર્ટિંગ મુદ્દાઓની માહિતી સાથે, ટિંકિટર ડિઝાઇનર ઇન્સ્ટોલ કરવા અને વાપરવા વિશેની તમામ માહિતી શામેલ છે. ### [સૂચનો વાંચો](/docs/instructions.gu-GU.md) ## Tkinter સહાયક ટિંકિટર ડિઝાઇનર Coffee :coffee: વિનાનું જીવન કંઈક વિનાનું છે ... માફ કરશો, મારી પાસે હજી સુધી કોઈ કોફી નથી. મને એક કોફી ખરીદો ___
## નામકરણનું મહત્વ ([વિડિઓ](https://youtu.be/mFjE2-rbpm8) માં ઉલ્લેખિત અને [સૂચનો](/docs/instructions.gu-GU.md)) Tkinter ડિઝાઇનર તેને કોડમાં કન્વર્ટ કરવા તત્વોના નામ પર ખૂબ આધાર રાખે છે. નામકરણ માર્ગદર્શિકા જુઓ [અહીં](/docs/instructions.gu-GU.md).
## 📐 તે કેવી રીતે કાર્ય કરે છે વપરાશકર્તાને Figma સાથેના ઇન્ટરફેસની ડિઝાઈન કરવાની જરૂર છે, અને તે પછી Figma ફાઇલ URL અને API ટોકનને Tkinter ડિઝાઇનરમાં પેસ્ટ કરો. Tkinter ડિઝાઇનર, Tkinter માં GUI બનાવવા માટે જરૂરી બધા કોડ અને છબીઓ(images) આપમેળે પેદા કરશે. તે કેવી રીતે કાર્ય કરે છે ___
## 🎯 ઉદાહરણો શક્યતાઓ Tkinter ડિઝાઇનર સાથે અનંત છે, પરંતુ અહીં GUIs ની એક દંપતી છે જે સંપૂર્ણ રીતે Tkinter માં નકલ કરી શકાય છે. નીચેની રચનાઓ મારી નથી. ### નોંધણી પૃષ્ઠ ઉદાહરણ 1 ### બ્રાંડિંગ પૃષ્ઠ ઉદાહરણ 2 ### ફ્રેમ રેકોર્ડર [(વધુ માહિતી)] () ઉદાહરણ 3 ### WhatBulk [(વધુ માહિતી)] () ઉદાહરણ 3 ## 🔥 શોકેસ જો તમારી એપ્લિકેશન Tkinter ડિઝાઇનર સાથે બનાવવામાં આવી હતી, તો મને જણાવો. અન્ય લોકો વધુ ઉદાહરણો જોવા માટે મદદરૂપ થશે! અથવા ચર્ચાઓ [બતાવો અને કહો](https://github.com/ParthJadhav/Tkinter-Designer/discussion/categories/show-and-tell) વિભાગનો ઉપયોગ કરો. ___
## મારો સંપર્ક કરો જો તમે મારો સંપર્ક કરવા માંગતા હો, તો તમે મને jadhavaparth99@gmail.com પર પહોંચી શકો છો ___
## 📄 લાઇસન્સ Tkinter ડિઝાઇનર BSD 3-કલમ "નવું" અથવા "સુધારેલ" લાઇસન્સ હેઠળ લાઇસન્સ પ્રાપ્ત છે. [અહીં જુઓ.](Https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | અનુમતિઓ | પ્રતિબંધો | શરતો | --- | --- | --- ✓ વ્યાપારી ઉપયોગ | × જવાબદારી | 🛈 લાઇસન્સ અને Copyright સૂચના ✓ ફેરફાર | × વોરંટી ✓ વિતરણ ✓ ખાનગી ઉપયોગ --- ### README.Hin HIN (`docs/README.hin-HIN.md`)

logo

Tkinter डिजाइनर

Tkinter GUI निर्माण को स्वचालित करें


___ ## 💡 प्रस्तावना Tkinter डिजाइनर का उपयोग Python में GUI विकास प्रक्रिया को गति देने के लिए बनाया गया था। यह Python में सुंदर Tkinter GUI बनाने के लिए प्रसिद्ध डिजाइन सॉफ्टवेयर [Figma](https://www.figma.com/) का उपयोग करता है। Tkinter डिज़ाइनर एक डिज़ाइन फ़ाइल का विश्लेषण करने और GUI के लिए आवश्यक संबंधित code और फ़ाइलें बनाने के लिए Figma API का उपयोग करता है। यहां तक ​​​​कि Tkinter डिजाइनर का GUI भी Tkinter डिजाइनर का उपयोग करके बनाया गया है। Tkinter Designer GUI ## ☄️ Tkinter डिजाइनर के लाभ 1. इंटरफेस खींचें(means drag) और छोड़ें(means drop) 2. मैन्युअल रूप से कोड बनाने की तुलना में महत्वपूर्ण रूप से तेज़ है 3. अधिक सुंदर इंटरफेस बनाने की क्षमता ___ ## 🦋 Tkinter डिजाइनर का समर्थन दो ही तो शौक़ हैं मेरे, कॉफी और coding. … मुझे समर्थन दें, मेरे लिए एक कॉफी खरीदें. Buy Me A Coffee ## ⚡️ Tkinter डिजाइनर को install करे और उसका उपयोग करना निर्देशों में समस्या निवारण और रिपोर्टिंग समस्याओं की जानकारी के साथ-साथ Tkinter Designer को स्थापित करने और उपयोग करने के बारे में सभी जानकारी शामिल है। एक वीडियो भी है। ### [निर्देश पढ़ें](/docs/instructions.md) ### [वह वीडियो देखें](https://youtu.be/mFjE2-rbpm8) ___
## 🔵 आधिकारिक(official) Tkinter डिज़ाइनर के डिस्कॉर्ड सर्वर से जुड़ें डिसॉर्डर(Discord) सर्वर(server) से जुड़ने और चर्चाओं में भाग लेने के लिए नीचे दिए गए बटन पर क्लिक करें। Join Discord Server ## ✅ नामकरण(Naming) का महत्व ([वीडियो](https://youtu.be/mFjE2-rbpm8) और[निर्देशों](/docs/instructions.md) में उल्लेख किया गया है) Tkinter Designer इसे कोड में बदलने के लिए तत्वों के नामों पर बहुत अधिक निर्भर करता है। नामकरण मार्गदर्शिका(naming guide) देखें [यहां](/docs/instructions.md#2-element-guide). ___
## 📐 यह काम किस प्रकार करता है केवल एक चीज जो उपयोगकर्ता को करने की आवश्यकता है वह है Figma के साथ एक इंटरफ़ेस डिज़ाइन करना, और फिर Figma फ़ाइल URL और API टोकन को Tkinter डिजाइनर में पेस्ट करना है। Tkinter डिज़ाइनर स्वचालित रूप से Tkinter में GUI बनाने के लिए आवश्यक सभी कोड और छवियों(images) को उत्पन्न करेगा। How it Works ___
## 🎯 उदाहरण Tkinter डिजाइनर के साथ संभावनाएं अनंत हैं, लेकिन यहां कुछ GUI हैं जिन्हें Tkinter में पूरी तरह से दोहराया(replicated) जा सकता है। निम्नलिखित मेरी रचनाएँ नहीं हैं। ### पंजीकरण(Registration) पेज Example 1 ### ब्रांडिंग पेज Example 2 ### Frame Recorder [(और जानकारी)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(और जानकारी)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ## 🔥 शो-कैस अगर आपका ऐप Tkinter डिज़ाइनर के साथ बनाया गया था, तो मुझे बताएं। वो दूसरों के लिए उदाहरण देखना मददगार होगा! (See: [मुझसे संपर्क करो](#-contact-me)) या उपयोग करें [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) section in Discussions. ___
## 📝 मुझसे संपर्क करो अगर आप मुझसे संपर्क करना चाहते हैं, तो आप मुझ तक पहुंच सकते हैं - Jadhavparth99@gmail.com ___
## 📄 लाइसेंस Tkinter Designer को BSD 3-क्लॉज "New" या "Revised" लाइसेंस के तहत लाइसेंस प्राप्त है। [View Here.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | अनुमतियां | प्रतिबंध | शर्तेँ | --- | --- | --- ✓ वाणिज्य उपयोग | × लाय्बिलिटी | 🛈 लाइसेंस और कॉपीराइट नोटिस ✓ परिवर्तन(Modification) | × गारंटी(Warranty) ✓ वितरण(Distribution) ✓ निजी उपयोग --- ### README.It IT (`docs/README.it-IT.md`)

logo

Tkinter Designer

Automatizza la creazione di interfaccia grafica per Tkinter


## Translations - [简体中文](/docs/README.zh-CN.md) - [Français](/docs/README.fr-FR.md) - [ગુજરાતી](/docs/README.gu-GU.md) - [हिन्दी](/docs/README.hin-HIN.md) - [Italiano](/docs/README.it-IT.md) - [عربية](/docs/README.ar-DZ.md) - [Turkish](/docs/README.tr-TR.md) - [Brazil](/docs/README.pt-BR.md) ___ ## 💡 Introduzione Tkinter Designer è stato creato per velocizzare la fase di sviluppo dell'interfaccia grafica in Python. Viene utilizzato il ben noto software di prototipazione grafica [Figma](https://www.figma.com/) per creare stupende interfacce grafiche di Tkinter in Python in un batter d'occhio 👁️. Tkinter Designer utilizza le API di Figma per analizzare il file di design e crearne dunque il rispettivo codice necessario per la GUI. Persino l'interfaccia di Tkinter Designer è stata creata utilizzando Tkinter Designer. Tkinter Designer GUI ## ☄️ Vantaggi di Tkinter Designer 1. Interfaccia drag and drop 2. Significativamente più veloce rispetto scrivere il codice manualmente 3. Facilita la creazione di interfacce ancora più belle ## ⚡️ Leggi le istruzioni qui -> [Documentazione](/docs/instructions.it-IT.md.md) Le istruzioni contengono tutte le informazioni utili ad installare ed utilizzare Tkinter Designer, insieme alle informazioni utili alla risoluzione e segnalazione di problemi. ## 🦋 Supporta Tkinter Designer Se tu o la tua azienda avete beneficiato di Tkinter Designer, considera a supportare lo sviluppo del progetto tramite una donazione. Questo ne aiuterebbe lo sviluppo! È tanto facile quanto preparare un caffè; preparamene uno per me ;) Buy Me A Coffee ## 🔵 Entra nel server Discord ufficiale di Tkinter Designer Clicca sul pulsante sottostante per entrare nel server Discord ufficiale e prender parte alla discussione. Join Discord Server ## 📐 Come funziona L'unica cosa che l'utente deve fare è disegnare un'interfaccia con Figma, di seguito copiare ed incollare l'URL del file di Figma e il token API in Tkinter Designer. Tkinter Designer genererà automaticamente tutto il codice e le immagini necessarie per creare l'interfaccia grafica in Tkinter. How it Works ___
## 🎯 Esempi Le possibilità sono infinite con Tkinter Designer, ma questi sono alcune delle interfacce grafiche che possono essere perfettamente replicate in Tkinter. Le seguenti creazioni non sono mie. ### HotinGo [(Ulteriori informazioni)](https://github.com/Just-Moh-it/HotinGo) Example 3 ### Pagina di registrazione Example 1 ### Pagina di branding Example 2 ### Frame Recorder [(Ulteriori informazioni)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(Ulteriori informazioni)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ## 🔥 Vetrina Se la tua app è stata fatta con Tkinter Designer, fammelo sapere. Sarebbe d'aiuto mostrare agli altri ulteriori esempi! (Guarda: [Contattami](#📝-contattami)) o utilizza la sezione [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) nella pagina Discussions di GitHub. ## 📄 Licenza Tkinter Designer è protetto da licenza BSD 3-Clause "New" or "Revised". [Leggi qui.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | Permessi | Restrizioni | Condizioni | --- | --- | --- ✓ Uso commerciale | × Responsabilità | 🛈 Avviso di licenza e Copyright ✓ Modifica | × Garanzia ✓ Distribuzione ✓ Uso personale ## Contribuisci Accettiamo qualsiasi contribuzione dalla comunità open-source, individuale o collettiva. Dobbiamo il nostro successo al vostro coinvolgimento attivo. [Linee guida per il contributo](docs/CONTRIBUTING.md) [Codice di comportamento](CODE_OF_CONDUCT.md) [Scopri di più](LEARN.md) ## 📝 Contattami Se vuoi contattarmi, puoi mandare una mail a Jadhavparth99@gmail.com --- ### README.Kr KR (`docs/README.kr-KR.md`)

logo

Tkinter Designer

Drag & Drop GUI Creator

Tkinter Designer - No-code solution for Python GUI's | Product Hunt


___ ## 💡 소개 Tkinter Designer는 Python에서 GUI 개발 프로세스를 가속화하기 위해 만들어졌습니다. 잘 알려진 디자인 소프트웨어 [Figma](https://www.figma.com/) 를 사용하여 Python에서 아름다운 Tkinter GUI를 만드는 것을 식은 죽 먹기 🥣로 만들었습니다. Tkinter Designer는 Figma API를 사용하여 설계 파일을 분석하고 GUI에 필요한 코드와 파일을 만듭니다. 심지어 Tkinter Designer의 GUI도 Tkinter Designer를 사용하여 만듭니다. Tkinter Designer GUI ## 📢 알립니다! ### 🎉 멀티 프레임이 지원됩니다! 🎉 이제 단일 설계 파일에 여러 프레임을 작성할 수 있으며 Tkinter Designer는 각 프레임에 대해 각각의 코드와 파일을 작성합니다. 이것은 Tkinter Designer에게 큰 한 걸음입니다. 여러분들이 무엇을 만드는지 보게 되어 정말 기쁩니다. [Discord](https://discord.gg/QfE5jMXxJv) 에서 커뮤니티와 자유롭게 창작물을 공유할 수 있습니다. 버그가 발생하거나 제안사항이 있을 경우 이슈 [here](https://github.com/ParthJadhav/Tkinter-Designer)를 생성해주시기 바랍니다. ## ☄️ Tkinter Designer의 장점 1. 드래그 앤 드롭 인터페이스입니다. 2. 손으로 코드를 작성하는 것보다 훨씬 빠릅니다. 3. 더 멋진 인터페이스 제작할 수 있습니다. ## ⚡️ 여기에서 사용 설명서를 보실 수 있습니다. YouTube 동영상을 보거나 아래 사용 설명서을 읽을 수 있습니다. Instructions Youtube Tutorial ## 🦋 Tkinter Designer 후원 Tkinter Designer 프로젝트에서 혜택을 받은 경우 후원을 고려해 보세요. 이것은 Tkinter Designer의 개발을 가속화할 것입니다! 커피를 만드는 것은 간단합니다. 기꺼이 즐기겠습니다. Buy Me A Coffee Paypal ## 🔵 Discord server & Linkedin 아래 버튼을 클릭하여 디스코드 서버 또는 Linkedin을 확인할 수 있습니다. Join Discord Server Connect on Linkedin ## 📐 작동 방식 사용자가 해야 할 일은 Figma와 인터페이스를 설계한 다음 Figma 파일 URL과 API 토큰을 Tkinter Designer에 붙여넣기만 하면 됩니다. Tkinter Designer는 Tkinter에서 GUI를 만드는 데 필요한 모든 코드와 이미지를 자동으로 생성합니다. How it Works ___ ## 🎯 예제 Tkinter Designer를 사용하면 가능성이 무한하지만 Tkinter에서 완벽하게 복제할 수 있는 GUI가 몇 가지 있습니다. 예시는 저의 창작물이 아닙니다. ### HotinGo [(More Info)](https://github.com/Just-Moh-it/HotinGo) Example 3 ### CodTubify [(More Info)](https://github.com/iamDyeus/CodTubify) Example 3 ### BeAnonymous [(More Info)](https://github.com/MambaCodes/BeAnonymous) Example 1 ### Frame Recorder [(More Info)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(More Info)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ### Atarbals-Modern-Antivirus [(More Info)](https://github.com/HarshscGithub/Atarbals-Modern-Antivirus) Example 3 ## 🔥 쇼 케이스 당신의 앱을 만들기 위해 Tkinter Designer가 사용되었는지 알려주시기 바랍니다. 더 많은 삽화가 다른 사람들에게 이로울 것입니다! (See: [연락처](#-contact-me)) 또는 [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell)을 사용해 주세요. ## 📄 라이센스 Tkinter Designer는 BSD 3-clause "New" 또는 "Reved" 라이센스에 따라 라이센스가 부여됩니다. [View Here](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | 권한 | 제한사항 | 조건 | --- | --- | --- ✓ 상업적 용도 | × 책임 | 🛈 라이센스 및 저작권 고지 ✓ 수정 | × 정당한 이유| ✓ 분배 | ✓ 개인 사용 | ## 컨트리뷰트 오픈 소스 커뮤니티, 개인 및 파트너의 모든 기여를 환영합니다. 우리의 성과는 당신의 적극적인 참여의 결과입니다. [Contributing guidelines](docs/CONTRIBUTING.md) [Code of conduct](CODE_OF_CONDUCT.md) [LEARN.md](LEARN.md) ## 📝 연락처 만약 당신이 나에게 연락하고 싶다면 Jadhavparth99@gmail.com 으로 연락 주세요 Connect with me on [](https://www.linkedin.com/in/parthjadhav04/) --- ### README.Mr MR (`docs/README.mr-MR.md`)

logo

Tkinter डिझायनर

स्वयंचलित Tkinter GUI निर्मिती


___ ## 💡 परिचय Tkinter डिझायनर Python मध्ये GUI विकास प्रक्रियेला गती देण्यासाठी तयार केले गेले. हे सुप्रसिद्ध डिझाइन सॉफ्टवेअर [Figma](https://www.figma.com/) वापरून Python मध्ये सुंदर Tkinter GUI तयार करण्यासाठी केकचा एक तुकडा बनवते 🍰. डिझाईन फाइलचे विश्लेषण करण्यासाठी आणि GUI साठी आवश्यक संबंधित कोड आणि फाइल्स तयार करण्यासाठी Tkinter Designer Figma API वापरतो. Tkinter Designer चे GUI देखील Tkinter Designer वापरून तयार केले आहे. Tkinter Designer GUI ## 📢 घोषणा ### 🎉 मल्टी फ्रेम समर्थन येथे आहे! 🎉 तुम्ही आता एकाच डिझाईन फाइलमध्ये अनेक फ्रेम तयार करू शकता आणि Tkinter Designer प्रत्येक फ्रेमसाठी संबंधित कोड आणि फाइल्स तयार करेल. Tkinter डिझायनरसाठी ही एक मोठी पायरी आहे आणि तुम्ही याच्या सहाय्याने काय तयार करता हे पाहण्यासाठी मला खूप आनंद झाला आहे. [Discord](https://discord.gg/QfE5jMXxJv) वर समुदायासोबत तुमची निर्मिती मोकळ्या मनाने शेअर करा. तुम्हाला काही बग आढळल्यास किंवा काही सूचना असल्यास, कृपया [येथे] (https://github.com/ParthJadhav/Tkinter-Designer) एक समस्या तयार करा. ## ☄️ Tkinter डिझायनरचे फायदे 1. ड्रॅग आणि ड्रॉप सह इंटरफेस. 2. हाताने कोड लिहिण्यापेक्षा खूप जलद 3. अधिक भव्य इंटरफेस तयार करा ## ⚡️ येथे सूचना वाचा YouTube व्हिडिओ पहा किंवा खालील सूचना वाचा. Instructions Youtube Tutorial ## 🦋 समर्थन Tkinter डिझायनर तुम्‍हाला किंवा तुमच्‍या व्‍यवसायाला याचा फायदा झाला असल्‍यास Tkinter Designer प्रॉजेक्टला देणगी देण्याचा विचार करा. हे Tkinter डिझायनरच्या विकासास गती देईल! कॉफी बनवणे सोपे आहे; मला आनंद होईल. Buy Me A Coffee Paypal ## 🔵 Discord सर्व्हर आणि LinkedIn Discord सर्व्हर किंवा LinkedIn सामील होण्यासाठी खालील बटणावर क्लिक करा Join Discord Server Connect on Linkedin ## 📐 हे कसे कार्य करते वापरकर्त्याला फक्त एक गोष्ट करणे आवश्यक आहे ते म्हणजे Figma सह इंटरफेस डिझाइन करा आणि नंतर Figma फाइल URL आणि API टोकन Tkinter Designer मध्ये पेस्ट करा. Tkinter डिझायनर Tkinter मध्ये GUI तयार करण्यासाठी आवश्यक असलेले सर्व कोड आणि प्रतिमा स्वयंचलितपणे व्युत्पन्न करेल. How it Works ___ ## 🎯 उदाहरणे Tkinter डिझायनरमध्ये शक्यता अंतहीन आहेत, परंतु येथे काही GUI आहेत ज्या Tkinter मध्ये उत्तम प्रकारे तयार केल्या जाऊ शकतात. खालील माझी निर्मिती नाही. ### HotinGo [(More Info)](https://github.com/Just-Moh-it/HotinGo) Example 3 ### CodTubify [(More Info)](https://github.com/iamDyeus/CodTubify) Example 3 ### नोंदणी पृष्ठ Example 1 ### ब्रँडिंग पृष्ठ Example 2 ### फ्रेम रेकॉर्डर [(More Info)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(More Info)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ## 🔥 शोकेस कृपया मला कळवा की Tkinter Designer तुमचा अॅप तयार करण्यासाठी वापरला गेला होता. आणखी चित्रे असतील इतर लोकांसाठी फायदेशीर! (पहा: [माझ्याशी संपर्क साधा](#-contact-me)) किंवा चर्चांमध्ये [शो आणि सांगा](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) विभाग वापरा . ## 📄 परवाना Tkinter डिझायनर BSD 3-क्लॉज "नवीन" किंवा "सुधारित" परवान्याअंतर्गत परवानाकृत आहे. [येथे पहा.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | परवानग्या | निर्बंध | परिस्थिती | --- | --- | --- ✓ व्यावसायिक वापर| × दायित्व | 🛈 परवाना आणि कॉपीराइट सूचना ✓ फेरफार | × हमी ✓ वितरण ✓ खाजगी वापर --- ### README.Pt BR (`docs/README.pt-BR.md`)

logo

Tkinter Designer

Automação de interfaces gráficas (GUI) com Tkinter


___ ## 💡 Introdução Tkinter Designer foi criado para facilitar o desenvolvimento de interfaces gráficas em Python. Utiliza o conhecido software de design [Figma](https://www.figma.com/) para criar belas interfaces gráficas Tkinter em Python ser tão fácil quanto comer bolo 🍰. Tkinter Designer utiliza a API do Figma para analisar o arquivo de design e criar o respectivo código e os arquivos necessários para a interface gráfica. Até mesmo a interface gráfica do Tkinter Designer foi criada usando o Tkinter Designer. Tkinter Designer GUI ## 📢 Anúncio ### 🎉 O suporte Multiframe chegou! 🎉 Agora você pode criar múltiplos frames em um único arquivo de design e o Tkinter Designer vai criar o respectivo código e arquivos para cada frame. Essa é uma grande evolução para o Tkinter Designer e eu estou muito animado para ver o que vocês vão criar com isso. Sinta-se a vontade para compartilhar suas criações com a comunidade no [Discord](https://discord.gg/QfE5jMXxJv). Se você encontrar algum bug ou tiver alguma sugestão, por favor crie um issue [aqui](https://github.com/ParthJadhav/Tkinter-Designer). ## ☄️ Vantagens do Tkinter Designer 1. Interfaces arrastando e soltando 2. Significamente mais rapido para criar do que seria criando código manual 3. Crie interfaces mais maravilhosas ## ⚡️ Leia as instruções aqui -> [Documentação](/docs/instructions.pt-BR.md) As intruções contém todas as informações sobre a instalação e utilização do Tkinter Designer, através dessas intormações podemos revolver problemas e reportar problemas. ## 🦋 Apoie o Tkinter Designer Se você ou sua empresa conhecem os benefícios do Tkinter Designer, considerem dar um suporte ao desenvolvimento do projeto através de doações. Isso ajudará o desenvolvimento do Tkinter Designer! É muito fácil - pague-me um Café; Eu vou apreciar ;) Buy Me A Coffee Paypal ## 🔵 Inscreva-se no servidor Oficial do Discord do Tkinter Designer Click no botão abaixo para increver-se no servidor do Discord e começar a fazer parte das discussões. Join Discord Server ## 📐 Como funciona A única coisa que o usuário precisa é fazer uma interface com o Figma, e após isso colar a URL do Figma file URL e a URL da API token do Figma dentro do Tkinter Designer. Tkinter Designer pode automaticamente gerar código e imagens requeridas para criar a interface gráfica (GUI) no Tkinter. How it Works ___
## 🎯 Exemplos As possibilidades são muitas com Tkinter Designer, mas aqui estão algumas interfaces gráficas (GUIS) que podem ser perfeitamente replicadas no Tkinter. As interfaces gráficas a seguir não são minhas criações. ### HotinGo [(Mais Informações)](https://github.com/Just-Moh-it/HotinGo) Example 3 ### CodTubify [(Mais Informações)](https://github.com/iamDyeus/CodTubify) Example 3 ### BeAnonymous [(Mais Informações)](https://github.com/MambaCodes/BeAnonymous) Example 1 ### Frame Recorder [(Mais Informações)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(Mais Informações)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ### Atarbals-Modern-Antivirus [(Mais Informações)](https://github.com/HarshscGithub/Atarbals-Modern-Antivirus) Example 3 ## 🔥 Casos de sucesso Se você tiver um app que foi feito com Tkinter Designer, contate-me. Isso pode ajudar outras pessoas, pessoas podem ficar interessadas ao ver esses exemplos! (Veja: [Contate-me](#-contate-me)) ou utilize [Mostrar e Contar](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell). ## 📄 Licença Tkinter Designer é licenciado através da licença BSD 3-Clause "New" ou "Revised". [Visualize Aqui.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | Permissões | Restrições | Condições | --- | --- | --- ✓ Uso Comercial | × Responsabilidade | 🛈 Licença e Notificação de Copyright ✓ Modificação | × Garantia ✓ Distribuição ✓ Uso Privado ## 📝 Contate-me Se você quiser me contatar, pode me encontrar no Jadhavparth99@gmail.com Se conecte comigo no [](https://www.linkedin.com/in/parthjadhav04/) --- ### README.Ru RU (`docs/README.ru-RU.md`)

logo

Tkinter Designer

Automate Tkinter GUI Creation


## 💡 Введение Tkinter Designer был создан для ускорения процесса разработки графического интерфейса на Python. Он использует известное программное обеспечение для проектирования [Figma](https://www.figma.com/), позволяющее легко создавать красивые графические интерфейсы Tkinter на Python 🍰. Tkinter Designer GUI ## 📢 Объявление ### 🎉 Поддержка нескольких фреймов уже здесь! 🎉 Теперь вы можете создавать несколько фреймов в одном файле дизайна, и Tkinter Designer создаст соответствующий код и файлы для каждого фрейма. Это огромный шаг для Tkinter Designer, и я очень рад увидеть, что вы с его помощью создадите. Не стесняйтесь делиться своими творениями с сообществом на [Discord](https://discord.gg/QfE5jMXxJv). Если вы обнаружите какие-либо ошибки или у вас есть какие-либо предложения, создайте issue [здесь](https://github.com/ParthJadhav/Tkinter-Designer). ## ☄️ Преимущества Tkinter Designer 1. Интерфейсы с перетаскиванием (drag and drop). 2. Гораздо быстрее, чем писать код вручную. 3. Создавайте более красивые интерфейсы. ## ⚡️ Инструкцию читайте здесь. Посмотрите видео на YouTube или прочитайте инструкции ниже. Instructions Youtube Tutorial ## 🦋 Поддержка Tkinter Designer Рассмотрите возможность сделать пожертвование в проект Tkinter Designer, если вы или ваш бизнес получили от этого пользу. Это ускорит разработку Tkinter Designer! Приготовить кофе просто; Я буду рад насладиться одним. Buy Me A Coffee Paypal ## 🔵 Сервер Discord и Linkedin Нажмите кнопку ниже, чтобы присоединиться к серверу Discord или Linkedin. Join Discord Server Connect on Linkedin ## 📐 Как это работает Единственное, что нужно сделать пользователю, — это разработать интерфейс с помощью Figma, а затем вставить URL-адрес файла Figma и токен API в Tkinter Designer. Tkinter Designer автоматически сгенерирует весь код и изображения, необходимые для создания графического интерфейса в Tkinter. How it Works ___ ## 🎯 Примеры Возможности Tkinter Designer безграничны, но вот пара графических интерфейсов, которые можно идеально воспроизвести в Tkinter. Следующее не является моим творением. ### HotinGo [(Узнать больше)](https://github.com/Just-Moh-it/HotinGo) Example 3 ### CodTubify [(Узнать больше)](https://github.com/iamDyeus/CodTubify) Example 3 ### BeAnonymous [(Узнать больше)](https://github.com/MambaCodes/BeAnonymous) Example 1 ### Frame Recorder [(Узнать больше)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(Узнать больше)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ### Atarbals-Modern-Antivirus [(Узнать больше)](https://github.com/HarshscGithub/Atarbals-Modern-Antivirus) Example 3 ## 🔥 Витрина Сообщите мне, использовался ли Tkinter Designer для создания вашего приложения. Дополнительные иллюстрации будут полезны другим людям! (См.: [Свяжитесь со мной](#-свяжитесь-со-мной)) или используйте раздел [Показать и рассказать](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) в обсуждениях. ## 📄 Лицензия Tkinter Designer распространяется по лицензии BSD 3-Clause "New" or "Revised". [Просмотреть здесь.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | Разрешения | Ограничения | Условия | --- | --- | --- ✓ Коммерческое использование | × Ответственность | 🛈 Уведомление о лицензии и авторских правах ✓ Модификация | × Гарантия ✓ Распространение | ✓ Частное использование | ## Способствовать Приветствуются все вклады сообщества открытого исходного кода, частных лиц и партнеров. Наше достижение – результат вашего активного участия. [Руководство по участию](docs/CONTRIBUTING.md) [Кодекс поведения](CODE_OF_CONDUCT.md) [LEARN.md](LEARN.md) ## 📝 Свяжитесь со мной Если вы хотите связаться со мной, вы можете сделать это по адресу Jadhavparth99@gmail.com Свяжитесь со мной на [](https://www.linkedin.com/in/parthjadhav04/ ) --- ### README.Spa SPA (`docs/README.spa-SPA.md`)

logo

Tkinter Designer

Automate Tkinter GUI Creation


## 💡 Introducción Tkinter Designer fue creado para agilizar el desarrolo de GUIs en Python. Éste usa un ya conocido Software de Diseño[Figma](https://www.figma.com/) para crear bonitas GUIs de Tkinter en Python como un pedazo de pastel 🍰. Tkinter Designer usa el API de Figma para analizar un archivo de diseño y crear el respectivo código y archivos necesarios para el GUI. Incluso el GUI de Tkinter Designer fue creado usando Tkinter Designer. Tkinter Designer GUI ## ☄️ Ventajas de Tkinter Designer 1. Interfaces de tipo Arrastra y Suélta 2. Significativamente más rapido que crear código manualmente 3. Habilidad de crear interfaces más bonitas. ## ⚡️ Lee las instruciones aquí -> [Documentación](/docs/instructions.md) Las instruciones contienen toda la informacion sobre la instalación y el uso de Tkinter Designer, junto con información para resolver los problemas y reportar problemas. ## 🦋 Dar apoyo a Tkinter Designer Si tú o tu compañía se han beneficiado de Tkinter Designer, considera apoyar el desarrollo del projecto a través de donaciones. Ésto va a impulsar el desarrollo de Tkinter Designer! Es tan fácil como preparar un Cafe; Por favor, haz uno para mi ;) Buy Me A Coffee ## 🔵 Únete al servidor oficial de Discord de Tkinter Designer Da click en el siguiente botón para unirte al servidor de discord y tomar parte en las discusiones. Join Discord Server ## 📐 Cómo funciona La única cosa que el usuario debe de hacer es diseñar una interfaz con Figma, y luego pegar el URL de Figma junto con el Token de API en Tkinter Designer. Tkinter Designer automaticamente generará todo el código e imágenes requeridas para crear la GUI en Tkinter. How it Works ___
## 🎯 Ejemplos Las posibilidades son infinitas con Tkinter Designer, pero aquí hay algunas GUIs que pueden ser perfectamente replicadas en Tkinter. Las siguientes no son mis creaciones. ### HotinGo [(Más información)](https://github.com/Just-Moh-it/HotinGo) Example 3 ### Registration Page Example 1 ### Branding Page Example 2 ### Frame Recorder [(More Info)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(More Info)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ## 🔥 Casos de Éxito Si tu app fue creada con Tkinter Designer, hazmelo saber. Ésto será de ayuda para otros al ver más ejemplos! (Ve: [Contáctame](#-contact-me)) o usa las secciones [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell). ## 📄 Licencia Tkinter Designer está bajo la licencia de BSD 3-Clause "New" o "Revised". [Ver Aquí.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | Permisos | Restricciones | Condiciones | --- | --- | --- ✓ Uso Comercial | × Responsabilidad | 🛈 Licencia y Notificación de Copyright ✓ Modificación | × Garantía ✓ Distribución ✓ Uso Privado --- ### README.Tr TR (`docs/README.tr-TR.md`)

logo

Tkinter Designer

Otomatik Tkinter GUI Oluşturucu


## 💡 Tanıtım Tkinter Designer Python'da GUI hazırlama sürecini hızlandırmak için yapılmıştır. Tkinter Designer bu tasarımı kolayca yapabilmeniz için [Figma](https://www.figma.com/) yazılımını kullanır. Tkinter Designer Figma API'sini kullanarak bir tasarım dosyasını analiz eder ve ardından GUI için ilgili kodu ve dosyaları sizin için oluşturur. Tkinter Designer'ın GUI tasarımı bile Tkinter Designer kullanarak yapılmıştır. Tkinter Designer GUI ## ☄️ Tkinter Designer'ın Avantajları 1. Sürükle-bırak arayüzler 2. Manuel olarak kod ile oluşturmaktan çok daha hızlı 3. Daha güzel arayüzler oluşturmak için bir fırsat --- ## ⚡️ Tkinter Designer'ı Kurmak ve Kullanmak Yönergeler sorun giderme ve hata bildirme ile birlikte Tkinter Designer'ı kurmak ve kullanmak için gereken tüm bilgileri içeriyor. ### [Yönergeleri Okuyun](/docs/instructions.tr-TR.md) --- ## 🦋 Tkinter Designer'ı Destekleme Hayat sanki kahvesiz daha … pardon, şu ana kadar hiç kahvem olmadı. Buy Me A Coffee
## 🔵 Tkinter Designer'ın Resmi Discord Sunucusu Aşağıdaki butona tıklayarak Discord sunucumuza katılın ve tartışmalarda yer alın. Join Discord Server
## 📐 Nasıl Çalışır Kullanıcıların yapması gereken tek şey Figma ile bir arayüz oluşturmaktır, ardından Figma URL'sini ve API tokenini Tkinter Designer'a yapıştırın. Tkinter Designer otomatik olarak Tkinter'da GUI için gereken tüm kodu ve resimleri otomatik olarak oluşturacaktır. How it Works ---
## 🎯 Örnekler Tkinter Designer ile olasılıklar sonsuzdur, ama burada mükemmel bir şekilde kopyalanabilen birkaç GUI var. Aşağıdakiler benim kreasyonlarım değil. ### Kayıt Sayfası Example 1 ### Marka Sayfası Example 2 ### Frame Recorder [(Daha Fazla Bilgi)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ### WhatBulk [(Daha Fazla Bilgi)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Example 3 ## 🔥 Vitrin Eğer Tkinter Designer ile tasarlanmış bir uygulamanız var ise lütfen bana haber verin. Başkalarının daha çok örnek görmesi için yararlı olacaktır! (Ayrıca: [Bana Ulaşın](#-contact-me)) ya da tartışmalardan [Göster ve Anlat](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) bölümünü kullanın. ---
## 📝 İletişim Eğer benimle iletişime geçmek istiyorsanız bana Jadhavparth99@gmail.com mail adresinden ulaşabilirsiniz (İngilizce). ---
## 📄 Lisans Tkinter Designer BSD 3-Clause "Yeni" ya da "Revize Edilmiş" Lisansı ile lisanslanmıştır. [Burdan](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) ulaşabilirsiniz. | İzinler | Kısıtlamalar | Şartlar | | ------------------------| --------------------| ------------------------------------------| | ✓ Ticari Kullanım | × Sorumluluk | 🛈 Lisans ve Telif Hakkı Bildirimi | | ✓ Modifikasyon | × Garanti | | ✓ Dağıtım | | ✓ Özel Kullanım | --- ### README.Vi VN (`docs/README.vi-VN.md`) Here's the translation of the provided text in Vietnamese:

logo

Tkinter Designer

Trình tạo GUI kéo và thả

Tkinter Designer - Giải pháp không cần code cho GUI Python | Product Hunt


## Các bản dịch - [简体中文](/docs/README.zh-CN.md) - [Français](/docs/README.fr-FR.md) - [ગુજરાતી](/docs/README.gu-GU.md) - [हिन्दी](/docs/README.hin-HIN.md) - [Italiano](/docs/README.it-IT.md) - [عربية](/docs/README.ar-DZ.md) - [Turkish](/docs/README.tr-TR.md) - [Brazil](/docs/README.pt-BR.md) - [Spanish](/docs/README.spa-SPA.md) - [मराठी](/docs/README.mr-MR.md) - [Korean](/docs/README.kr-KR.md) - [Tiếng Việt](/docs/README.vi-VN.md) ___ ## 💡 Giới thiệu Tkinter Designer được tạo ra để tăng tốc quá trình phát triển GUI trong Python. Nó sử dụng phần mềm thiết kế nổi tiếng [Figma](https://www.figma.com/) để tạo ra giao diện Tkinter GUI đẹp mắt trong Python một cách dễ dàng như ăn bánh. Tkinter Designer sử dụng API Figma để phân tích một tệp thiết kế và tạo ra mã và các tệp tương ứng cần thiết cho GUI. Ngay cả giao diện Tkinter Designer cũng được tạo bằng Tkinter Designer. Tkinter Designer GUI ## 📢 Thông báo ### 🎉 Hỗ trợ nhiều frame đã có! 🎉 Bạn có thể tạo nhiều frame trong một tệp thiết kế duy nhất và Tkinter Designer sẽ tạo ra mã và các tệp tương ứng cho mỗi frame. Điều này là một bước quan trọng cho Tkinter Designer và tôi thực sự háo hức xem các bạn tạo ra những gì với nó. Hãy tự do chia sẻ những tác phẩm của bạn với cộng đồng trên [Discord](https://discord.gg/QfE5jMXxJv). Nếu bạn gặp bất kỳ lỗi nào hoặc có bất kỳ đề xuất nào, hãy tạo một issue [tại đây](https://github.com/ParthJadhav/Tkinter-Designer). ## ☄️ Ưu điểm của Tkinter Designer 1. Giao diện với chức năng kéo và thả. 2. Nhanh hơn nhiều so với việc viết mã bằng tay. 3. Tạo ra các giao diện đẹp hơn. ## ⚡️ Đọc hướng dẫn ở đây Xem video trên YouTube hoặc đọc hướng dẫn bên dưới. Hướng dẫn Hướng dẫn trên Youtube ## 🦋 Hỗ trợ Tkinter Designer Hãy xem xét quyên góp cho dự án Tkinter Designer nếu bạn hoặc doanh nghiệp của bạn đã được hưởng lợi từ nó. Điều này sẽ giúp gia tăng quá trình phát triển Tkinter Designer! Hãy mua cho tôi một tách cafe; Tôi sẽ rất vui khi được thưởng thức nó. Mua tôi một tách cà phê Paypal ## 🔵 Máy chủ Discord và Linkedin Nhấp vào nút dưới đây để tham gia máy chủ Discord hoặc Linkedin. Tham gia máy chủ Discord Kết nối trên Linkedin ## 📐 Cách hoạt động Chỉ cần thiết kế một giao diện bằng Figma, sau đó dán đường dẫn tệp Figma và mã thông báo API vào Tkinter Designer. Tkinter Designer sẽ tự động tạo tất cả mã và hình ảnh cần thiết để tạo GUI trong Tkinter. Cách hoạt động ___ ## 🎯 Ví dụ Có vô số khả năng với Tkinter Designer, nhưng đây là một số giao diện người dùng có thể được sao chép hoàn hảo trong Tkinter. Các tác phẩm sau không phải do tôi tạo ra. ### HotinGo [(Thông tin chi tiết)](https://github.com/Just-Moh-it/HotinGo) Ví dụ 3 ### CodTubify [(Thông tin chi tiết)](https://github.com/iamDyeus/CodTubify) Ví dụ 3 ### BeAnonymous [(Thông tin chi tiết)](https://github.com/MambaCodes/BeAnonymous) Ví dụ 1 ### MarkMe [(Thông tin chi tiết)](https://github.com/Ayan-thecodeking/MarkMe) Ví dụ 2 ## 🎓 Hướng dẫn sử dụng Để biết cách sử dụng Tkinter Designer, hãy xem hướng dẫn chi tiết trong tệp [README.md](https://github.com/ParthJadhav/Tkinter-Designer/blob/main/README.md) trên GitHub. Nếu bạn có bất kỳ câu hỏi hoặc cần sự trợ giúp, đừng ngần ngại đặt câu hỏi. Tôi sẽ cố gắng trả lời bạn càng nhanh càng tốt. Tôi hy vọng bạn tận hưởng việc sử dụng Tkinter Designer và nó mang lại hiệu quả và sự tiện lợi cho quá trình phát triển ứng dụng GUI Python của bạn. Nếu bạn cần thêm thông tin hoặc hỗ trợ, xin vui lòng cho tôi biết. ___ ## 🎯 Ví dụ Có vô số khả năng với Tkinter Designer, nhưng đây là một số giao diện người dùng có thể được sao chép hoàn hảo trong Tkinter. Những giao diện dưới đây không phải do tôi tạo ra. ### HotinGo [(Xem thêm)](https://github.com/Just-Moh-it/HotinGo) Ví dụ 3 ### CodTubify [(Xem thêm)](https://github.com/iamDyeus/CodTubify) Ví dụ 3 ### BeAnonymous [(Xem thêm)](https://github.com/MambaCodes/BeAnonymous) Ví dụ 1 ### Frame Recorder [(Xem thêm)](https://github.com/mehmet-mert/FrameRecorder) Ví dụ 3 ### WhatBulk [(Xem thêm)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link) Ví dụ 3 ### Atarbals-Modern-Antivirus [(Xem thêm)](https://github.com/HarshscGithub/Atarbals-Modern-Antivirus) Ví dụ 3 ## 🔥 Triển lãm Hãy cho tôi biết nếu Tkinter Designer đã được sử dụng để tạo ứng dụng của bạn. Nhiều ví dụ sẽ hữu ích cho những người khác! (Xem: [Liên hệ](#-contact-me)) hoặc sử dụng phần [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) trong phần Thảo luận. ## 📄 Giấy phép Tkinter Designer được cấp giấy phép theo Giấy phép BSD 3-Clause "New" hoặc "Revised". [Xem tại đây.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | Quyền hạn | Hạn chế | Điều kiện | --- | --- | --- ✓ Sử dụng thương mại | × Trách nhiệm | 🛈 Giấy phép và thông báo bản quyền ✓ Sửa đổi | × Bảo hành ✓ Phân phối ✓ Sử dụng cá nhân ## Đóng góp Tất cả các đóng góp từ cộng đồng mã nguồn mở, cá nhân và đối tác đều được hoan nghênh. Thành tựu của chúng tôi là kết quả của sự tham gia tích cực của bạn. [Hướng dẫn đóng góp](docs/CONTRIBUTING.md) [Quy tắc ứng xử](CODE_OF_CONDUCT.md) [LEARN.md](LEARN.md) ## 📝 Liên hệ Nếu bạn muốn liên hệ với tôi, bạn có thể liên hệ tôi qua Jadhavparth99@gmail.com Kết nối với tôi trên [](https://www.linkedin.com/in/parthjadhav04/ --- ### README.Zh CN (`docs/README.zh-CN.md`)

logo

Tkinter Designer

自动化 Tkinter GUI 创建


___ ## 💡 介绍 Tkinter Designer 旨在加速 Python 中的 GUI 开发过程。 它使用著名的设计软件 [Figma](https://www.figma.com/) 使在 Python 中创建漂亮的 Tkinter GUI 变得轻而易举。 Tkinter Designer 使用 Figma API 来分析设计文件并创建 GUI 所需的相应代码和文件。 甚至 Tkinter Designer 的 GUI 也是使用 Tkinter Designer 创建的。 Tkinter Designer GUI ## ☄️ Tkinter 设计器的优势 1. 拖放界面 2. 比手动创建代码快得多。 3. 能够创建更漂亮的界面。 ___ ## ⚡️ 安装和使用 Tkinter Designer 这些说明包含有关安装和使用 Tkinter Designer 的所有信息，以及用于故障排除和报告问题的信息. [阅读说明书](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.zh-CN.md) ## 🦋 支持 Tkinter Designer 没有咖啡的生活是艰难的……对不起，我还没有喝过咖啡。 Buy Me A Coffee ___
## 📐 这个怎么运作 用户唯一需要做的就是用 Figma 设计一个界面，然后将 Figma 文件 URL 和 API 令牌粘贴到 Tkinter Designer 中。 Tkinter Designer 将自动生成在 Tkinter 中创建 GUI 所需的所有代码和图像。 How it Works ___
## 🎯 Examples Tkinter Designer 的可能性是无限的，但这里有几个可以在 Tkinter 中完美复制的 GUI。 以下不是我的创作。 ### 注册页面 Example 1 ### 品牌页面 Example 2 ### Frame Recorder [(More Info)](https://github.com/mehmet-mert/FrameRecorder) Example 3 ## 🔥 展示柜 如果您的应用是使用 Tkinter Designer 制作的，请告诉我。 其他人看到更多的例子会很有帮助！ （参见：[Contact Me](#-contact-me)）或使用[Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) 部分讨论 . ___
## 📝 联络我 如果你想联系我 - Jadhavparth99@gmail.com ___
## 📄 执照 Tkinter Designer 根据 BSD 3 条款“新”或“修订”许可获得许可。 [View Here.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE) | 权限 | 限制 | 使适应 | --- | --- | --- ✓ 商业用途 | × 责任 | 🛈 许可和版权声明 ✓ 修改 | × 保修单 ✓ 分配 ✓ 私人使用 --- ### Build (`docs/build.md`) # Building & Releasing to Pypi with Poetry ## A Note: Python packaging is a hot topic, and everyone has an opinion about it. We migrated to poetry based on discussion in [pull request #84](https://github.com/ParthJadhav/Tkinter-Designer/pull/84) Have we made a huge mistake? If so, open an issue and let us know! ## Publishing to testpypi 1. [Install Poetry](https://python-poetry.org/docs/#installation) - ! do not pip install poetry 2. `poetry install` - installs dependencies 3. `poetry config repositories.testpypi https://test.pypi.org/legacy/` 4. `poetry version $VERSION` - bump the version number to the value of <$VERSION> 5. `poetry publish --build -r testpypi -u __token__ -p $TESTPYPI_TOKEN` ## Packaging [deprecated in Tkinter-Designer as of 1.0.100] > This was preserved as a reference for anyone interested A brief explanation: packages in python are implicitly declared by providing an \_\_init\_\_.py file. Any directory with that file present is a package, every file within a package is a module. So, point the build environment at the dir(s) you want to include in your package in the setup.cfg file. pyproject.toml is a declarative description of the build environment. Our build environment needs wheel and setuptools packages to handle building for us. [Here's a tutorial](https://packaging.python.org/tutorials/packaging-projects/) on building/releasing packages for anyone with more interest. ### Manual Release Staging environment: - Make sure conventions are followed and tests pass: `flake8 && pytest` - Sign up for an account at [test.pypi.org](https://test.pypi.org/) and get an API key. - Change the package name in setup.cfg to end in "-" - Create an API key/token for yourself - Create a .pypirc file in your home directory with something like: ``` [testpypi] username = __token__ password = pypi- ``` - `pip install --upgrade build twine` - Run `python -m build` from the main project dir, it will create a './dist' dir with the tarball and zip files. - Run twine to publish the dist to the test pypi registry: `python -m twine upload --repository testpypi dist/*` - To test: - create a new project directory, blank - create a venv or whatever you're into: `python -m venv .venv` - activate your virtualenv - `pip install -i https://test.pypi.org/simple/ tkdesigner-cli-jvendegna==1.0.11` for example. That one works, feel free to test it. - `tkdesigner $YOUR_FIGMA_TOKEN -f` - `python build/gui.py` * Note: everywhere you see `python` is python3, not python2 --- ### Instructions.Ar DZ (`docs/instructions.ar-DZ.md`)
# كيفية استعمال Tkinter Designer ___ ## Table of Contents 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. [Access Token الشخصي](#using-1) 2. [الحصول على URL الملف](#using-2) 3. [استعمال CLI](#using-cli) 4. [استعمال GUI](#using-gui) 4. [**Troubleshooting**](#Troubleshooting)

# البدء [[الأعلى](#table-of-contents)] ## 1. تثبيت Python قبل استعمال Tkinter Designer, ستحتاج إلى تثبيت Python. - [رابط تثبيت Python](https://www.python.org/downloads) - [رابط مفيد لثبيت Python على أنظمة تشغيل مختلفة](https://wiki.python.org/moin/BeginnersGuide/Download) *لاحقا في هذا الدليل، ستستعمل Package Installer for Python (pip), والذي قد يتطلب منك إضافة Python إلى نظام PATH* ___
## 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 من source code, اتبع الخطوات أدناه. 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 بالإرشادات التالية. If you already have created a file then skip to [**Using Tkinter Designer**](#Using-Tkinter-Designer) Section. إذا أنشأت الملف بالفعل، فانتقل إلى قسم [**استعمال Tkinter Designer**](#Using-Tkinter-Designer) ___
## 3. إنشاء حساب Figma 1. باستعمال متصفح ويب إذهب إلى [figma.com](https://www.figma.com/) وانقر على 'Sign up' 2. أدخل معلوماتك وتحقق من بريدك الإلكتروني 3. قم بإنشاء ملف تصميم Figma جديد 4. إبدأ بإنشاء الواجهة - القسم الموالي يغطي التنسيق المطلوب لإدخال Tkinter Designer - [هنا الدورة التعليمية الرسمية للبرنامج Figma](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [هنا القناة الرسمية في اليوتوب Figma](https://www.youtube.com/c/Figmadesign/featured) - [هنا مقر المساعدة Figma](https://help.figma.com/hc/en-us)

# تنسيق تصميم Figma [[الأعلى](#table-of-contents)] ## 1. المرجع
### التسمية مهمة | اسم العنصر في Figma | عنصر Tkinter | | --- | --- | | Button | Button | | Line | Line | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
يعتمد الكود الذي تم إنشاؤه بواسطة Tkinter Designer على أسماء العناصر من تصميم Figma الخاص بك، وعلى هذا النحو، تحتاج إلى تسمية العناصر الخاصة بك وفقًا لذلك. في Figma ، أعد تسمية عناصرك بالنقر عليها في لوحة Layers. ___
## 2. دليل العناصر
1. **أولاً، قم بإنشاء Frame والتي ستكون بمثابة نافذة Tkinter**

2. **إضافة صور** - يمكن إنشاء الصور باستخدام الأشكال و / أو الصور - إذا كنت تستخدم أشكالًا / صورًا متعددة ، فيجب عليك تجميعها معًا عن طريق تحديدها جميعًا والضغط عليها CTRL/⌘ + G - وبعد ذلك، قم بتسمية العنصر أو المجموعة ب "Image".

3. **نص (نص عادي)** - استخدم مفتاح T لتنشيط أداة Text ، ثم أضف النص حسب الرغبة - لا يلزم إعادة تسمية النص لاستخدامه في Tkinter Designer - اضغط على مفتاح Return أو Enter للانتقال إلى السطر التالي.

4. **الإدخال (إدخال مستخدم أحادي السطر)** - قم بتنشيط أداة Rectangle باستخدام R - اضبط المستطيل حسب رغبتك - تأكد من تسمية المستطيل "TextBox"

5. **منطقة النص (إدخال مستخدم متعدد الأسطر)** - قم بتنشيط أداة Rectangle باستخدام R - اضبط المستطيل حسب رغبتك - تأكد من تسمية المستطيل "TextArea" 6. **Rectangle** - قم بتنشيط أداة Rectangle باستخدام R - اضبط المستطيل حسب رغبتك - تأكد من تسمية المستطيل "Rectangle".

7. **زر عادي** - أضف مستطيلاً ليكون بمثابة زر في واجهة المستخدم - اختياري: أضف نصًا للزر - حدد الزر (مستطيل) ، وأي نص اختياري ، ثم قم بتجميعها باستخدام CTRL / & # 8984؛ + G - قم بتسمية المجموعة "Button"

إلجأ إلى هذا [الفيديو](https://youtu.be/Qd-jJjduWeQ) إذا واجهت أي مشاكل 8. **زر مدور** - أضف مستطيلًا ليكون بمثابة زر في واجهة المستخدم - اختياري: أضف نصًا للزر - إجعلها مدورة بإضافة corner radius عن طريق تحديد المستطيل وإضافة corner radius من الجهة اليمنى. [إقرأ المزيد عنها](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - قم بإنشاء مستطيل بنفس حجم الزر الخاص بك. لا تجعلها مدورة - قم بتغيير لون المستطيل ليطابق الخلفية - الآن قم بتحريك المستطيل الذي تم إنشاؤه حديثًا أسفل الزر الرئيسي (مستطيل) - حدد الزر والمستطيل وأي نص اختياري ، ثم قم بتجميعها باستخدام CTRL / & # 8984؛ + G - قم بتسمية المجموعة "Button" #### إلجأ إلى هذا [الفيديو](https://youtu.be/Qd-jJjduWeQ) إذا واجهت أي مشاكل

# استعمال Tkinter Designer [[الأعلى](#table-of-contents)] ## المدخلات المطلوبة هناك بعض المدخلات التي ستحتاج إلى جمعها لتتمكن من استخدام Tkinter Designer. ### 1. Access Token الشخصي 1. قم بتسجيل الدخول إلى حساب Figma الخاص بك 2. انتقل إلى الإعدادات 3. في علامة التبويب **الحساب** ، قم بالتمرير لأسفل إلى **Personal Access tokens** 4. أدخل اسم access token الخاص بك في نموذج الإدخال واضغط على Enter 5. سيتم إنشاء access token الخاص بك. - انسخ هذا access token واحتفظ به في مكان آمن. - **لن تحصل على فرصة أخرى لنسخ هذا token.** ### 2. الحصول على URL الملف 1. في ملف تصميمك Figma، إضغط على زر **Share** في القسم العلوي، ثم على **🔗 Copy link** ## باستعمال CLI يعد استخدام CLI أمرًا بسيطًا مثل تثبيت الحزمة وتشغيل أداة CLI. ### من PyPi يمكنك استخدام الأوامر أدناه كاختبار باستبدال $FILE_URL و $FIGMA_TOKEN ببياناتك. إذا لم يكن لديك token والرابط فارجع إلى [**المدخلات المطلوبة**](#using-1). ``` bash pip install tkdesigner tkdesigner $FILE_URL $FIGMA_TOKEN ``` ### من Source لاستخدام CLI من الكود المصدري ، تحتاج إلى clone repository ثم اتباع الإرشادات أدناه. يمكنك استخدام الأوامر أدناه كاختبار باستبدال $FILE_URL و $FIGMA_TOKEN ببياناتك. إذا لم يكن لديك token والرابط فارجع إلى [**المدخلات المطلوبة**](#using-1). ```bash $ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN # To learn more about how to use the cli, pass the --help flag $ python -m tkdesigner --help ``` ### المخرجات بشكل تلقائي، كود واجهة المستخدم سيكتب إلى build/gui.py. تستطيع تحديد path المخرج باستعمال flag `-o` مع path. لتشغيل واجهة المستخدم المنتجة، قم بcd إلى path الذي ستكتب إليه (build/ مثلاً) وقم بتشغيله مثل أي واجهة مستخدم Tkinter. ```bash cd build python3 gui.py ``` ## استعمال واجهة المستخدم ### افتح Tkinter Designer قبل تنفيذ الخطوات التالية
1. افتح Tkinter Designer GUI عن طريق ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. إنسخ *access token الشخصي إلى* **Token ID** في Tkinter Designer 3. إنسخ الرابط إلى **File URL** في Tkinter Designer 4. إضغط على **Output Path** لفتح متصفح الملفات 5. إختر path مخرجات وإضغط على **Select Folder** 6. إضغط على **Generate** سيتم وضع ملفات الإخراج من Tkinter Designer في path الذي اخترته ، داخل مجلد جديد يسمى **build**. تهانينا ، لقد قمت الآن بإنشاء Tkinter GUI باستخدام Tkinter Designer!

# Troubleshooting [[الأعلى](#table-of-contents)] - العناصر غير مرئية؟ في غير محلها؟ - يرجى التأكد من أن ملف Figma الخاص بك يحتوي على عناصره المسماة بشكل صحيح. * أنظر إلى [تنسيق تصميم Figma, §1](#formatting-1) - الزر له خلفية رمادية من غير قصد؟ - تأكد من إضافة مستطيل خلف عنصر الزر الخاص بك ، وأن لون التعبئة الخاص به هو نفسه لون الخلفية - عناصر غير صحيحة؟ - تأكد من تسمية العناصر الخاصة بك بشكل صحيح في Figma - أنظر إلى [تنسيق تصميم Figma, §1](#formatting-1) - النافذة أكبر من الشاشة؟ - قم بتصغير العناصر الخاصة بك في Figma - الملفات لم تُولّد؟ - أعد تشغيل Tkinter Designer - تحقق مرة أخرى access token وعنوان URL - تأكد من أن التصميم الخاص بك يحتوي على Frame - شيء آخر؟ - [الإبلاغ عن المشكلات غير المدرجة هنا على GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new)
--- ### Instructions.Ban BAN (`docs/instructions.ban-BAN.md`) # কবিতা দিয়ে পাইপিকে নির্মাণ ও মুক্তি দেওয়া ## একটি নোট: পাইথন প্যাকেজিং একটি আলোচিত বিষয় এবং প্রত্যেকেরই এটি সম্পর্কে মতামত রয়েছে। আমরা [Pull request #84](https://github.com/ParthJadhav/Tkinter-Designer/pull/84) এ আলোচনার ভিত্তিতে কবিতায় স্থানান্তরিত হয়েছি। আমরা কি একটি বড় ভুল করেছি? যদি তাই হয়, একটি সমস্যা খুলুন এবং আমাদের জানান! ## টেস্টপিপিতে প্রকাশ করা হচ্ছে 1. [কবিতা ইনস্টল করুন](https://python-poetry.org/docs/#installation) - ! কবিতা ইনস্টল পিপ দিয়ে না 2. `poetry install` - নির্ভরতা ইনস্টল করে 3. `poetry config repositories.testpypi https://test.pypi.org/legacy/` 4. `poetry version $VERSION` - সংস্করণ নম্বরটিকে <$VERSION>-এর মানের সাথে বাম্প করুন 5. `poetry publish --build -r testpypi -u __token__ -p $TESTPYPI_TOKEN` ## প্যাকেজিং [1.0.100 অনুযায়ী টিকিন্টার-ডিজাইনার-এ অবচয়িত] > এটি আগ্রহী কারো জন্য একটি রেফারেন্স হিসাবে সংরক্ষিত ছিল একটি সংক্ষিপ্ত ব্যাখ্যা: পাইথন-এ প্যাকেজগুলি একটি \_\_init\_\_.py ফাইল প্রদান করে পরোক্ষভাবে ঘোষণা করা হয়। সেই ফাইলের সাথে যেকোন ডিরেক্টরি বর্তমান একটি প্যাকেজ, একটি প্যাকেজের মধ্যে থাকা প্রতিটি ফাইল একটি মডিউল। সুতরাং, আপনি setup.cfg ফাইলে আপনার প্যাকেজে যে dir(গুলি) অন্তর্ভুক্ত করতে চান সেখানে বিল্ড এনভায়রনমেন্ট নির্দেশ করুন। pyproject.toml হল বিল্ড পরিবেশের একটি ঘোষণামূলক বর্ণনা। আমাদের বিল্ডিং এনভায়রনমেন্টে আমাদের জন্য বিল্ডিং পরিচালনা করার জন্য চাকা এবং সেটআপ টুল প্যাকেজ প্রয়োজন। [এখানে একটি টিউটোরিয়াল আছে](https://packaging.python.org/tutorials/packaging-projects/) আরো আগ্রহ আছে এমন কারো জন্য প্যাকেজ তৈরি/রিলিজ করার বিষয়ে। ### ম্যানুয়াল রিলিজ স্টেজিং পরিবেশ: - নিশ্চিত করুন যে নিয়মগুলি অনুসরণ করা হয়েছে এবং পরীক্ষায় উত্তীর্ণ হয়েছে: `flake8 && pytest`৷ - [test.pypi.org](https://test.pypi.org/) এ একটি অ্যাকাউন্টের জন্য সাইন আপ করুন এবং একটি এপিআই কী পান৷ - "-" এ শেষ করতে setup.cfg-এ প্যাকেজের নাম পরিবর্তন করুন - নিজের জন্য একটি এপিআই কী/টোকেন তৈরি করুন - আপনার হোম ডিরেক্টরিতে একটি .pypirc ফাইল তৈরি করুন এরকম কিছু দিয়ে: ``` [testpypi] username = __token__ password = pypi- ``` - `pip install --upgrade build twine` - মূল প্রকল্প ডির থেকে `পাইথন -এম বিল্ড` চালান, এটি টারবল এবং জিপ ফাইলের সাথে একটি './dist' ডির তৈরি করবে। - পরীক্ষা pypi রেজিস্ট্রিতে dist প্রকাশ করতে twine চালান: `python -m twine upload --repository testpypi dist/*` - পরীক্ষা করতে: - একটি নতুন প্রকল্প ডিরেক্টরি তৈরি করুন, ফাঁকা - একটি venv তৈরি করুন বা আপনি যা কিছুতে আছেন: `python -m venv .venv` - আপনার virtualenv সক্রিয় করুন - `pip install -i https://test.pypi.org/simple/ tkdesigner-cli-jvendegna==1.0.11` উদাহরণস্বরূপ। যে এক কাজ করে, এটা পরীক্ষা নির্দ্বিধায়। - `tkdesigner $YOUR_FIGMA_TOKEN -f` - `python build/gui.py` * দ্রষ্টব্য: আপনি যেখানেই `python` দেখছেন সেখানে পাইথন ৩, পাইথন২ নয় --- ### Instructions.Fr FR (`docs/instructions.fr-FR.md`) # Comment utiliser Tkinter Designer ___ ## Sommaire 1. [**Commencer**](#getting-started-1) 1. [Installer Python](#getting-started-1) 2. [Installer Tkinter Designer](#getting-started-2) 3. [Créer un compte Figma](#getting-started-3) 2. [**Formater votre design Figma**](#formatting-1) 1. [Référence](#formatting-1) 2. [Guide des éléments](#formatting-2) 3. [**Utiliser Tkinter Designer**](#Using-Tkinter-Designer) 1. [Clé d'accès personnelle](#using-1) 2. [URL du fichier](#using-2) 3. [Utilisant CLI](#using-cli) 4. [Utilisant GUI](#using-gui) 4. [**Diagnostic des anomalies**](#Troubleshooting)

# Commencer [[Haut](#Sommaire)] ## 1. Installer Python Avant d'utiliser Tkinter Designer, vous devez installer Python. - [Voici un lien vers la page de téléchargement de Python.](https://www.python.org/downloads) - [Voici un guide utile pour installer Python sur divers systèmes d'exploitation.](https://wiki.python.org/moin/BeginnersGuide/Download) *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](https://github.com/ParthJadhav/Tkinter-Designer). 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 ` 2. Changez votre répertoire de travail en Tkinter Designer. `cd Tkinter-Designer` 3. 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**](#Using-Tkinter-Designer). ___
## 3. Créer un compte Figma 1. Dans un navigateur web, rendez-vous sur [figma.com](https://www.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 - La section suivante couvre le formatage requis pour l'entrée de Tkinter Designer. - [Série officielle de tutoriels Figma pour les débutants](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [Chaîne YouTube officielle Figma](https://www.youtube.com/c/Figmadesign/featured) - [Centre d'aide Figma](https://help.figma.com/hc/en-us)

# Formater votre design Figma [[Haut](#Sommaire)] ## 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](https://youtu.be/Qd-jJjduWeQ) si vous rencontrez tout problème

8. **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](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - 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](https://youtu.be/Qd-jJjduWeQ) si vous rencontrez tout problème

# Utiliser Tkinter Designer [[Haut](#sommaire)] ### 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**](#using-1) . ```bash # 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. ```bash cd build python3 gui.py ``` ## Utilisation de l'interface graphique 1. Ouvrez TKinter Designer en ``` cd Tkinter-Designer interface graphique cd python3 gui.py ``` 2. Collez votre *jeton d'accès personnel* dans le formulaire **ID de jeton** dans Tkinter Designer 3. Collez le lien dans le formulaire **URL du fichier** dans Tkinter Designer 4. Cliquez sur le formulaire **Chemin de sortie** pour ouvrir un navigateur de fichiers 5. Choisissez un chemin de sortie et cliquez sur **Sélectionner un dossier** 6. 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](#sommaire)] - Éléments non visibles ? Mal placés ? - Veuillez vous assurer que votre fichier Figma a ses éléments nommés correctement. * Voir [Formater votre dessin Figma, §1](#formatting-1) - 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 ? - Assurez-vous d'avoir nommé correctement vos éléments dans Figma - Se référer à [Formater votre design Figma, §1](#formatting-1) - 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 ? - [Signalez des problèmes non répertoriés ici sur GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.Gu GU (`docs/instructions.gu-GU.md`) # How to use Tkinter Designer ___ ## અનુક્રમણિકા 1. **પ્રારંભ કરી રહ્યા છીએ** 1. પાયથોન ઇન્સ્ટોલ કરો 2. ટીકીટર ડિઝાઇનર ઇન્સ્ટોલ કરો 3. ફિગ્મા એકાઉન્ટ બનાવો 2. **તમારી ફિગ્મા ડિઝાઇન ફોર્મેટિંગ** 1. સંદર્ભ 2. એલિમેન્ટ ગાઇડ 3. **ટિંકટર ડિઝાઇનરનો ઉપયોગ કરીને** 1. વ્યક્તિગત પ્રવેશ ટોકન 2. ફાઇલ URL 3. તમારા જનરેટેડ કોડની કસોટી કરો 4. **મુશ્કેલીનિવારણ**

# પ્રારંભ [[અનુક્રમણિકા]](#અનુક્રમણિકા) ## 1. પાયથોન ઇન્સ્ટોલ કરો ટિંકટર ડિઝાઇનરનો ઉપયોગ કરતા પહેલા, તમારે પાયથોન ઇન્સ્ટોલ કરવાની જરૂર છે. - [અહીં Python ડાઉનલોડ્સ Page ની એક લિંક છે.](https://www.python.org/downloads) - [વિવિધ operating સિસ્ટમો પર પાયથોન install કરવા માટે અહીં સહાયક માર્ગદર્શિકા છે.](https://wiki.python.org/moin/BeginnersGuide/Download) - પછી આ માર્ગદર્શિકામાં, તમે Python(pip) માટે પેકેજ ઇન્સ્ટોલરનો ઉપયોગ કરશો, જેના માટે તમારે તમારી સિસ્ટમ પાથમાં પાયથોન ઉમેરવાની જરૂર પડી શકે છે. * ___
## 2. ટિંકટર ડિઝાઇનર ઇન્સ્ટોલ કરો એકવાર તમે પાયથોન ઇન્સ્ટોલ કર્યા પછી, તમે Tkinter ડિઝાઇનર [Official Repository](https://github.com/ParthJadhav/Tkinter-Designer) પરથી ડાઉનલોડ કરી શકો છો. જમણી બાજુની સાઇડબારમાં, નવીનતમ પ્રકાશનને ક્લિક કરો અને **Assets** હેઠળ, `tkinter_designer.exe` પસંદ કરો. એક્ઝેક્યુટેબલ ડાઉનલોડ થયા પછી, તમે પ્રોગ્રામ ચલાવવા માટે તૈયાર છો! સ્રોત કોડમાંથી ટિંક્ટર ડિઝાઇનર ચલાવવા માટે, નીચે આપેલા સૂચનોને અનુસરો. 1. સ્રોત ફાઇલોને ટિંકટર ડિઝાઇનર માટે જાતે ડાઉનલોડ કરીને અથવા ઉપયોગ કરીને ડાઉનલોડ કરો git :- `git clone https://github.com/ParthJadhav/Tkinter-Designer.git` 2. તમારી કાર્યકારી ડિરેક્ટરીને ટીકીટર ડિઝાઇનર પર બદલો `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` - જો આ હજી પણ કામ કરતું નથી, તો ખાતરી કરો કે પાયથોન PATH માં ઉમેરવામાં આવ્યો છે. આ બધી આવશ્યકતાઓ અને ટિંકટર ડિઝાઇનર ઇન્સ્ટોલ કરશે. તમે ટિંકટર ડિઝાઇનરનો ઉપયોગ કરો તે પહેલાં તમારે નીચેની સૂચનાઓ સાથે ફિગ્મા ફાઇલ બનાવવાની જરૂર છે. જો તમે પહેલેથી જ ફાઇલ બનાવી છે, તો પછી [** ટીકીટર ડિઝાઇનરનો ઉપયોગ કરીને **] (# ઉપયોગ કરીને-ટિંકિટર-ડિઝાઇનર) વિભાગ પર જાઓ. ___
## 3. ફિગ્મા એકાઉન્ટ બનાવો 1. વેબ બ્રાઉઝરમાં, [figma.com](https://www.figma.com/) પર નેવિગેટ કરો અને 'સાઇન અપ' ક્લિક કરો. 2. તમારી માહિતી દાખલ કરો, પછી તમારું ઇમેઇલ ચકાસો 3. નવી ફિગ્મા ડિઝાઇન ફાઇલ બનાવો 4. તમારી જીયુઆઈ બનાવવાનું પ્રારંભ કરો - આગલા વિભાગમાં ટિંકટર ડિઝાઇનર ઇનપુટ માટે આવશ્યક ફોર્મેટિંગ આવરી લે છે. - [નવા નિશાળીયા માટે ફિગ્મા ટ્યુટોરિયલ શ્રેણી અહીં છે.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [અહીં ફિગ્મા યુટ્યુબ ચેનલની officialફિશિયલ ચેનલ છે.](https://www.youtube.com/c/Figmadesign/featured) - [અહીં ફિગ્મા સહાય કેન્દ્ર છે.](https://help.figma.com/hc/en-us)

# તમારી ફિગ્મા ડિઝાઇનને ફોર્મેટ કરી રહ્યું છે ## 1. સંદર્ભ
### નામકરણ મહત્વપૂર્ણ છે | ફિગ્મા Element નામ | Tkinter | | --- | --- | | Button | Button | | Line | Line | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
Tkinter ડિઝાઇનર દ્વારા જનરેટ થયેલ કોડ તમારી ફિગ્મા ડિઝાઇનના તત્વોના નામ પર આધારિત છે અને, જેમ કે, તમારે તે મુજબ તમારા તત્વોનું નામ લેવાની જરૂર છે. ફિગ્મામાં, તમારા તત્વોને સ્તર પેનલમાં ડબલ-ક્લિક કરીને નામ બદલો. ___
## 2. એલિમેન્ટ માર્ગદર્શિકા
1. **પ્રથમ, એક ફ્રેમ બનાવો જે તમારી ટિંકટર વિંડો તરીકે કામ કરશે.**

2. **છબીઓ ઉમેરવી** - છબીઓ આકાર અને / અથવા છબીઓનો ઉપયોગ કરીને બનાવી શકાય છે - જો તમે બહુવિધ આકારો / છબીઓનો ઉપયોગ કરો છો, તો તમારે બધાને પસંદ કરીને અને CTRL / & # 8984 ને દબાવવાથી તેમને એક સાથે જૂથ બનાવવું જોઈએ; + G - તે નામ પછી તત્વ અથવા જૂથને "છબી" તરીકે નામ આપો.

*. **ટેક્સ્ટ (સામાન્ય ટેક્સ્ટ)** - ટેક્સ્ટ ટૂલને સક્રિય કરવા માટે T કીનો ઉપયોગ કરો, પછી ઇચ્છિત લખાણ ઉમેરો ટિંકટર ડિઝાઇનરના ઉપયોગ માટે ટેક્સ્ટનું નામ બદલવું જરૂરી નથી આગલી લાઇન પર જવા માટે સ્પષ્ટ રીતે Return અથવા Enter કી દબાવો.

- **એન્ટ્રી (સિંગલ લાઇન યુઝર ઇનપુટ)** - R સાથે લંબચોરસ ટૂલને સક્રિય કરો - તમારી પસંદગી પ્રમાણે લંબચોરસને સમાયોજિત કરો - ખાતરી કરો કે લંબચોરસનું નામ "TextBox" છે

- **ટેક્સ્ટ ક્ષેત્ર (મલ્ટિ-લાઇન યુઝર ઇનપુટ)** - R સાથે લંબચોરસ ટૂલને સક્રિય કરો - તમારી પસંદગી પ્રમાણે લંબચોરસને સમાયોજિત કરો - ખાતરી કરો કે લંબચોરસનું નામ "TextArea" છે 6. **લંબચોરસ** R સાથે લંબચોરસ ટૂલને સક્રિય કરો - તમારી રુચિ પ્રમાણે લંબચોરસને સમાયોજિત કરો - ખાતરી કરો કે લંબચોરસનું નામ "Rectangle" રાખવામાં આવ્યું છે

7. **સામાન્ય બટન** - તમારા GUI માં બટન તરીકે સેવા આપવા માટે લંબચોરસ ઉમેરો - વૈકલ્પિક: બટન માટે ટેક્સ્ટ ઉમેરો - બટન (લંબચોરસ) અને કોઈપણ લખાણ, પસંદ કરો પછી તેને Ctrl/⌘ + G સાથે જૂથ બનાવો - જૂથનું નામ "Button" #### જો તમને કોઈ મુશ્કેલીનો સામનો કરવો પડે તો [આ વિડિઓ](https://youtu.be/Qd-jJjduWeQ) નો સંદર્ભ લો

8. **ગોળાકાર બટન** - તમારા GUI માં બટન તરીકે સેવા આપવા માટે લંબચોરસ ઉમેરો - વૈકલ્પિક: બટન માટે ટેક્સ્ટ ઉમેરો - લંબચોરસ પસંદ કરીને અને ખૂણે ત્રિજ્યાને જમણી બાજુથી ઉમેરીને તેને ગોળાકાર બનાવો. [તેના પર વધુ વાંચો](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - તમારા બટનના સમાન કદ સાથે એક લંબચોરસ બનાવો. તેને ગોળાકાર ન બનાવો. પૃષ્ઠભૂમિ સાથે મેળ કરવા માટે લંબચોરસનો રંગ બદલો - હવે નવા બનાવેલા લંબચોરસને મુખ્ય બટન (લંબચોરસ) ની નીચે ખસેડો. - બટન, લંબચોરસ અને કોઈપણ વૈકલ્પિક ટેક્સ્ટ પસંદ કરો, પછી તેમને Ctrl / ⌘ + G સાથે જૂથ બનાવો - જૂથનું નામ "Button" #### જો તમને કોઈ મુશ્કેલીનો સામનો કરવો પડે તો [આ વિડિઓ](https://youtu.be/Qd-jJjduWeQ) નો સંદર્ભ લો

### ટિંકિટર ડિઝાઇનરને નીચેના પગલાઓ કરતા પહેલા ખોલો
## 1. પર્સનલ એક્સેસ ટોકન 1. તમારા ફિગ્મા એકાઉન્ટમાં લ .ગ ઇન કરો 2. સેટિંગ્સ પર નેવિગેટ કરો The. **એકાઉન્ટ** ટ tabબમાં, **વ્યક્તિગત પ્રવેશ ટોકન્સ** પર નીચે સ્ક્રોલ કરો The. પ્રવેશ ફોર્મમાં તમારી toક્સેસ ટોકનનું નામ દાખલ કરો અને Enter દબાવો 5. તમારી Personal Access Token બનાવવામાં આવશે. - આ ટોકન Copy કરો અને તેને ક્યાંક સુરક્ષિત રાખો. - **તમને આ ટોકન copy કરવાની બીજી તક નહીં મળે.** 6. તમારી Private Access Token Tkinter ડિઝાઇનરમાં **Token Id** ફોર્મમાં પેસ્ટ કરો ___
## 2. ફાઇલ URL 1. તમારી ફિગ્મા ડિઝાઇન ફાઇલમાં, ટોચની પટ્ટીમાં **Share** બટનને ક્લિક કરો, પછી **🔗** પર ક્લિક કરો; link Copy કરો 2. Tkinter ડિઝાઇનરમાં **File URL** ફોર્મમાં લિંક પેસ્ટ કરો ___
## ની મદદથી CLI CLI નો ઉપયોગ એ પેકેજ ઇન્સ્ટોલ કરવા અને CLI ટૂલ ચલાવવા જેટલું સરળ છે. તમે પેદા ફિગ્મા પર્સનલ Accessક્સેસ ટોકન દ્વારા $ YOUR_FIGMA_TOKEN ને બદલીને તમે પરીક્ષણ તરીકે નીચેનો આદેશ વાપરી શકો છો. ```bash # Example data $ python -m tkdesigner.cli https://www.figma.com/file/WVLnulVsI177tvnxSdqOUZ/Untitled?node-id=0%3A1 $YOUR_FIGMA_TOKEN -f # ક્લાઈટનો ઉપયોગ કેવી રીતે કરવો તે વિશે વધુ જાણવા માટે --help ફ્લેગ પસાર કરો python -m tkdesigner.cli --help ``` ડિફ defaultલ્ટ રૂપે, GUI કોડ build / gui.py પર લખવામાં આવશે. જનરેટ કરેલી GUI, સીડી ચલાવવા માટે તમે તેને બનાવેલ ડિરેક્ટરીમાં (દા.ત. build / -) બનાવો અને તમે ચલાવો તે જ રીતે ચલાવો-ટિંકટર GUI. ```bash cd build $ python3 gui.py ``` ## GUI નો ઉપયોગ કરીને 1. દ્વારા "Tkinter Designer GUI" ખોલો ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. તમારી *Personal Access Token* ટીકીટર ડિઝાઇનરમાં **Token ID** ફોર્મમાં પેસ્ટ કરો 3. ટિંકિટર ડિઝાઇનરમાં **File URL** ફોર્મમાં લિંક પેસ્ટ કરો 4. ફાઇલ બ્રાઉઝર ખોલવા માટે **Select Path** ફોર્મને ક્લિક કરો 5. આઉટપુટ પાથ પસંદ કરો અને **ફોલ્ડર પસંદ કરો** ક્લિક કરો. 6. દબાવો **Generate** ટિંકટર ડિઝાઇનરની આઉટપુટ ફાઇલો તમારી પસંદ કરેલી ડિરેક્ટરીમાં **build** નામના નવા ફોલ્ડરમાં મૂકવામાં આવશે. અભિનંદન, તમે હવે Tkinter ડીઝાઈનરનો ઉપયોગ કરીને તમારું Tkinter GUI બનાવ્યું છે!

# મુશ્કેલીનિવારણ - તત્વો દૃશ્યમાન નથી? ખોટી રીતે? - કૃપા કરીને ખાતરી કરો કે તમારી ફિગ્મા ફાઇલમાં તે તત્વો યોગ્ય નામવાળી છે. - બટનની અકારણ ગ્રે પૃષ્ઠભૂમિ છે? - ખાતરી કરો કે તમે તમારા બટન તત્વની પાછળ એક લંબચોરસ ઉમેર્યો છે, અને તેનો ભરો રંગ પૃષ્ઠભૂમિ જેવો જ છે - ખોટા તત્વો? - ખાતરી કરો કે તમે ફિગ્મામાં તમારા તત્વોનું નામ યોગ્ય રાખ્યું છે - જુઓ [તમારી ફિગ્મા ડિઝાઇન ફોર્મેટિંગ, અને સંપ્રદાય; 1](#formatting-1) - વિંડો સ્ક્રીન કરતા મોટી છે? - ફિગ્મામાં તમારા તત્વોનું કદ ઘટાડવું - ફાઇલો ઉત્પન્ન થતી નથી? ટિંકટર ડિઝાઇનરને ફરીથી પ્રારંભ કરો - Token અને URL ને બે વાર તપાસો - ખાતરી કરો કે તમારી ડિઝાઇનમાં ફ્રેમ છે - કંઈક બીજું? - [અહીં GitHub પર સૂચિબદ્ધ નથી તેવા મુદ્દાઓની જાણ કરો](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.It IT (`docs/instructions.it-IT.md`) # Come usare Tkinter Designer #### Traduzioni - [简体中文](/docs/instructions.zh-CN.md) - [Français](/docs/instructions.fr-FR.md) - [ગુજરાતી](docs/instructions.gu-GU.md) - [Italiano](instructions.it-IT.md) - [عربية](/docs/instructions.ar-DZ.md) - [Turkish](/docs/instructions.tr-TR.md) ___ ## Indice dei contenuti 1. [**Introduzione**](#getting-started-1) 1. [Installa Python](#getting-started-1) 2. [Installa Tkinter Designer](#getting-started-2) 3. [Crea un account Figma](#getting-started-3) 2. [**Formattare il Design di Figma**](#formatting-1) 1. [Riferimento](#formatting-1) 2. [Guida sugli elementi](#formatting-2) 3. [**Utilizza Tkinter Designer**](#Using-Tkinter-Designer) 1. [Personal Access Token](#using-1) 2. [Ottieni l'URL del file](#using-2) 3. [Utilizzare la CLI](#using-cli) 4. [Utilizzare la GUI](#using-gui) 4. [**Risoluzione dei problemi**](#Troubleshooting)

# Introduzione [[Top](#indice-dei-contenuti)] ## 1. Installa Python Prima di utilizzare Tkinter Designer, devi installare Python. - [Questo è un collegamento alla pagina di download di Python.](https://www.python.org/downloads) - [Questa è una guida utile su come installare Python su vari sistemi operativi.](https://wiki.python.org/moin/BeginnersGuide/Download) *In questa guida dovrai utilizzare il Package Installer for Python (pip), il quale potrebbe richiedere di essere aggiunto alla PATH di sistema.* ___
## 2. Installa Tkinter Designer *Tre opzioni:* 1. Utilizza il comando `pip install tkdesigner`; 2. Tramite [poetry](https:python-poetry.org) - `poetry new && cd ` - `poetry add tkdesigner` - `poetry install` Per eseguire i comandi sopra riportati è necessario aver installato [poetry](https:python-poetry.org). 3. Per eseguire Tkinter Designer dal codice sorgente, segui le seguenti istruzioni. 1. Scarica manualmente i file dal codice sorgente di Tkinter Designer by downloading o utilizza GIT. ` git clone https://github.com/ParthJadhav/Tkinter-Designer.git ` 2. Spostati nella directory di Tkinter Designer. `cd Tkinter-Designer` 3. Installa le dipendenze necessarie tramite i seguenti comandi: - `pip install -r requirements.txt` - Se pip non dovesse funzionare, puoi provare ad utilizzare i seguenti comandi: - `pip3 install -r requirements.txt` - `python -m pip install -r requirements.txt` - `python3 -m pip install -r requirements.txt` - Se non dovesse comunque funzionare, assicurati di aver aggiunto Python alla PATH di sistema. Questo installerà Tkinter Designer e le sue dipendenze. Per poter utilizzare Tkinter Designer devi creare un file di Figma seguendo le istruzioni. Qualora avessi già creato il file puoi recarti nella sezione [**Utilizza Tkinter Designer**](#Using-Tkinter-Designer). ___
## 3. Crea un account Figma 1. In un web brwoser, vai su [figma.com](https://www.figma.com/) e clicca su 'Sign up'; 2. Inserisci le tue informazioni, e verifica il tuo indirizzo mail; 3. Crea un nuovo File di Design Figma; 4. Inizia a disegnare la tua interfaccia. - Di seguito delle fonti utili: - [Questa è la serie di tutorial ufficiale di Figma.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [Questo è il canale YouTube ufficiale di Figma.](https://www.youtube.com/c/Figmadesign/featured) - [Questo è il centro di assistenza ufficiale di Figma.](https://help.figma.com/hc/en-us)

# Formatta il tuo Design Figma [[Top](#indice-dei-contenuti)] ## 1. Riferimento
### La denominazione è importante | Nome elemento Figma | Elemento Tkinter | | --- | --- | | Button | Button | | Line | Line | | Text | Testo a scelta | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
Il codice generato da Tkinter Designer è basato sui nomi degli elementi del Design Figma e, visto ciò, devi nominare gli elementi correttamente. In Figma, rinomina i elementi facendovi doppio click nel pannello Layers. ___
## 2. Guida sugli elementi
1. **Per prima cosa, crea un Frame che fungerà come finestra di Tkinter.**

2. **Aggiungi immagini** - Le immagini possono essere importate o create mediante forme - Se desideri utilizzare più forme/immagini, devi raggrupparle selezionandole e premendo i tasti CTRL/⌘ + G - Dopodiché nomina l'elemento o il gruppo "Image"

3. **Testo (Testo normale)** - Usa il tasto T per attivare lo strumento testo, quindi aggiungi il testo desiderato - Il testo non deve essere rinominato per essere utilizzato in Tkinter Designer - Premi il tasto Return o Enter per muoverti alla riga successiva

4. **Input (Inserimento a linea singola)** - Attiva lo strumento rettangolo utilizzando il tasto R - Ridimensiona l'elemento rettangolo a tuo piacimento - Assicurati di rinominare l'elemento rettangolo "TextBox"

5. **Area di testo (Inserimento a linea multipla)** - Attiva lo strumento rettangolo utilizzando il tasto R - Ridimensiona l'elemento rettangolo a tuo piacimento - Assicurati di rinominare l'elemento rettangolo "TextArea" 6. **Rettangolo** - Attiva lo strumento rettangolo utilizzando il tasto R - Ridimensiona l'elemento rettangolo a tuo piacimento - Assicurati di rinominare l'elemento rettangolo "Rectangle"

7. **Pulsante normale** - Aggiungi un rettangolo per farlo funzionare come pulsante - Facoltativo: Aggiungi un testo al tuo pulsante - Seleziona il pulsante (Rettangolo), e l'eventuale testo, e raggruppali premendo i tasti CTRL/⌘ + G - Rinomina il gruppo "Button" #### Guarda [questo video](https://youtu.be/Qd-jJjduWeQ) se dovessi riscontrare problemi.

8. **Pulsante rotondo** - Aggiungi un rettangolo per farlo funzionare come pulsante - Facoltativo: Aggiungi un testo al tuo pulsante - Rendilo rotondo aggiungendo un raggio ai bordi. [Scopri di più qui.](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - Crea un elemento Rettangolo dalle stesse dimensioni del tuo pulsante. Non seguire il punto precedente (dunque non renderlo rotondo) - Cambia il colore dell'elemento Rettangolo in modo da farlo combaciare con lo sfondo - Ora posizionati sull'ultimo elemento Rettangolo creato (quello sottostante) - Seleziona il pulsante (Rettangolo), e l'eventuale testo, e raggruppali premendo i tasti CTRL/⌘ + G - Rinomina il gruppo "Button" #### Guarda [questo video](https://youtu.be/Qd-jJjduWeQ) se dovessi riscontrare problemi.

# Utilizza Tkinter Designer [[Top](#indice-dei-contenuti)] ## Requisiti minimi Ci sono alcuni requisiti minimi che devi soddisfare per poter utilizzare TKinter Designer. ### 1. Personal Access Token 1. Accedi a Figma 2. Vai nelle impostazioni 3. Nella scheda **Account**, scrolla fino a **Personal access tokens** 4. Inserisci il nome del tuo access token nel campo e premi Enter 5. Ora il tuo Personal Access Token è stato creato. - Copia questo token e tienilo al sicuro. - **Non esiste alcuna procedura per recuperare questo codice.** ### 2. Ottieni l'URL del file 1. Nel tuo file di Design Figma, clicca sul pulsante **Share** nella barra in alto, quindi clicca su **🔗 Copy link** ## Utilizzare la CLI Per utilizzare la CLI è sufficiente installare il pacchetto ed avviarlo da riga di comando. Per installarlo segui una delle due prossime opzioni. ### Tramite PyPi Puoi usare il seguente comando sostituendo $FILE_URL & $FIGMA_TOKEN con i tuoi dati. Se non dovessi avere questi dati, segui la sezione [**Requisiti Minimi**](#using-1). ``` bash pip install tkdesigner tkdesigner $FILE_URL $FIGMA_TOKEN ``` ### Tramite sorgente Per usare CLI puoi decidere di clonare il codice sorgente dalla repository e seguire le istruzioni di seguito. Puoi usare il seguente comando sostituendo $FILE_URL & $FIGMA_TOKEN by your data. e non dovessi avere questi dati, segui la sezione [**Requisiti Minimi**](#using-1). ```bash $ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN # To learn more about how to use the cli, pass the --help flag $ python -m tkdesigner --help ``` ### Output Di base, il codice dell'interfaccia grafica wiene scritto nella directory ``build/gui.py``. Puoi specificare un'altra directory utilizzando il flag `-o` seguito dalla path. Per eseguire la GUI generata, spostarsi nella directory di output ed eseguire allo stesso modo in cui si esegue una GUI in Tkinter. ```bash cd build python3 gui.py ``` ## Utilizzare la GUI ### Apri Tkinter Designer prima di eseguire i seguenti passaggi
1. Apri TKinter Designer GUI eseguendo i seguenti comandi: ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. Incolla il tuo *personal access token* nel form **Token ID** di Tkinter Designer 3. Incolla il tuo **File URL** nel form di Tkinter Designer 4. Clicca su **Output Path** per aprire il file browser 5. Scegli la cartella di destinazione e clicca su **Select Folder** 6. Clicca infine su **Generate** I file di output di Tkinter Designer verranno salvati nella directory da te inserita, dentro una nuova cartella chiamata **build**. Congratulazioni, hai creato la tua GUI Tkinter grazie a Tkinter Designer!

# Risoluzione dei problemi [[Top](#indice-dei-contenuti)] - Elementi non visibili? Fuori posto? - Assicurati di aver rinominato correttamente gli elementi nel tuo file di Figma. Leggi [Formatta il tuo Design Figma](#formatting-1). - Il pulsante ha un indisiderato sfondo grigio? - Assicurati di aver aggiunto un Rettangolo dietro al tuo elemento pulsante, e che il suo colore sia identico a quello di sfondo. - Elementi errati? - Assicurati di aver rinominato correttamente gli elementi nel tuo file di Figma. Leggi [Formatta il tuo Design Figma](#formatting-1). - La finestra è più grande dello schermo? - Riduci la dimensione degli elementi Figma. - Non si generano i file? - Riavvia Tkinter Designer - Controlla il tuo personal access token e l'URL del file - Assicurati di aver predisposto un frame al tuo file di Figma - Qualcos'altro? - [Segnala i problemi non listati nella sezione Issues della repository](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.Kr KR (`docs/instructions.kr-KR.md`) # Tkinter Designer 사용법 ___ ## 목차 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. [Access Token](#using-1) 2. [File URL 가져오기](#using-2) 3. [CLI 사용하기](#using-cli) 4. [GUI 사용하기](#using-gui) 4. [**문제해결**](#Troubleshooting)

# 시작하기 [[Top](#)] ## 1. Python 설치하기 Tkinter Designer를 사용하기 전에 Python을 설치해야 합니다. - [여기에서 Python을 설치할 수 있습니다.](https://www.python.org/downloads) - [다음은 다양한 운영 체제에 Python을 설치하는 데 유용한 가이드입니다.](https://wiki.python.org/moin/BeginnersGuide/Download) *이 가이드의 뒷부분에서 Python용 Package Installer(pip)를 사용할 것이며, 이 경우 시스템 환경변수에 Python을 추가해야 할 수도 있습니다.* ___
## 2. Tkinter Designer 설치하기 *세 가지 옵션:* 1. `pip install tkdesigner` 2. [poetry](https:python-poetry.org) 설치 - `poetry new && cd ` - `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이 추가되었는지 확인합니다. 그러면 모든 요구 사항과 Tkinter Designer가 설치됩니다. Tkinter Designer를 사용하기 전에 아래 지침을 사용하여 Figma 파일을 만들어야 합니다. 파일을 이미 만든 경우 [**Tkinter Designer 사용하기**](#Using-Tkinter-Designer) 섹션으로 건너뜁니다. ___
## 3. Figma 계정 생성하기 1. 웹 브라우저에서 [figma.com ](https://www.figma.com/)로 이동하여 '가입'을 클릭합니다. 2. 정보를 입력한 다음 이메일 인증을 합니다. 3. 새로운 Figma 파일을 만듭니다. 4. GUI 제작 시작 - 다음 섹션에서는 Tkinter Designer 입력에 필요한 형식에 대해 설명합니다. - [초보자를 위한 공식 피그마 튜토리얼 시리즈입니다.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [피그마 공식 유튜브 채널입니다.](https://www.youtube.com/c/Figmadesign/featured) - [여기가 피그마 도움말입니다.](https://help.figma.com/hc/en-us)

# Figma 가이드 [[Top](#목차)] ## 1. 레퍼런스
### Naming이 중요합니다 | Figma Element Name | Tkinter Element | | --- | --- | | Button | Button | | Line | Line | | Text | Name it anything | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
Tkinter Designer에서 생성된 코드는 Figma 설계의 요소 이름을 기반으로 하므로 요소 이름을 적절하게 지정해야 합니다. Figma의 레이어 패널에서 요소를 두 번 클릭하여 이름을 바꿉니다. ___
## 2. 속성 가이드
1. **먼저 Tkinter 창 역할을 할 프레임을 만듭니다.**

2. **Image** - 도형 및/또는 이미지를 사용하여 이미지를 생성할 수 있습니다. - 여러 도형/이미지를 사용하는 경우 '모두 선택'을 눌러 그룹화해야 합니다 CTRL/⌘ + G - 그런 다음 요소 또는 그룹의 이름을 "이미지"로 지정합니다.

3. **Text (일반 텍스트)** - T 키를 눌러 텍스트 도구를 활성화한 다음 원하는 대로 텍스트 추가합니다. - Tkinter Designer에서 사용하기 위해 텍스트 이름을 변경할 필요가 없습니다. - 명시적으로 Return 또는 Enter 키를 눌러 다음 줄로 이동합니다.

4. **Entry (사용자의 한 줄 입력)** - R을 사용하여 Rectangle 도구 활성화 - 원하는 대로 Rectangle 조정 - Rectangle의 이름이 "TextBox"인지 확인합니다

5. **Text Area (사용자의 여러줄 입력)** - R을 사용하여 Rectangle 도구 활성화 - 원하는 대로 Rectangle 조정 - Rectangle의 이름이 "TextArea"인지 확인합니다 6. **Rectangle** - R을 사용하여 Rectangle 도구 활성화 - 원하는 대로 Rectangle 조정 - Rectangle의 이름이 "Rectangle"인지 확인합니다

7. **Normal Button** - GUI에서 button으로 사용할 rectangle 추가 - 선택 사항: button에 대한 text 추가 - button(Rectangle)과 옵션으로 text를 선택한 다음 CTRL/⌘ + G로 그룹화합니다 - 그룹 이름을 "Button"으로 지정합니다

8. **둥근 Button** - GUI에서 button으로 사용할 rectangle 추가 - 선택 사항: button에 text 추가 - rectangle을 선택하고 오른쪽에서 모서리 반지름을 추가하여 모서리 반지름을 반올림합니다. [자세히 읽어보기](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - button과 크기가 같은 Rectangle을 만듭니다. 동그랗게 만들지 마세요. - 배경과 일치하도록 Rectangle 색상 변경 - 이제 새로 만든 Rectangle을 기본 button(Rectangle) 아래로 이동합니다. - button, Rectangle및 optional text를 선택한 다음 CTRL/⌘ + G로 그룹화합니다 - 그룹 이름을 "Button"으로 지정합니다 #### 문제가 발생하면 [유튜브](https://youtu.be/Qd-jJjduWeQ) 를 참조하십시오

# Tkinter Designer 사용하기 [[Top](#목차)] ## 필수 입력 정보 TKinter Designer를 사용하려면 몇 가지 입력 정보를 수집해야 합니다. ### 1. 개인 액세스 토큰 1. Figma 계정에 로그인합니다 2. 설정으로 이동 3. **Account** 탭에서 **Personal access tokens**으로 스크롤합니다 4. 입력 양식에 액세스 토큰 이름을 입력하고 Enter 키를 누릅니다 5. 개인 액세스 토큰이 생성됩니다. - 이 토큰을 복사하여 안전한 곳에 보관하십시오. - **이 토큰을 다시 복사할 수 없습니다.** ### 2. File URL 얻기 1. Figma 디자인 파일에서 상단 바의 **Share** 버튼을 클릭한 다음 **🔗 Copy link**를 클릭합니다. ## CLI로 실행하기 CLI를 사용하는 것은 패키지를 설치하고 CLI 도구를 실행하는 것만큼 간단합니다. ### PyPi로 실행하기 $FILE_URL & $FIGMA_TOKEN을 데이터로 대체하여 아래 명령을 테스트로 사용할 수 있습니다. 토큰과 링크가 없으면 [**필수 입력 정보 Section**](#Using-Tkinter-Designer)을 참조하십시오. ``` bash pip install tkdesigner tkdesigner $FILE_URL $FIGMA_TOKEN ``` ### 소스로 실행하기 소스 코드에서 CLI를 사용하려면 리포지토리를 복제한 다음 아래 지침을 따라야 합니다. $FILE_URL & $FIGMA_TOKEN을 데이터로 대체하여 아래 명령을 테스트로 사용할 수 있습니다. 토큰과 링크가 없으면 [**필수 입력 정보 Section**](#Using-Tkinter-Designer)을 참조하십시오. ```bash $ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN # To learn more about how to use the cli, pass the --help flag $ python -m tkdesigner --help ``` ### 결과물 기본적으로 GUI 코드는 build/gui.py 에 기록됩니다. '-o' 플래그를 사용하고 경로를 제공하여 출력 경로를 지정할 수 있습니다. 생성된 GUI를 실행하려면 빌드한 디렉토리(예: build/)에 들어가 Tkinter GUI와 마찬가지로 실행합니다. ```bash cd build python3 gui.py ``` ## GUI로 실행하기 ### 다음 단계를 수행하기 전에 Tkinter Designer 실행시키기
1. 다음 명령어를 통해 TKinter Designer GUI를 실행합니다. ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. Tkinter Designer의 **Token ID**에 *personal access token*를 추가합니다. 3. Tkinter Designer의 **File URL**에 Figma링크를 추가합니다. 4. **Output Path** 를 통해 저장될 위치를 누릅니다. 5. 생성 경로를 선택하고 다음을 누릅니다. **Select Folder** 6. **Generate**를 누릅니다. Tkinter Designer의 출력 파일은 선택한 디렉토리의 **build**라는 새 폴더 안에 배치됩니다. 축하합니다. 이제 Tkinter Designer를 사용하여 Tkinter GUI를 만들었습니다!

# 문제해결 [[Top](#목차)] - 요소가 보이지 않습니까? - Figma 파일의 요소 이름이 올바른지 확인하십시오 * See [Figma 가이드, §1](#formatting-1) - 버튼에 의도하지 않은 회색 배경이 있습니까? - 버튼 요소 뒤에 직사각형을 추가했는지 확인하고 채우기 색이 배경의 색과 동일한지 확인합니다. - 잘못된 요소? - Figma에서 요소의 이름을 올바르게 지정했는지 확인합니다. - See [Figma 가이드, §1](#formatting-1) - 창이 화면보다 큽니까? - Figma에서 요소의 크기를 줄이세요. - 파일이 생성되지 않습니까? - Tkinter Designer 다시 시작합니다. - 토큰과 URL을 더블체크합니다. - 디자인에 프레임이 있는지 확인합니다. - 다른 문제가 있습니까? - [Report issues not listed here on GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions (`docs/instructions.md`) # How to use Tkinter Designer #### Translations - [简体中文](/docs/instructions.zh-CN.md) - [Français](/docs/instructions.fr-FR.md) - [ગુજરાતી](/docs/instructions.gu-GU.md) - [Italiano](/docs/instructions.it-IT.md) - [عربية](/docs/instructions.ar-DZ.md/) - [Turkish](/docs/instructions.tr-TR.md) - [Brazil](/docs/instructions.pt-BR.md) - [Spanish](/docs/instructions.spa-SPA.md) - [Korean](/docs/instructions.kr-KR.md) - [Tiếng Việt](/docs/instructions.vi-VN.md) - [Русский](/docs/instructions.ru-RU.md) ___ ## Table of Contents 1. [**Getting Started**](#getting-started-1) 1. [Install Python](#getting-started-1) 2. [Install Tkinter Designer](#getting-started-2) 3. [Make a Figma Account](#getting-started-3) 2. [**Formatting Your Figma Design**](#formatting-1) 1. [Reference](#formatting-1) 2. [Element Guide](#formatting-2) 3. [**Using Tkinter Designer**](#Using-Tkinter-Designer) 1. [Personal Access Token](#using-1) 2. [Getting your File URL](#using-2) 3. [Using The CLI](#using-cli) 4. [Using The GUI](#using-gui) 4. [**Troubleshooting**](#Troubleshooting)

# Getting Started [[Top](#table-of-contents)] ## 1. Install Python Before using Tkinter Designer, you'll need to install Python. - [Here is a link to the Python downloads page.](https://www.python.org/downloads) - [Here is a helpful guide to installing Python on various operating systems.](https://wiki.python.org/moin/BeginnersGuide/Download) Tkinter Designer supports Python 3.9 and newer. *Later in this guide, you will use the Package Installer for Python (pip), which may require you to add Python to your system PATH.* ___
## 2. Install Tkinter Designer *Three options:* 1. `pip install tkdesigner` 2. Install [Poetry](https://python-poetry.org) - `poetry new && cd ` - `poetry add tkdesigner` - `poetry install` 3. To run Tkinter Designer from the source code, follow the instructions below. 1. Download the source files for Tkinter Designer by downloading it manually or using GIT. ` git clone https://github.com/ParthJadhav/Tkinter-Designer.git ` 2. Change your working directory to Tkinter Designer. `cd Tkinter-Designer` 3. Install the necessary dependencies by running - `pip install -r requirements.txt` - In the event that pip doesn't work, also try the following commands: - `pip3 install -r requirements.txt` - `python -m pip install -r requirements.txt` - `python3 -m pip install -r requirements.txt` - If this still doesn't work, ensure that Python is added to the PATH. This will install all requirements and Tkinter Designer. Before you use Tkinter Designer you need to create a Figma File with the below instructions. If you already have created a file then skip to [**Using Tkinter Designer**](#Using-Tkinter-Designer) Section. 4. Docker users can build and run the CLI with: ```bash docker build -t tkdesigner . docker run --rm -v "$PWD:/work" tkdesigner "$FILE_URL" "$FIGMA_TOKEN" -o /work ``` ___
## 3. Make a Figma Account 1. In a web browser, navigate to [figma.com](https://www.figma.com/) and click 'Sign up' 2. Enter your information, then verify your email 3. Create a new Figma Design file 4. Get started making your GUI - The next section covers required formatting for Tkinter Designer input. - [Here is the official Figma tutorial series for beginners.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [Here is the official Figma YouTube channel.](https://www.youtube.com/c/Figmadesign/featured) - [Here is the Figma Help Center.](https://help.figma.com/hc/en-us)

# Formatting Your Figma Design [[Top](#table-of-contents)] ## 1. Reference
### Naming is Important | Figma Element Name | Tkinter Element | | --- | --- | | Button | Button | | Line | Line | | Text | Name it anything | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() | | ButtonHover (EXPERIMENTAL) | Button shown on hover | | CheckButton or CheckBox | Checkbutton | | RadioButton or Radio | Radiobutton | | ComboBox | ttk.Combobox | | ListBox | Listbox | | Toggle or ToggleButton | Toggle-style Checkbutton | | Table | ttk.Treeview table | | TabView, Tabs, or Notebook | ttk.Notebook tab view |
The code generated by Tkinter Designer is based on the names of elements from your Figma design and, as such, you need to name your elements accordingly. In Figma, rename your elements by double-clicking them in the Layers panel. If an element is not one of the native Tkinter elements above, Tkinter Designer now attempts to export it as an image instead of replacing it with a black rectangle. This helps preserve vectors, smoothed corners, icons, and grouped artwork. ___
## 2. Element Guide
1. **First, create a Frame that will serve as your Tkinter Window.**

2. **Adding Images** - Images can be created using shapes and/or images - If you use multiple shapes/images, you must group them together by selecting them all and pressing CTRL/⌘ + G - After that name the element or group as "Image".

3. **Text (Normal Text)** - Use the T key to activate the text tool, then add text as desired - Text does not have to be renamed for use in Tkinter Designer - Explicitly press the Return Or Enter Key to move to the next line.

4. **Entry (Single-Line User Input)** - Activate the Rectangle tool with R - Adjust the Rectangle to your liking - Make sure the Rectangle is named "TextBox"

5. **Text Area (Multi-Line User Input)** - Activate the Rectangle tool with R - Adjust the Rectangle to your liking - Make sure the Rectangle is named "TextArea" 6. **Rectangle** - Activate the Rectangle tool with R - Adjust the Rectangle to your liking - Make sure the Rectangle is named "Rectangle"

7. **Normal Button** - Add rectangle to serve as a button in your GUI - Optional: Add text for the button - Select the button(Rectangle), and any optional text, then group them with CTRL/⌘ + G - Name the group "Button" #### Refer to [this video](https://youtu.be/Qd-jJjduWeQ) if you face any problem

8. **Rounded Button** - Add rectangle to serve as a button in your GUI - Optional: Add text for the button - Make it rounded by adding corner radius by selecting the rectangle and adding corner radius from the right side. [Read more on it](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - Create a Rectangle with same size of your button. Don't make it rounded. - Change the Rectangle's color to match the Background - Now move the newly created rectangle below the main button(Rectangle). - Select the button, Rectangle, and any optional text, then group them with CTRL/⌘ + G - Name the group "Button" #### Refer to [this video](https://youtu.be/Qd-jJjduWeQ) if you face any problem

9. **Button with Hover Effect (EXPERIMENTAL)** - Duplicate the Button you created in the previous step - You can duplicate the Button by selecting the button group and pressing CTRL/⌘ + D - Rename the duplicate button to "ButtonHover" - Place the duplicate button above the original button - Make sure it's on the same position as the original button - x and y coordinates should be the same - Make changes to the duplicate button for the hover effect - For example, change the color #### Refer to [this video](https://watch.screencastify.com/v/saDGrNayjwSmxbFbShB1) if you face any problem

# Using Tkinter Designer [[Top](#table-of-contents)] ## Required Inputs There are some inputs you'll need to collect to be able to use the TKinter Designer. ### 1. Personal Access Token 1. Log into your Figma account 2. Navigate to Settings 3. In the **Account** tab, scroll down to **Personal access tokens** 4. Enter the name of your access token in the entry form and press Enter 5. Your personal access token will be created. - Copy this token and keep it somewhere safe. - **You will not get another chance to copy this token.** ### 2. Getting your File URL 1. In your Figma design file, click the **Share** button in the top bar, then click on **🔗 Copy link** Tip: If you want to generate only one specific frame, select that frame before copying the link. Tkinter Designer will use the `node-id` in the Figma URL when it is present. ## Using the CLI Using the CLI is as simple as installing the package and running the CLI tool. ### From PyPi You can use the below command as test by replacing $FILE_URL & $FIGMA_TOKEN by your data. If you haven't got the token and link then refer to [**Required Inputs Section**](#using-1). ``` bash pip install tkdesigner tkdesigner $FILE_URL $FIGMA_TOKEN ``` Wrap the Figma URL in quotes when pasting the literal URL into a shell: ```bash tkdesigner "https://www.figma.com/design/FILE_KEY/Name?node-id=1-2&t=..." "$FIGMA_TOKEN" ``` If you do not want to place the token directly in the command, set it in `FIGMA_TOKEN` and pass only the URL: ```bash FIGMA_TOKEN="your-token" tkdesigner "$FILE_URL" ``` To generate a class-based Tkinter app instead of a top-level script, add `--template class`: ```bash tkdesigner --template class $FILE_URL $FIGMA_TOKEN ``` To generate a single app with Back/Next navigation across multiple Figma frames, use `--template pages`: ```bash tkdesigner --template pages $FILE_URL $FIGMA_TOKEN ``` To apply a ttk theme in the generated app, pass `--theme` with a theme name available in your Tk installation: ```bash tkdesigner --theme clam $FILE_URL $FIGMA_TOKEN ``` ### From Source To use CLI from the source code you need to clone the repository and then follow the below instructions. You can use the below command as test by replacing $FILE_URL & $FIGMA_TOKEN by your data. If you haven't got the token and link then refer to [**Required Inputs Section**](#using-1). ```bash $ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN # To learn more about how to use the cli, pass the --help flag $ python -m tkdesigner --help ``` ### Output By default, the GUI code will be written to build/gui.py. You can specify the output path by using `-o` Flag and providing the path. To run the generated GUI, cd into the directory you built it to (e.g. build/) and run it just as you would any Tkinter GUI. ```bash cd build python3 gui.py ``` You can also import `build/gui.py` from another Python file to attach your own commands without editing generated code. The generated script only starts `mainloop()` when it is run directly. ## Using the GUI ### Open Tkinter Designer before doing the following steps
1. Open TKinter Designer GUI by ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. Paste your *personal access token* into the **Token ID** form in Tkinter Designer 3. Paste the link into the **File URL** form in Tkinter Designer 4. Click the **Output Path** form to open a file browser 5. Choose an output path and click **Select Folder** 6. Press **Generate** The output files from Tkinter Designer will be placed in your chosen directory, inside a new folder called **build**. Congratulations, you have now created your Tkinter GUI using Tkinter Designer!

# Troubleshooting [[Top](#table-of-contents)] - Elements not visible? Misplaced? - Please make sure that your Figma File has its elements named correctly. * See [Formatting Your Figma Design, §1](#formatting-1) - Button has an unintended gray background? - Make sure you have added a Rectangle behind your button element, and that its Fill color is the same as the Background's - Incorrect elements? - Make sure you have named your elements correctly in Figma - See [Formatting Your Figma Design, §1](#formatting-1) - Window is larger than the screen? - Reduce the size of your elements in Figma - Files not generating? - Restart Tkinter Designer - Double-check the token and URL - Quote the Figma URL if you run the CLI from a shell - Add `-f` if you want to clear and regenerate an existing non-empty `build` directory - If you see a Figma API quota or rate-limit message, wait for your Figma quota to reset or use a token with available quota - Make sure your design has a Frame - If your file has many frames, select the target frame in Figma before copying the URL - Fonts look different? - Tkinter can only use fonts installed on the computer running the generated app - Tkinter Designer writes the Figma font family into generated text widgets, but each user's OS may fall back if that font is unavailable - Something else? - [Report issues not listed here on GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.Pt BR (`docs/instructions.pt-BR.md`) # Como usar o Tkinter Designer ___ ## Índice 1. [**Comece por aqui**](#getting-started-1) 1. [Instalação do Python](#getting-started-1) 2. [Instalação do Tkinter Designer](#getting-started-2) 3. [Faça uma conta no Figma](#getting-started-3) 2. [**Formatando seu design Figma**](#formatting-1) 1. [Referência](#formatting-1) 2. [Guia de elementos](#formatting-2) 3. [**Usando o Tkinter Designer**](#Using-Tkinter-Designer) 1. [Token de acesso pessoal](#using-1) 2. [Obtendo o URL do seu arquivo](#using-2) 3. [Usando a CLI](#using-cli) 4. [Usando a GUI](#using-gui) 4. [**Solução de problemas**](#Troubleshooting)

# Começando [[Top](#table-of-contents)] ## 1. Instalando Python Antes de usar o Tkinter Designer, você precisará instalar o Python. - [Aqui está um link para a página de downloads do Python.](https://www.python.org/downloads) - [Aqui está um guia útil para instalar o Python em vários sistemas operacionais.](https://wiki.python.org/moin/BeginnersGuide/Download) *Mais adiante neste guia, você usará o Package Installer for Python (pip), que pode exigir que você adicione o Python ao PATH do seu sistema.* ___
## 2. Instalando Tkinter Designer *Três opções:* 1. `pip install tkdesigner` 2. Instale [poetry](https:python-poetry.org) - `poetry new && cd ` - `poetry add tkdesigner` - `poetry install` 3. Para executar o Tkinter Designer a partir do código-fonte, siga as instruções abaixo. 1. Baixe os arquivos de origem do Tkinter Designer, você pode baixar manualmente ou usar o GIT. ` git clone https://github.com/ParthJadhav/Tkinter-Designer.git ` 2. Altere seu diretório de trabalho para Tkinter Designer. `cd tkinter-designer` 3. Instale as dependências necessárias executando - `pip install -r requirements.txt` - No evento do pip não funcionar, tente também os seguintes comandos: - `pip3 install -r requirements.txt` - `python -m pip install -r requirements.txt` - `python3 -m pip install -r requirements.txt` - Se ainda assim não funcionar, se certifique de que o Python está adicionado ao PATH. Isso instalará todos os requisitos e o Tkinter Designer. Antes de usar o Tkinter Designer, você precisa criar um arquivo Figma com as instruções abaixo. Se você já criou um arquivo, pule para [**Usando o Tkinter Designer**](#Using-Tkinter-Designer). ___
## 3. Faça uma conta no Figma 1. Em um navegador da Web, navegue até [figma.com](https://www.figma.com/) e clique em 'Sign up' 2. Insira suas informações e, em seguida, verifique seu e-mail 3. Crie um novo arquivo Figma Design 4. Comece a fazer sua GUI - A próxima seção abrange a formatação necessária para a entrada do Tkinter Designer. - [Aqui está a série oficial de tutoriais do Figma para iniciantes.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [Aqui está o canal oficial da Figma no YouTube.](https://www.youtube.com/c/Figmadesign/featured) - [Aqui está o Centro de Ajuda Figma.](https://help.figma.com/hc/en-us)

# Formatando seu design Figma [[Top](#table-of-contents)] ## 1. Referência
### Nomear é importante | Nome do Elemento no Figma | Elemento no Tkinter | | --- | --- | | Button | Button | | Text | Qualquer nome | | Rectangle | Rectangle | | Line | Line | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
O código gerado pelo Tkinter Designer é baseado nos nomes dos elementos do seu design Figma e, como tal, você precisa nomear seus elementos de acordo. No Figma, renomeie seus elementos clicando duas vezes neles no painel Camadas. ___
## 2. Guia de elementos
1. **Primeiro, crie um Frame que servirá como sua janela Tkinter.**

2. **Adicionando imagens** - As imagens podem ser criadas usando formatos e/ou imagens - Se você usar vários formatos/imagens, você selecionar todos e pressionar CTRL/⌘ + G - Depois disso nomeie o elemento ou grupo como "Image".

3. **Texto (Texto normal)** - Use o atalho T para ativar a ferramenta de texto e, em seguida, adicione o texto conforme desejado - O texto não precisa ser renomeado para uso no Tkinter Designer - Para pular linhas pressione Return ou Enter

4. **Entrada de texto (Uma linha para entrada do usuario)** - Pressione R para habilitar a ferramenta Retângulo - Ajuste o retângulo ao seu gosto - Renomeio o retângulo para "TextBox"

5. **Entrada de texto (Entrada de usuário de várias linhas)** - Pressione R para habilitar a ferramenta Retângulo - Ajuste o retângulo ao seu gosto - Renomeio o retângulo para "TextArea" 6. **Retângulo** - Pressione R para habilitar a ferramenta Retângulo - Ajuste o retângulo ao seu gosto - Renomeio o retângulo para "Rectangle"

7. **Botão normal** - Adicione um retângulo para servir como um botão em sua GUI - Opcional: adicione texto para o botão - Selecione o botão (Retângulo) e qualquer texto opcional e agrupe-os com CTRL/⌘ + G - Nomeie o grupo "Button" #### Consulte [este vídeo](https://youtu.be/Qd-jJjduWeQ) se tiver algum problema

8. **Botão arredondado** - Adicione um retângulo para servir como um botão em sua GUI - Opcional: adicione texto para o botão - Para fazer o arredondamento no botão modifique o raio (´Corner radius´) [Leia mais sobre isso](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - Crie um retângulo com o mesmo tamanho do seu botão. Não o torne arredondado. - Altere a cor do retângulo para corresponder ao plano de fundo - Agora mova o retângulo recém-criado abaixo do botão principal (Retângulo). - Selecione o botão, Retângulo e qualquer texto opcional e, em seguida, agrupe-os com CTRL/⌘ + G - Nomeie o grupo "Button" #### Consulte [este vídeo](https://youtu.be/Qd-jJjduWeQ) se tiver algum problema

# Usando o Tkinter Designer [[Top](#table-of-contents)] ## Entradas Necessárias Existem algumas entradas que você precisará coletar para poder usar o TKinter Designer. ### 1. Token de acesso pessoal 1. Faça login na sua conta Figma 2. Navegue até Configurações 3. Na guia **Account** role para baixo até **Personal access tokens** 4. Digite o nome do seu token de acesso no formulário de entrada e pressione Enter 5. Seu token de acesso pessoal será criado. - Copie este token e mantenha-o em algum lugar seguro. - **Você não terá outra chance de copiar este token.** ### 2. Obtendo o URL do seu arquivo 1. Em seu arquivo de design Figma, clique no **Share** botão na barra superior, em seguida, clique em **🔗 Copy link** ## Usando a CLI Usar a CLI é tão simples quanto instalar o pacote e executar a ferramenta CLI. ### De PyPi Você pode usar o comando abaixo como teste substituindo $FILE_URL & $FIGMA_TOKEN Se você não tiver o token e o link, consulte a [**Seção de Entradas Requeridas**](#using-1). ``` bash pip install tkdesigner tkdesigner $FILE_URL $FIGMA_TOKEN ``` ### Da fonte Para usar a CLI a partir do código-fonte, você precisa clonar o repositório e seguir as instruções abaixo. Você pode usar o comando abaixo como teste substituindo $FILE_URL & $FIGMA_TOKEN por seus dados. Se você não tiver o token e o link, consulte a [**Seção de Entradas Requeridas**](#using-1). ```bash $ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN # To learn more about how to use the cli, pass the --help flag $ python -m tkdesigner --help ``` ### Saída Por padrão, o código GUI será escrito em build/gui.py. Você pode especificar o caminho de saída usando o sinalizador `-o` e fornecendo o caminho. Para executar a GUI gerada, cd no diretório em que você a construiu (por exemplo, build/) e execute-a como faria com qualquer GUI do Tkinter. ```bash cd build python3 gui.py ``` ## Usando a GUI ### Abra o Tkinter Designer antes de executar as etapas a seguir
1. Abra a GUI do TKinter Designer por ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. Cole seu *token de acesso pessoal* no formulário **Token ID** no Tkinter Designer 3. Cole o link no formulário **URL do arquivo** no Tkinter Designer 4. Clique no formulário **Output Path** para abrir um navegador de arquivos 5. Escolha um caminho de saída e clique em **Select Folder** 6. Pressione **Generate** Os arquivos de saída do Tkinter Designer serão colocados no diretório escolhido, dentro de uma nova pasta chamada **build**. Parabéns, você agora criou sua GUI do Tkinter usando o Tkinter Designer!

# Solução de problemas [[Top](#table-of-contents)] - Elementos não visíveis? Extraviado? - Certifique-se de que seu arquivo Figma tenha seus elementos nomeados corretamente. * Consulte [Formatando o design do Figma, §1](#formatting-1) - O botão tem um fundo cinza não intencional? - Certifique-se de ter adicionado um retângulo atrás do elemento do botão e que sua cor de preenchimento seja a mesma do plano de fundo - Elementos incorretos? - Certifique-se de ter nomeado seus elementos corretamente no Figma - Consulte [Formatando o design do Figma, §1](#formatting-1) - A janela é maior que a tela? - Reduza o tamanho de seus elementos no Figma - Arquivos não estão gerando? - Reinicie o Tkinter Designer - Verifique novamente o token e o URL - Certifique-se de que seu design tenha um quadro - Algo mais? - [Relatar problemas não listados aqui no GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.Ru RU (`docs/instructions.ru-RU.md`) ___ ## Оглавление 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)

# Начало работы [[Наверх](#Оглавление)] ## 1. Установите Python Перед использованием Tkinter Designer вам необходимо установить Python. - [Вот ссылка на страницу загрузки Python.](https://www.python.org/downloads) - [Вот полезное руководство по установке Python в различных операционных системах.](https://wiki.python.org/moin/BeginnersGuide/Download) *Далее в этом руководстве вы будете использовать установщик пакетов для Python (pip), который может потребовать от вас добавить Python в PATH вашей системы.* ___
## 2. Установите Tkinter Designer *Три варианта:* 1. `pip install tkdesigner` 2. Установите [poetry](https:python-poetry.org) - `poetry new && cd ` - `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). ___
## 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)

# Форматирование дизайна Figma [[Наверх](#Оглавление)] ## 1. Референс
### Имена важны! | Имя элемента Figma | Tkinter элемент | | --- | --- | | Button | Button | | Line | Line | | Text | Name it anything | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
Код, сгенерированный Tkinter Designer, основан на именах элементов вашего дизайна Figma, и поэтому вам необходимо соответствующим образом называть свои элементы. В Figma переименуйте свои элементы, дважды щелкнув на них на панели «Layers». ___
## 2. Руководство по элементам
1. **Сначала создайте Frame, который будет служить вашим окном Tkinter.**

2. **Добавление изображений** - Изображения могут быть созданы с использованием фигур и/или изображений. - Если вы используете несколько фигур/изображений, вам необходимо сгруппировать их, выделив их все и нажав CTRL/⌘ + G - После этого назовите элемент или группу «Image».

3. **Text (обычный текст)** - Используйте клавишу T, чтобы активировать текстовый инструмент, затем добавьте текст по желанию. - Текст не нужно переименовывать для использования в Tkinter Designer. - Нажмите клавишу Return или Enter, чтобы перейти к следующей строке.

4. **Entry (однострочный пользовательский ввод)** - Активируйте инструмент «Прямоугольник» с помощью R. - Отрегулируйте прямоугольник по своему вкусу. - Убедитесь, что прямоугольник называется «TextBox».

5. **Text Area (многострочный пользовательский ввод)** - Активируйте инструмент «Прямоугольник» с помощью R. - Отрегулируйте прямоугольник по своему вкусу. - Убедитесь, что прямоугольник назван «TextArea».

6. **Прямоугольник** - Активируйте инструмент «Прямоугольник» с помощью R. - Отрегулируйте прямоугольник по своему вкусу. - Убедитесь, что прямоугольник назван «Rectangle».

7. **Обычная кнопка** - Добавьте прямоугольник, который будет служить кнопкой в вашем графическом интерфейсе. - Необязательно: добавьте текст для кнопки. - Выберите кнопку (прямоугольник) и любой дополнительный текст, затем сгруппируйте их с помощью CTRL/⌘ + G - Назовите группу «Button». #### Если у вас возникнут какие-либо проблемы, обратитесь к [этому видео](https://youtu.be/Qd-jJjduWeQ).

8. **Скругленная кнопка** - Добавьте прямоугольник, который будет служить кнопкой в вашем графическом интерфейсе. - Необязательно: добавьте текст для кнопки. - Сделайте его закругленным, добавив угловой радиус, выделив прямоугольник и добавив угловой радиус с правой стороны. [Подробнее об этом](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - Создайте прямоугольник того же размера, что и ваша кнопка. Не делайте его закругленным. - Измените цвет прямоугольника, чтобы он соответствовал фону. - Теперь переместите вновь созданный прямоугольник под главную кнопку (Прямоугольник). - Выберите кнопку, прямоугольник и любой дополнительный текст, затем сгруппируйте их с помощью CTRL/⌘ + G - Назовите группу «Button». #### Если у вас возникнут какие-либо проблемы, обратитесь к [этому видео](https://youtu.be/Qd-jJjduWeQ).

# Использование Tkinter Designer [[Наверх](#Оглавление)] ## Необходимые входные данные Чтобы использовать TKinter Designer, вам необходимо собрать некоторые данные. ### 1. Токен личного доступа 1. Войдите в свою учетную запись Figma. 2. Перейдите в «Settings» \ «Настройки». 3. На вкладке **Account** прокрутите вниз до пункта **Personal access tokens**. 4. Введите имя вашего токена доступа в форму ввода и нажмите Enter. 5. Будет создан ваш личный токен доступа. - Скопируйте этот токен и сохраните его в безопасном месте. - **У вас больше не будет возможности скопировать этот токен.** ### 2. Получение URL-адреса файла 1. В файле дизайна Figma нажмите кнопку **Share** на верхней панели, затем нажмите **🔗 Copy link** ## Использование интерфейса командной строки Использовать 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 ``` ## Использование графического интерфейса ### Откройте Tkinter Designer, прежде чем выполнять следующие шаги.
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!

# Устранение неполадок [[Наверх](#Оглавление)] - Элементы не видны? Находятся не на своём месте? - Убедитесь, что в вашем файле Figma элементы названы правильно. * См. [Форматирование дизайна Figma, §1](#formatting-1). - Кнопка имеет незапланированный серый фон? - Убедитесь, что вы добавили прямоугольник позади элемента кнопки и что его цвет заливки такой же, как у фона. - Неправильные элементы? - Убедитесь, что вы правильно назвали свои элементы в Figma. - См. [Форматирование дизайна Figma, §1](#formatting-1). - Окно больше экрана? - Уменьшите размер ваших элементов в Figma. - Файлы не генерируются? - Перезапустите Tkinter Designer. - Дважды проверьте токен и URL-адрес. - Убедитесь, что в вашем дизайне есть Frame. - Что-то другое? - [Сообщить о проблемах, не перечисленных здесь на GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.Spa SPA (`docs/instructions.spa-SPA.md`) # ¿Cómo usar Tkinter Designer? #### Traducciones - [简体中文](/docs/instructions.zh-CN.md) - [Français](/docs/instructions.fr-FR.md) - [ગુજરાતી](docs/instructions.gu-GU.md) - [عربية](/docs/instructions.ar-DZ.md) - [Turkish](/docs/instructions.tr-TR.md) ___ ## Tabla de contenidos 1. [**Comience por aquí**](#getting-started-1) 1. [Instalar Python](#getting-started-1) 2. [Instalar Tkinter Designer](#getting-started-2) 3. [Crear una cuenta en Figma](#getting-started-3) 2. [**Dando formato a tu diseño de Figma**](#formatting-1) 1. [Referencia](#formatting-1) 2. [Guía de Elementos](#formatting-2) 3. [**Usar Tkinter Designer**](#Using-Tkinter-Designer) 1. [Token de Acceso Personal](#using-1) 2. [Obteniendo URL de tu archivo](#using-2) 3. [Usando el CLI](#using-cli) 4. [Usando el GUI](#using-gui) 4. [**Solución de Problemas**](#Troubleshooting)

# Comenzando [[Top](#table-of-contents)] ## 1. Instalar Python Antes de usar Tkinter Desinger, deberás instalar Python. - [Aquí hay un link a la página de descargas de Python.](https://www.python.org/downloads) - [Aquí hay una guía útil de cómo instalar Python en diferentes Sistemas Operativos.](https://wiki.python.org/moin/BeginnersGuide/Download) *Más tarde en éste curso, usarás el Package Installer de Python (pip), el cual requiere que agregues Python al PATH de tu sistema* ___
## 2. Instalar Tkinter Designer *Tres opciones:* 1. `pip install tkdesigner` 2. Instalar [poetry](https:python-poetry.org) - `poetry new && cd ` - `poetry add tkdesigner` - `poetry install` 3. Para ejecutar Tkinter Designer desde el archivo fuente, sigue las siguientes instrucciones. 1. Descarga el archivo fuente, descargandolo manualmente o usando GIT. ` git clone https://github.com/ParthJadhav/Tkinter-Designer.git ` 2. Cambia tu directorio de trabajo a Tkinter Designer. `cd Tkinter-Designer` 3. Instala las dependencias necesarias ejecutando - `pip install -r requirements.txt` - En el caso que pip no funcione, también prueba con los siguientes comandos: - `pip3 install -r requirements.txt` - `python -m pip install -r requirements.txt` - `python3 -m pip install -r requirements.txt` - Si esto no funciona, asegurate de que Python está agregado al PATH. Ésto instalará todos los requisitos y Tkinter Designer. Antes de usar Tkinter Designer, deberás crear un archivo de Figma siguiendo las siguientes instrucciones. Si ya creaste un archivo Figma, puedes saltar a la sección [**Usar Tkinter Designer**](#Using-Tkinter-Designer). ___
## 3. Crear una cuenta en Figma 1. En un navegador web, navega a [figma.com](https://www.figma.com/) y da click en 'Sign up' 2. Ingresa tu informacion y luego verifica tu email 3. Crea un nuevo archivo de diseño en Figma 4. Comienza a crear tu GUI - Las siguientes secciones abarcan el formato necesario para el resultado en Tkinter Designer. - [Aqúi está el tutorial oficial de Figma para principiantes.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [Aquí está el canal oficial de YouTube de Figma.](https://www.youtube.com/c/Figmadesign/featured) - [Aquí está el Centro de Ayuda de Figma.](https://help.figma.com/hc/en-us)

# Dando formato a tu diseño de Figma [[Top](#table-of-contents)] ## 1. Referencias
### El nombre es importante | Nombre de Elemento en Figma | Elemento en Tkinter | | --- | --- | | Button | Button | | Line | Line | | Text | Nómbralo como quieras | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
El código generado por Tkinter Designer está basado en los nombres de los elementos de tu diseño en Figma, y como tal, necesitas nombrar tus elementos de acuerdo a lo establecido. En Figma, puedes renombrar tus elementos al dar doble click en ellos en el panel de Layers. ___
## 2. Guía de Elementos
1. **Primero, crea un Frame que te servirá como tu ventana de Tkinter.**

2. **Añadir Imágenes** - Las imágenes pueden ser creadas usando formas y/o imágenes. - Si usas multiples formas/imágenes, necesitarás agruparlos todos juntos, seleccionandolos y presionando CTRL/⌘ + G - Después de eso, nombra el elemento o grupo como "Image".

3. **Texto (Texto Normal)** - Usa la tecla T para activar la herramienta de texto, después añade texto que desees. - El texto no tiene que ser renombrado para usar en Tkinter Designer. - Explicitamente presiona las teclas Return o Enter para saltar a la siguiente línea.

4. **Entry (Input de Usuario en una sóla línea)** - Activa la herramienta de Rectángulo con la letra R - Ajusta el rectangulo a tu gusto - Asegurate que el Rectángulo sea llamado "TextBox"

5. **Area de Texto (Input de Usuario en múltiples líneas)** - Activa la herramienta de Rectángulo con la letra R - Ajusta el rectangulo a tu gusto - Asegurate que el Rectángulo sea llamado "TextArea" 6. **Rectángulo** - Activa la herramienta de Rectángulo con la letra R - Ajusta el rectangulo a tu gusto - Asegurate que el Rectángulo sea llamado "Rectangle"

7. **Botón Normal** - Añade un rectangulo para que funcione como un botón en tu GUI - Opcional: Añade texto para el botón. - Selecciona el botón(Rectangle), y cualquier texto opcional, luego agrupalos con CTRL/⌘ + G - Nombra el grupo "Button" #### Dirigete a [Éste video](https://youtu.be/mFjE2-rbpm8?t=275) si te encuentras con cualquier problema

8. **Botón circular** - Añade un rectangulo para que funcione como un botón en tu GUI - Opcional: Añade texto para el botón. - Hazlo redondo al añadir un radio de esquinas, seleccionado el rectángulo y añadiendo un radio de esquinas desde el lado derecho. [Lee más en](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - Crea un rectángulo con el mismo tamaño que tu botón. No lo hagas redondeado. - Cambia el color del rectángulo para combinarlo con el fondo - Ahora, mueve el rectángulo más nuevo debajo del botón principal(Rectangle). - Selecciona el botón, el rectángulo y cualquier texto adicional, luego agrupalos con CTRL/⌘ + G - Nombra al grupo "Button" #### Dirigete a [Éste video](https://youtu.be/mFjE2-rbpm8?t=275) si te encuentras con cualquier problema

# Usar Tkinter Designer [[Top](#table-of-contents)] ## Datos Requeridos Hay algunos datos que necesitarás coleccionar para usar Tkinter Designer. ### 1. Token de Acceso Personal 1. Inicia sesión en tu cuenta de Figma 2. Dirígete a Configuración 3. En la pestaña de **Account**, deslíza hacía abajo hasta **Personal Access Tokens** 4. Ingresa el nombre de tu Token de Acceso Personal en el campo y presiona Enter 5. Tu Token de Acceso Personal será creada. - Copia ésta Token y guárdala en algún lugar seguro. - **No tendrás otra chance de copiar ésta Token.** ### 2. Obteniendo URL de tu archivo 1. En tu archivo de diseño de Figma, da click en el botón de **Share** en la barra superior, luego da click en **🔗 Copy Link** ## Usando el CLI Usar el CLI es tan simple como instalar un pacquete y ejecutar la herramienta de CLI. ### Desde PyPi Puedes usar el siguiente comando como una prueba, reemplazando $FILE_URL & $FIGMA_TOKEN por tu información. Si todavía no haz conseguido el Token, dirígete a [**Datos Requeridos**](#using-1). ``` bash pip install tkdesigner tkdesigner $FILE_URL $FIGMA_TOKEN ``` ### Desde Archivo Fuente Para usar CLI desde el archivo fuente, necesitas clonar el repositorio y luego seguir las siguientes instrucciones. Puedes usar el siguiente comando como una prueba, reemplazando $FILE_URL & $FIGMA_TOKEN por tu información. Si todavía no haz conseguido el Token, dirígete a [**Datos Requeridos**](#using-1). ```bash $ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN # Para aprender más sobre cómo usar el CLI, pasa el Flag --help $ python -m tkdesigner --help ``` ### Resultado Por defecto, el código GUI será almacenado en build/gui.py. Puedes especificar la ruta al presionar la Flag `-o` y escribiendo la ruta. Para ejecutar el GUI generado, haz un cd hasta el directorio que haz creado (en general: build/) y ejecutalo tal como lo hicieras con cualquier GUI de Tkinter. ```bash cd build python3 gui.py ``` ## Usando el GUI ### Abre Tkinter Desinger antes de realizar los siguientes pasos
1. Abre Tkinter Designer GUI de la siguiente forma ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. Pega tu *Token de Acceso Personal* en el campo de **Token ID** en Tkinter Designer 3. Pega el link en el campo de **File URL** en Tkinter Designer 4. Da click en el campo de **Output Path** para abrir el buscador de archivos 5. Elige una ruta de destino y da click **Select Folder** 6. Presiona **Generate** Los archivos generados por Tkinter Designer serán puestos en tu directorio de destino, dentro de una nueva carpeta llamada **build**. Felicitaciones, ahora has cread tu GUI de Tkinter usando Tkinter Designer!

# Solución de Problemas [[Top](#table-of-contents)] - ¿Los elementos no son visibles? ¿Están en un lugar equivocado? - Por favor, asegurate que tu archivo Figma tiene los elementos nombrados correctamente. * Ve [Dando formato a tu diseño de Figma, §1](#formatting-1) - ¿El botón tiene un fondo gris no deseado? - Asegurate que has añadido un rectángulo detras de tu elemento botón, y que éste sea del mismo color que el fondo - ¿Elementos incorrectos? - Asegurate que has nombrado tus elementos correctamente en Figma - Ve [Dando formato a tu diseño de Figma, §1](#formatting-1) - ¿La ventana es más grande que la pantalla? - Reduce el tamaño de tus elementos en Figma - ¿Los archivos no se generan? - Reinicia Tkinter Designer - Vuelve a checkear el URL y el Token Access - Asegurate que tu diselo tiene un Frame - ¿Algo más? - [Reportar problemas no mencionados aquí en GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.Tr TR (`docs/instructions.tr-TR.md`) # Tkinter Designer Nasıl Kullanılır ___ ## İçindekiler 1. [**Başlarken**](#getting-started-1) 1. [Python'u Kurun](#getting-started-1) 2. [Tkinter Designer'ı Yükleyin](#getting-started-2) 3. [Bir Figma Hesabı Oluşturun](#getting-started-3) 2. [**Figma Tasarımınızı Biçimlendirme**](#formatting-1) 1. [Referans](#formatting-1) 2. [Element Kılavuzu](#formatting-2) 3. [**Tkinter Designer'ı Kullanma**](#Using-Tkinter-Designer) 1. [Kişisel Erişim Tokenı](#using-1) 2. [Dosya URL'nizi Elde Etme](#using-2) 3. [CLI'ı Kullanma](#using-cli) 4. [GUI'yi Kullanma](#using-gui) 4. [**Sorun Giderme**](#Troubleshooting)

# Başlarken [[Top](#table-of-contents)] ## 1. Python'u Kurun Tkinter Designer'ı kullanmaya başlamadan önce Python'u kurmanız gerekmektedir. - [Python'u burdan indirebilirsiniz.](https://www.python.org/downloads) - [Burda ise Python'u çeşitli işletim sistemlerine indirmeye yarayacak bir rehber var.](https://wiki.python.org/moin/BeginnersGuide/Download) *Bu rehberden sonra Python'un paket yükleyicisi olan "pip"i kullanacaksınız, bu yüzden Python'u sistem yoluna eklemeniz gerekebilir.* ___
## 2. Tkinter Designer'ı Yükleyin *Üç yol* 1. `pip install tkdesigner` 2. Install [poetry](https:python-poetry.org) - `poetry new && cd ` - `poetry add tkdesigner` - `poetry install` 3. Tkinter Designer'ı kaynak kodundan çalıştırmak için aşağıdaki adımları izleyin. 1. Tkinter Designer'ın kaynak kodunu GIT kullanarak veya manuel olarak indirin. ` git clone https://github.com/ParthJadhav/Tkinter-Designer.git ` 2. Çalışma alanınızı Tkinter Designer olarak değiştirin. `cd tkinter-designer` 3. Bunları çalıştırarak gerekenleri indirin. - `pip install -r requirements.txt` - O an "pip" çalışmıyorsa şu komutları deneyin: - `pip3 install -r requirements.txt` - `python -m pip install -r requirements.txt` - `python3 -m pip install -r requirements.txt` - Eğer halen çalışmıyorsa Python'un sistem yoluna eklendiğinden emin olun. Bu tüm gerekli şeyleri ve Tkinter Designer'ı kuracaktır. Tkinter Designer'ı kullanmadan önce aşağıdaki yönergeler ile bir Figma dosyası oluşturmanız gerekmektedir. Eğer zaten oluşturduysanız [**Tkinter Designer'ı Kullanma**](#Using-Tkinter-Designer) kısmına atlayabilirsiniz. ___
## 3. Bir Figma Hesabı Oluşturma 1. Tarayıcınızdan [figma.com](https://www.figma.com/) adresine gidin ve "Üye Ol // Sign Up" tuşuna tıklayın. 2. Bilgilerinizi girin ardından email hesabınızı doğrulayın 3. Yeni bir Figma Tasarım Dosyası oluşturun 4. Arayüzünüzü yapmaya başlayın - Sonraki bölüm, Tkinter Designer girişi için gerekli biçimlendirmeyi kapsar. - [Burada yeni başlayanlar için Figma öğretici serisi var.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [Figma'nın resmi YouTube kanalı.](https://www.youtube.com/c/Figmadesign/featured) - [Figma yardım servisi.](https://help.figma.com/hc/en-us)

# Figma Tasarımınızı Biçimlendirme [[Top](#table-of-contents)] ## 1. Referans
### İsimlendirme Önemlidir | Figma Element İsmi | Tkinter Elementi | | --- | --- | | Button | Button | | Line | Line | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
Tkinter Designer'ın oluşturduğu kodlar Figma tasarımınızdaki element isimlerden gelir, bu yüzden isimlendirmeyi doğru yapmanız gerekir. Figma'da elementleri kontrol panelindeki katmanlar paneli aracılığıyla çift tıklayarak isimlendirebilirsiniz. ___
## 2. Element Kılavuzu
1. **Öncelikle, Tkinter Penceresi olarak kullanacağınız bir "frame" oluşturun.**

2. **Resim Ekleme** - Resimler, şekiller ve resimler kullanılarak oluşturulabilir. - Eğer birden fazla şekil veya resim kullandıysanız, önce hepsini seçip ardından CTRL/⌘ + G kısayolu ile gruplandırmanız gerekir. - Bundan sonra elementi veya grubu "Image" olarak isimlendirin.

3. **Yazı (Normal Yazı)** - T tuşunu kullanarak yazı aracını aktif edin. Ardından istediğiniz yazıyı girin - Tkinter Designer'da yazının kullanımı için yeniden isimlendirilmesine gerek yoktur - Return ya da Enter tuşuna basarak sonraki satıra ilerleyin.

4. **Giriş (Tek Satır Kullanıcı Input'u)** - R tuşu ile Rectangle(Dikdörtgen) aracını aktive edin - Diktörtgeni beğeninize göre ayarlayın - Dikdörtgenin "TextBox" olarak adlandırıldığından emin olun

5. **Yazı Alanı (Çoklu Kullanıcı Input)** - R tuşu ile Rectangle(Dikdörtgen) aracını aktive edin - Diktörtgeni beğeninize göre ayarlayın - Dikdörtgenin "TextArea" olarak adlandırıldığından emin olun 6. **Dikdörtgen** - R tuşu ile Rectangle(Dikdörtgen) aracını aktive edin - Diktörtgeni beğeninize göre ayarlayın - Dikdörtgenin "Rectangle" olarak adlandırıldığından emin olun

7. **Normal Buton** - Buton olarak kullanmak için bir rectangle(dikdörtgen) ekleyin - Opsiyonel: Buton için bir yazı ekleyin - Butonu(Rectangle), ve herhangi bir yazıyı seçin, ardından onları CTRL/⌘ + G ile guruplayın - Grubu "Button" olarak adlandırın #### Herhangi bir problemde [bu videoyu](https://youtu.be/Qd-jJjduWeQ) referans alın

8. **Köşeli Buton** - Buton olarak kullanmak için bir rectangle(dikdörtgen) ekleyin - Opsiyonel: Buton için bir yazı ekleyin - Diktörtgene sağ taraftan kenar-yumuşatma ekleyerek kenarlarını yuvarlayın. [Daha fazlasına ulaşın](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - Butonunuz ile aynı boyutta bir diktörtgen oluşturun. Onu yuvarlatmayın. - Dikdörtgeninizin rengini arkaplan ile eşleşmesi için değiştirin - Şimdi yeni oluşturulan dikdörtgeni ana düğmenin(dikdörtgenin) altına taşıyın. - Butonu, dikdörtgeni ve herhangi opsiyonel yazıyı seçin ve onları CTRL/⌘ + G ile gruplandırın - Grubu "Button" olarak adlandırın. #### Herhangi bir problemde [bu videoyu](https://youtu.be/Qd-jJjduWeQ) referans alın

# Tkinter Designer'ı Kullanma [[Top](#table-of-contents)] ## Gerekli Girdiler TKinter Designer'ı kullanabilmek için bazı girdileri toplamanız gerekmektedir. ### 1. Kişisel Erişim Tokenı 1. Figma hesabınıza girin 2. Ayarlara gidin 3. **Account** sekmesinde, **Personal access tokens** kısmına kadar kaydırın 4. Giriş formu için erişim tokeninizin ismini girin ve Enter tuşuna basın 5. Kişisel erişim tokeniniz oluşturalacak. - Bu tokeni kopyalayın ve güvenli bir yerde saklayın. - **Bu tokenı kopyalamak için başka şansınız olmayacak.** ### 2. Dosya URL'nizi Elde Etme 1. Figma tasarım dosyanızda üst menüden **Share** butonuna, ardından **🔗 Copy link**'e tıklayın ## CLI'ı Kullanma CLI'yı kullanmak paketi yüklemek ve CLI aracını çalıştırmak kadar kolaydır. ### PyPi'den Verilerinizle $FILE_URL & $FIGMA_TOKEN değiştirerek aşağıdaki komutu test olarak kullanabilirsiniz. Eğer linke ve tokena ulaşamadıysanız [**Gerekli Girdiler**](#using-1) kısmına bakın. ``` bash pip install tkdesigner tkdesigner $FILE_URL $FIGMA_TOKEN ``` ### Kaynaktan CLI'ı kaynak kodundan kullanmak için depoyu klonlamanız ve ardından aşağıdaki talimatları izlemeniz gerekir. Verilerinizle $FILE_URL & $FIGMA_TOKEN değiştirerek aşağıdaki komutu test olarak kullanabilirsiniz. Eğer linke ve tokena ulaşamadıysanız [**Gerekli Girdiler**](#using-1) kısmına bakın. ```bash $ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN # To learn more about how to use the cli, pass the --help flag $ python -m tkdesigner --help ``` ### Çıktı Varsayılan olarak GUI kodu build/gui.py dosyasına yazılacak. Çıktı yolunu `-o` ile değiştirebilirsiniz. Oluşturulan GUI'yi çalıştırmak için GUI'yi oluşturduğunuz konuma gidin ve herhangi normal bir Tkinter GUI'si çalıştırır gibi çalıştırın. ```bash cd build python3 gui.py ``` ## GUI'yi Kullanma ### Sıradaki adımları yapmadan önce Tkinter Designer'ı açın
1. TKinter Designer GUI'sini aşağıdaki kod yardımıyla açın ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. *kişisel erişim tokenı*'nı Tkinter Designer'daki **Token ID** kısmına yapıştırın. 3. Tkinter Designer'da linki **File URL** kısmına yapıştırın 4. Dosya gezgininden bir dosya açmak için **Output Path**'a tıklayın 5. Bir çıktı yolu seçin ve **Select Folder**'a basın 6. **Generate**'e tıklayın Tkinter Designer'ın çıktı dosyaları, seçtiğiniz dizine, **build** adlı yeni bir klasöre yerleştirilecektir. Tebrikler, şimdi Tkinter GUI'nizi Tkinter Designer kullanarak oluşturdunuz!

# Sorun Giderme [[Top](#table-of-contents)] - Elementler görünmüyor mu? Yanlış mı yerleştirilmiş? - Lütfen Figma dosyasındaki elementlerin doğru isimlendirildiğinden emin olun. * See [Formatting Your Figma Design, §1](#formatting-1) - Butonun istenmeyen bir gri arka planı mı var? - Buton elementinizin arkasına dikdörtgen eklediğinizden ve dolgu renginin arka plan rengiyle aynı olduğundan emin olun. - Yanlış elementler? - Figmada elementinizi doğru isimlendirdiğinizden emin olun - Şu kısma bakın: [Figma Tasarımınızı Biçimlendirme, §1](#formatting-1) - Pencere ekranınızdan daha mı büyük? - Figma'da elementlerinizin boyutunu düşürün - Dosya oluşturulmuyor mu? - Tkinter Designer'ı yeniden başlatın - Token'ı ve URL'yi iki kez kontrol edin - Tasarımınızın bir Frame'e(çerçeve) sahip olduğundan emin olun - Başka bir şey? - [GitHub'da burda listelenmeyen sorunları bildirin](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.Vi VN (`docs/instructions.vi-VN.md`) # Cách sử dụng Tkinter Designer #### Các bản dịch - [简体中文](/docs/instructions.zh-CN.md) - [Français](/docs/instructions.fr-FR.md) - [ગુજરાતી](docs/instructions.gu-GU.md) - [عربية](/docs/instructions.ar-DZ.md) - [Turkish](/docs/instructions.tr-TR.md) - [Korean](/docs/instructions.kr-KR.md) - [Tiếng Việt](/docs/instructions.vi-VN.md) ___ ## Mục lục 1. [**Bắt đầu**](#getting-started-1) 1. [Cài đặt Python](#getting-started-1) 2. [Cài đặt Tkinter Designer](#getting-started-2) 3. [Tạo tài khoản Figma](#getting-started-3) 2. [**Cách định dạng thiết kế ở Figma**](#formatting-1) 1. [Tài liệu tham khảo](#formatting-1) 2. [Hướng dẫn về các phần tử](#formatting-2) 3. [**Sử dụng Tkinter Designer**](#Using-Tkinter-Designer) 1. [Mã truy cập cá nhân](#using-1) 2. [Lấy địa chỉ của file](#using-2) 3. [Sử dụng CLI (Command Line Interface)](#using-cli) 4. [Sử dụng GUI (Giao diện người dùng đồ họa)](#using-gui) 4. [**Khắc phục sự cố**](#Troubleshooting)

# Bắt đầu [[Top](#table-of-contents)] ## 1. Install Python Trước khi sử dụng Tkinter Designer, bạn sẽ cần cài đặt Python. - [Bấm vào đây để đến trang tải xuống Python](https://www.python.org/downloads) - [Đây là hướng dẫn cho các hệ điều hành](https://wiki.python.org/moin/BeginnersGuide/Download) *Trong hướng dẫn này, bạn sẽ sử dụng Trình cài đặt Gói cho Python (pip), điều này có thể đòi hỏi bạn phải thêm Python vào PATH của hệ thống. ___
## 2. Cài đặt Tkinter Designer *3 Phương Pháp:* 1. Sử dụng câu lệnh `pip install tkdesigner` 2. Cài đặt [poetry](https:python-poetry.org) và sử dụng các câu lệnh: - `poetry new && cd ` - `poetry add tkdesigner` - `poetry install` 3. Chạy Tkinter Designer từ mã nguồn mở: 1. Tải xuống các tệp nguồn cho Tkinter Designer bằng cách tải xuống thủ công hoặc sử dụng GIT. ` git clone https://github.com/ParthJadhav/Tkinter-Designer.git ` 2. Thay đổi thư mục làm việc của bạn thành Tkinter Designer. `cd Tkinter-Designer` 3. Cài đặt các gói cần thiết. - `pip install -r requirements.txt` - Nếu pip không hoạt động, hãy thử các câu lệnh sau: - `pip3 install -r requirements.txt` - `python -m pip install -r requirements.txt` - `python3 -m pip install -r requirements.txt` - Nếu vẫn không hoạt động, hãy đảm bảo Python đã được thêm vào PATH. Điều này sẽ cài đặt tất cả các yêu cầu và Tkinter Designer. Trước khi sử dụng Tkinter Designer, bạn cần tạo một tệp Figma với các hướng dẫn dưới đây. Nếu bạn đã tạo một file, hãy đi tới phần [**Sử dụng Tkinter Designer**](#Using-Tkinter-Designer). ___
## 3. Tạo tài khoản Figma 1. Truy cập [figma.com](https://www.figma.com/) và đăng kí 2. Nhập thông tin của bạn, sau đó xác minh email của bạnl 3. Tạo một file thiết kế Figma 4. Bắt đầu tạo GUI (Giao diện người dùng đồ họa) - Phần tiếp theo sẽ đề cập đến định dạng cần thiết cho đầu vào Tkinter Designer. - [Đây là loạt bài hướng dẫn chính thức của Figma dành cho người mới bắt đầu.](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) - [Đây là kênh YouTube chính thức của Figma.](https://www.youtube.com/c/Figmadesign/featured) - [Đây là Trung tâm Trợ giúp của Figma.](https://help.figma.com/hc/en-us)

# Định dạng thiết kế ở Figma [[Top](#table-of-contents)] ## 1. Tham khảo
### Cách đặt tên là một yếu tố vô cùng quan trọng | Tên phần tử trong Figma | Khi phần tử ở Tkinter | | --- | --- | | Button | Button | | Line | Line | | Text | Name it anything | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
Mã được tạo ra bởi Tkinter Designer dựa trên tên các phần tử trong thiết kế Figma của bạn, và do đó, bạn cần đặt tên cho các phần tử của mình một cách phù hợp. Trong Figma, đổi tên các phần tử bằng cách nhấp đúp vào chúng trong bảng Layers. ___
## 2. Hướng dẫn về các phần tử
1. **Trước tiên, tạo một khung chứa và đó sẽ là cửa sổ Tkinter của bạn.**

2. **Thêm ảnh** - IHình ảnh có thể được tạo bằng các hình dạng (shapes) và/hoặc hình ảnh (images) - Nếu bạn sử dụng nhiều hình dạng/ảnh, bạn phải nhóm chúng lại bằng cách chọn tất cả và nhấn CTRL/⌘ + G - Sau đó, đặt tên cho phần tử hoặc nhóm là "Image".

3. **Văn bản (Văn bản bình thường)** - Sử dụng phím T để kích hoạt công cụ văn bản, sau đó thêm văn bản theo ý muốn - Văn bản không cần được đổi tên để sử dụng trong Tkinter Designer - Nhấn rõ nút Return hoặc Enter để chuyển xuống dòng tiếp theo.

4. **Entry (Người dùng nhập trong 1 dòng)** - Kích hoạt công cụ Hình lập phương (rectangle) với R - Điều chỉnh Hình lập phương (rectangle) theo ý thích của bạn - Đảm bảo rằng Hình lập phương (rectangle) có tên là "TextBox"

5. **Vùng văn bản (Người dùng nhập nhiều dòng)** - Kích hoạt công cụ Hình lập phương (rectangle) với R - Điều chỉnh Hình lập phương (rectangle) theo ý thích của bạn - Đảm bảo rằng Hình lập phương (rectangle) có tên là "TextArea" 6. **Hình lập phương** - Kích hoạt công cụ Hình lập phương (rectangle) với R - Điều chỉnh Hình lập phương (rectangle) theo ý thích của bạn - Đảm bảo rằng Hình lập phương (rectangle) có tên là "Rectangle"

7. **Nút thông thường** - Thêm một Hình lập phương để làm nút trong Giao diện người dùng đồ họa của bạn. - Tùy chọn: Thêm văn bản cho nút. - Chọn nút (Hình lập phương vừa tạo) và văn bản, sau đó nhóm chúng với phím CTRL/⌘ + G - Đặt tên cho nhóm là "Button" #### Tham khảo [video này](https://youtu.be/Qd-jJjduWeQ) nếu bạn gặp phải vấn đề

8. **Nút bo tròn** - Add rectangle to serve as a button in your GUI - Thêm một Hình lập phương để làm nút trong Giao diện người dùng đồ họa của bạn. - Tùy chọn: Thêm văn bản cho nút. -Làm cho nút có hình dạng bo tròn bằng cách thêm bán kính góc bằng cách chọn Hình lập phương và thêm bán kính góc từ phía bên phải.[Đọc thêm](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) - Tạo một Hình lập phương có cùng kích thước với nút của bạn. Không làm cho nó bo tròn. - Thay đổi màu sắc của Hình lập phương để phù hợp với nền. - Tiếp theo, di chuyển Hình lập phương vừa tạo xuống phía dưới nút chính (Hình lập phương). - Chọn nút, Hình lập phương và văn bản tùy chọn (nếu có), sau đó nhóm chúng với phím CTRL/⌘ + G. - Đặt tên cho nhóm là "Button". #### Tham khảo [video này](https://youtu.be/Qd-jJjduWeQ) nếu bạn gặp phải vấn đề

# Sử dụng Tkinter Designer [[Top](#table-of-contents)] ## Các thông tin cần nhập Có một số thông tin mà bạn sẽ cần thu thập để sử dụng Tkinter Designer. ### 1. Mã truy cập cá nhân 1. Đăng nhập vào tài khoản Figma của bạn. 2. Di chuyển đến Cài đặt. 3. Trong tab Tài khoản, cuộn xuống đến Mã truy cập cá nhân. 4. Nhập tên của mã truy cập cá nhân vào ô nhập và nhấn Enter. 5. Mã truy cập cá nhân của bạn sẽ được tạo. - Sao chép mã truy cập này và lưu nó ở một nơi an toàn. - **Mã này sẽ chỉ xuất hiện một lần và không thể sao chép lại** ### 2. Lấy địa chỉ của file 1. Trong tệp thiết kế Figma của bạn, nhấp vào nút **Share** ở thanh trên cùng, sau đó nhấp vào **🔗 Copy link** ## Sử dụng CLI Sử dụng CLI rất đơn giản, chỉ cần cài đặt gói và chạy công cụ CLI. ### Từ PyPi Bạn có thể sử dụng lệnh dưới đây để kiểm tra bằng cách thay thế $FILE_URL và $FIGMA_TOKEN bằng dữ liệu của bạn. Nếu bạn chưa có mã thông báo và liên kết, vui lòng tham khảo phần [**Các thông tin cần nhập**](#using-1). ``` bash pip install tkdesigner tkdesigner $FILE_URL $FIGMA_TOKEN ``` ### Từ mã nguồn Để sử dụng CLI từ mã nguồn, bạn cần sao chép kho mã và sau đó làm theo các hướng dẫn dưới đây. Bạn có thể sử dụng lệnh dưới đây để kiểm tra bằng cách thay thế $FILE_URL và $FIGMA_TOKEN bằng dữ liệu của bạn. Nếu bạn chưa có mã thông báo và liên kết, vui lòng tham khảo phần [**Các thông tin cần nhập**](#using-1). ```bash $ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN # To learn more about how to use the cli, pass the --help flag $ python -m tkdesigner --help ``` ### Kết quả Mặc định, mã GUI sẽ được ghi vào tệp build/gui.py. Bạn có thể chỉ định đường dẫn đầu ra bằng cách sử dụng cờ `-o` và cung cấp đường dẫn. Để chạy GUI đã tạo, hãy di chuyển đến thư mục bạn đã xây dựng (ví dụ: build/) và chạy nó như bất kỳ GUI Tkinter nào khác. ```bash cd build python3 gui.py ``` ## Sử dụng giao diện người dùng đồ họa (GUI) ### Mở Tkinter Designer trước khi làm các bước sau
1. Mở giao diện người dùng Tkinter Designer bằng cách: ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. Dán *mã truy cập cá nhân* của bạn vào ô **Token ID** trong Tkinter Designer. 3. Dán liên kết vào ô **File URL** trong Tkinter Designer. 4. Nhấp vào ô **Output Path** để mở trình duyệt tệp. 5. Chọn một đường dẫn đầu ra và nhấp vào **Select Folder**. 6. Nhấn **Generate**. Các tệp kết quả từ Tkinter Designer sẽ được đặt trong thư mục đã chọn của bạn, trong một thư mục mới có tên là **build**. Chúc mừng bạn đã tạo thành công giao diện Tkinter của bạn bằng Tkinter Designer!

# Gỡ lỗi [[Trở lại đầu trang](#table-of-contents)] - Các phần tử không hiển thị? Bị đặt sai vị trí? - Vui lòng đảm bảo rằng tệp Figma của bạn đã đặt tên các phần tử của nó đúng cách. * Xem [Định dạng thiết kế Figma của bạn, §1](#formatting-1) - Nút có màu nền xám không đúng ý? - Hãy đảm bảo bạn đã thêm một hình chữ nhật phía sau phần tử nút của bạn và màu sắc Fill của nó giống với màu nền. - Các phần tử không chính xác? - Hãy đảm bảo bạn đã đặt tên các phần tử của mình đúng cách trong Figma. - Xem [Định dạng thiết kế Figma của bạn, §1](#formatting-1) - Cửa sổ lớn hơn màn hình? - Giảm kích thước các phần tử trong Figma. - Không tạo ra các tệp? - Khởi động lại Tkinter Designer. - Kiểm tra lại mã thông báo và liên kết. - Đảm bảo thiết kế của bạn có một khung (Frame). - Có vấn đề khác? - [Báo cáo vấn đề không được liệt kê tại đây trên GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- ### Instructions.Zh CN (`docs/instructions.zh-CN.md`) # 如何使用 Tkinter Designer ___ ## 目录 1. [**入门**](#getting-started-1) 1. [安装Python](#getting-started-1) 2. [Install Tkinter Designer](#getting-started-2) 3. [做一个 Figma Account](#getting-started-3) 2. [**格式化你的 Figma Design**](#formatting-1) 1. [参考](#formatting-1) 2. [元素指南](#formatting-2) 3. [**使用 Tkinter Designer**](#Using-Tkinter-Designer) 1. [Personal Access Token](#using-1) 2. [File URL](#using-2) 3. [使用命令行](#using-cli) 4. [使用图形界面](#using-gui) 4. [**故障排除**](#Troubleshooting)

# 入门 [[Top](#目录)] ## 1.安装Python 在使用 Tkinter Designer 之前，您需要安装 Python。 - [这是 Python 下载页面的链接。](https://www.python.org/downloads) - [这是在各种操作系统上安装 Python 的有用指南。](https://wiki.python.org/moin/BeginnersGuide/Download) *在本指南的后面部分，您将使用 Python 包安装程序 (pip)，这可能需要您将 Python 添加到系统 PATH 中。* ___
## 2. 安装 Tkinter 设计器 安装 Python 后，您可以从 [官方存储库](https://github.com/ParthJadhav/Tkinter-Designer) 下载 Tkinter Designer。 在右侧边栏上，单击最新版本，然后在 **Assets** 下，选择 `tkinter_designer.exe`。 下载完可执行文件后，您就可以运行程序了！ *要从源代码运行 Tkinter Designer，请按照以下说明进行操作。* 1. 通过手动下载或使用 git 下载 Tkinter Designer 的源文件：- ` 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 文件。 如果您已经创建了文件，请跳至 [**Using Tkinter Designer**](#使用-Tkinter-Designer) 部分。 ___
## 3. 创建一个 Figma 帐户 1. 在网页浏览器中，导航至 [figma.com](https://www.figma.com/) 并点击“注册” 2. 输入您的信息并验证您的电子邮件 3. 创建一个新的 Figma Design 文件 4. 开始制作你的 GUI - 下一节介绍 Tkinter 设计器输入所需的格式。 - [这是面向初学者的官方 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)

# 格式化你的 Figma 设计[[Top](#目录)] ## 1. 参考
### 命名很重要 | Figma 元素名称 | Tkinter 元素 | | --- | --- | | Button | Button | | Line | Line | | Rectangle | Rectangle | | TextArea | Text Area | | TextBox | Entry | | Image | Canvas.Image() |
Tkinter Designer 生成的代码基于 Figma 设计中的元素名称，因此，您需要相应地命名元素。 在 Figma 中，通过在“图层”面板中双击元素来重命名元素。 ___
## 2. 元素指南
1. **首先，创建一个框架作为您的 Tkinter 窗口。**

2. **添加图片** - 可以使用形状和/或图像创建图像 - 如果您使用多个形状/图像，您必须通过选择它们并按 CTRL/⌘ 将它们组合在一起。 + G - 在此之后将元素或组命名为“Image”。

3. **文本（普通文本）** - 使用 T 键激活文本工具，然后根据需要添加文本 - 在 Tkinter Designer 中使用时不必重命名文本 - 明确按下 Return 或 Enter 键移动到下一行。

4. **输入（单行用户输入）** - 使用 R 激活矩形工具 - 根据您的喜好调整矩形 - 确保矩形命名为“TextBox”

5. **文本区域（多行用户输入）** - 使用 R 激活矩形工具 - 根据您的喜好调整矩形 - 确保矩形命名为“TextArea”

6. **矩形** - 使用 R 激活矩形工具 - 根据您的喜好调整矩形 - 确保矩形被命名为“Rectangle”

7. **按钮** - 添加一个元素作为 GUI 中的按钮 - *可选：为按钮添加文本* - 在按钮下方的图层上创建一个矩形 - 更改矩形的颜色以匹配背景 - 选择按钮、矩形和任何可选文本，然后将它们与CTRL/⌘ + G - 将组命名为“Button”

# 使用 Tkinter Designer [[Top](#目录)]
## 1. 个人访问令牌 1. 登录您的 Figma 帐户 2. 导航到设置 3. 在 **Account** 选项卡中，向下滚动到 **Personal access tokens** 4. 在条目表单中输入您的访问令牌的名称，然后按 Enter 5. 您的个人访问令牌将被创建。 - 复制此令牌并将其保存在安全的地方。 - **您将不会再有机会复制此令牌。** 6. 将您的个人访问令牌粘贴到 Tkinter Designer 中的 **Token ID** 表单中 ___
## 2. 文件地址 1. 在您的 Figma 设计文件中，单击顶部栏中的 **Share** 按钮，然后单击 **🔗 复制链接** 2. 将链接粘贴到 Tkinter Designer 中的 **File URL** 表单中 ___
## 使用 CLI 使用 CLI 就像安装软件包和运行 CLI 工具一样简单。 您可以通过将 $YOUR_FIGMA_TOKEN 替换为您生成的 Figma Personal Access Token 来使用以下命令作为测试。 如果您还没有获得令牌，请参阅 [**Required Inputs Section**](#using-1) 。 ```bash # 示例数据 $ python -m tkdesigner.cli https://www.figma.com/file/WVLnulVsI177tvnxSdqOUZ/Untitled?node-id=0%3A1 $YOUR_FIGMA_TOKEN -f # 要了解有关如何使用 cli 的更多信息，请传递 --help 标志 $ python -m tkdesigner.cli --help ``` 默认情况下，GUI 代码将写入 build/gui.py。 要运行生成的 GUI，请 cd 进入您构建它的目录（例如 build/）并像运行任何 Tkinter GUI 一样运行它。 ```bash cd build python3 gui.py ``` ## 使用 GUI
1.打开TKinter Designer ``` cd Tkinter-Designer cd gui python3 gui.py ``` 2. 将您的 *个人访问令牌* 粘贴到 Tkinter Designer 中的 **令牌 ID** 表单中 3. 将链接粘贴到 Tkinter Designer 中的 **File URL** 表单中 4. 单击**输出路径**表单打开文件浏览器 5. 选择一个输出路径并点击**Select Folder** 6. 按**生成** Tkinter Designer 的输出文件将放置在您选择的目录中，位于名为 **build** 的新文件夹中。 恭喜，您现在已经使用 Tkinter Designer 创建了您的 Tkinter GUI！ # 故障排除 [[Top](#目录)] - 元素不可见？ 放错地方了？ - 请确保您的 Figma 文件具有正确命名的元素。 * 请参阅 [格式化您的 Figma 设计，§1](#formatting-1) - 按钮有意外的灰色背景？ - 确保您在按钮元素后面添加了一个矩形，并且其填充颜色与背景的相同 - 不正确的元素？ - 确保您在 Figma 中正确命名了元素 - 请参阅 [格式化您的 Figma 设计，§1](#formatting-1) - 窗口比屏幕大？ - 减少 Figma 中元素的大小 - 文件没有生成？ - 重启 Tkinter 设计器 - 仔细检查令牌和 URL - 确保你的设计有一个框架 - 还有什么？ - [报告未在 GitHub 上列出的问题](https://github.com/ParthJadhav/Tkinter-Designer/issues/new) --- --- METRICS --- - Files Extracted: 31 - Estimated Token Budget: ~54068 tokens - Canonical Reference: https://codewiki.google/github.com/ParthJadhav/Tkinter-Designer