UI Design Tool

Intuitive UI design workflow in Godot.

Import/manage font source files and styling UI directly in the editor viewport.

This version is only compatible with Godot 4.x, check out godot3 branch for older version

Features

• Overlay Text Editor
• Toolbar(Support batch edit):
  • Font:
    • Import and manage TrueType fonts(.ttf)
    • Font family
    • Font weight
    • Font size
    • Font color
  • Highlight
  • Horizontal/Vertical alignment
  • Font Style/Formatting(Typography hierarchy)
  • Utilities:
    • Clear font
    • Clear color
    • Rect size refresh

For more detail list, check CHANGELOG.md

Installation

• Install directly from Godot Asset Library

or

• Download this respository,
  1. Move addons/ui_design_tool to your {project_dir}
  2. Enable it from Project -> Settings -> Plugins

or

Install with gd-plug

plug("imjp94/UIDesignTool")

Usage

Toolbar

Select any Control node will show the toolbar at the bottom of 2D screen viewport, otherwise, it will stay hidden. Select multiple nodes to edit simultaneously.

Overlay Text Editor

Double click on Control node with text property(Label, Button, RichTextLabel, etc...) will show overlay text editor at mouse position.

Import TrueType Font(.ttf)

Click on to select the root directory where your font source directories located.

Make sure the selected directory and filenames are structured as below:

• {root_dir}
  • {font_dir}
    • {font_filename}{- or _}{weight_name}
    • ...
  • ...

Example:

• fonts/
  • Arial/
    • Arial-Regular.ttf
    • Arial-Bold.ttf
    • Arial-Italic.ttf
    • Arial-BoldItalic.ttf
  • Courier/
    • Courier_Regular.ttf
    • Courier_Bold.ttf
    • Courier_Italic.ttf
    • Courier_BoldItalic.ttf
  • ...

Folder name of the font will be used as the font name in toolbar

Click on to refresh the font list upon any changes made to the font sources.

Supported weight names (non case sensitive)

• thin
• extralight
• light
• regular
• medium
• semibold
• bold
• extrabold
• black
• extrablack

Supported italic weight names (non case sensitive):

• thinitalic
• extralightitalic
• lightitalic
• regularitalic/italic
• mediumitalic
• semibolditalic
• bolditalic
• extrabolditalic
• blackitalic
• extrablackitalic