FMX Style Designer
Contents
Overview
The FireMonkey Style Designer is a standalone application that reimagines how developers create and manage FMX styles for RAD Studio. This standalone application addresses the key limitations that have long challenged FireMonkey-style development. It provides a design-centric interface where you work with high-level concepts: colors, backgrounds, typography, and interaction states, while the designer generates the proper style structure behind the scenes.
The Style Designer lets you define the visual design intent, and it automatically generates the technical implementation. The system is built around three core principles that fundamentally change how you create styles. Parameterization is when one defines design tokens (colors, typography, sizing…) once and references them throughout custom styles. When your brand color changes from blue to purple, you update a single parameter rather than editing dozens of individual styles. This single-source-of-truth approach ensures consistency and reduces maintenance time and errors.
Advantages of using the Tool
Understanding the task's context helps users determine when to use the new FMX Style Designer versus the traditional FireMonkey Style Designer editor. Although the traditional designer offers complete flexibility and full control over every aspect of the styles, it is necessary to know how the different implementations work. Implementations such as knowing which components can be used within styles, understanding the required hierarchical relationships between style elements, using specific names that components will search for, and more.
The new FMX Style Designer solves these problems by focusing your attention on appearance rather than implementation. The designer understands the requirements for each component type and automatically generates appropriate structures.
The Style Designer is not a complete replacement for the traditional editor. It's designed to make common styling tasks easy and intuitive, but it doesn't attempt to handle every possible edge case. For highly specialized customizations, debugging complex style issues, or working with custom third-party components with unique requirements, the traditional editor remains available.
It is recommended to use the FMX Style Designer for standard component styling and common patterns, and use the traditional editor when you need granular precision on unusual requirements.
Application Interface
The interface is divided into three areas that support an iterative design workflow. Each panel serves a specific purpose in the style creation process, and understanding how they work together will help you work efficiently.
The application uses the following three-panel layout:
- Project Structure Tree (Left Panel): displays styles, resources, and components in a hierarchical view.
- Live Preview (Center Panel): renders styles in real time and responds to interaction. Hover and click to preview component states.
- Properties Panel (Right Panel): displays context-sensitive properties for the selected item.
Left Panel: Project Structure
The left panel provides a complete overview of your style system, organized in a hierarchical tree structure. Everything you create, from basic color parameters to complete component styles, is organized and browsable here.
The structure is divided into the following sections.
| Section | Description |
|---|---|
| Colors | Holds the color parameter definitions. |
| Text Styles | Holds the typography parameters: font families, weights, and sizes that define your text hierarchy. |
| Sizes | Stores dimensional parameters, such as component heights and spacing units. |
| Effects | Configure shadow configurations and other reusable effects. |
| Common Elements | Defines shared resources organized hierarchically. This is where backgrounds, icons, vectors, and other reusable resources live. |
| Styles | Contains your component styles organized by component type: Button, Panel, Edit, Label, etc. |
The organization in the Left Panel follows a specific naming convention. When naming a resource as follows:
background - button - primary
The designer automatically creates a nested structure: background ➜ button ➜ primary. This hierarchical organization makes it easy to browse and locate resources as your style system grows. It is important to pay special attention to the spaces between dashes when creating nested items automatically.
Right-clicking anywhere in the left panel opens a context menu that provides access to creation options. Note that this menu shows the same options regardless of where you click.
Center Panel: Live Preview
The center panel displays the current selection in real time, providing immediate visual feedback as you make changes. This panel is not just a static preview; it's a fully interactive representation of your style. For example, for buttons, hover to see the hover state, click to see the pressed state, and observe state transitions in action. Text inputs allow you to type and see focus behavior. Panels demonstrate size scaling. This immediate feedback loop helps you understand how your styles will behave in actual applications without constantly exporting and testing in RAD Studio.
The preview displays helpful dimension labels (like "150 × 50") to quickly verify sizing decisions. Use the Test Desktop and Test Mobile buttons to preview your styles across different platform contexts. Desktop mode emphasizes hover states and keyboard interaction, while mobile mode focuses on touch targets and pressed states, automatically adjusting the preview to match platform conventions.
Right Panel: Properties and Configuration
The right panel is where one can set the desired configurations and properties. It's context-sensitive, meaning it displays properties appropriate to any selections made in the left panel, whether that is a complete style, a background resource, or a color parameter.
Properties are organized into logical sections that can be expanded or collapsed. Common property sections include:
| Property | Description |
|---|---|
| FMX style name | The identifier that appears in Delphi's StyleLookup property dropdown. |
| Fixed Size | Set the width and height constraints. It is possible to set one or both as fixed or flexible. |
| Padding | Component edge spacing with independent control for each side (Left, Right, Top, Bottom). |
| Background | Visual appearance resource that allows defining the background color. |
| Content Padding | Internal spacing between edge and content (text/icon). |
| Shadow | Optional depth effect with color, opacity, blur radius, and offset controls. |
| Text | Typography and color configuration with visibility toggle. |
| Icon | Icon resource and sizing with tintable option for runtime color changes. |
| Touch Animation | Interactive feedback behavior, platform-specific. |
Most properties are optional. If you do not configure a section, this section will not be included in the exported style. This ensures you only include what your design actually requires. In addition, use the + sign next to a property to create resources inline.
Menu References
The following section explains the different menus and sub-menus used in the FMX Style Designer.
File Menu
File > New Creates a new style project from templates. The choice of template provides different starting points depending on your target platform and approach.
| Template | Description |
|---|---|
| Empty Template | Provides a blank project with no predefined styles or parameters. Useful when creating styles for a specific subset of components. |
| Desktop Template | Optimized for mouse and keyboard interaction. It includes all interaction states (Normal, Hover, Pressed, and Focus), with particular emphasis on hover feedback. The spacing and sizing are calibrated for standard desktop displays. |
| Mobile Template | Targets touch interaction specifically. This template emphasizes Pressed states and omits Hover states entirely. It uses larger touch targets to accommodate finger-based interaction. |
| Platform-Specific Template | Available for Windows, macOS, Linux, Android, and iOS. These provide platform-appropriate structural foundations, including the complete style hierarchy, basic color parameters, and component definitions, all already configured. The templates include appropriate sizing, spacing, and state configurations for each platform. |
Its is necessary to manually add visual assets to complete these templates. Background images, custom icons, and bitmap resources are not included.
File Export
File > Export
Exports a style system to FireMonkey's .fsf format. Navigate to File > Export, choose a filename and location, then click Save.
During export, the designer performs the following automatic optimizations:
- All bitmaps are combined into a single optimized source PNG with efficient packing.
- Source regions, margins, and scale factors are calculated automatically.
- Style objects are generated with proper hierarchies, names, and references.
- Only defined styles and resources are included.
- All resource references and dependencies are validated.
The resulting .fsf file is a standard FireMonkey style file that can be used in Delphi or C++Builder applications from version 13.1.
Generated
.fsf files can potentially be used in older RAD Studio versions. However, it is strongly recommended to avoid them. Some features, such as Tintable icons and advanced alignment options, have been introduced in version 13.0.Creating Resources
This section explains the workflow for creating resources using the Style Designer tool.
Inline Resource Creation Workflow
The recommended workflow creates resources as needed, directly from the properties where they'll be used. This approach helps to focus on the component one is currently designing and automatically creates properly named, organized resources.
When you reach a property that needs a resource (like background, icon, or shadow), click the + icon next to that property. A menu appears with options for resource types. Select the appropriate type, configure it in the dialog, and the designer automatically creates the resource with appropriate naming, links it to your property, and organizes it under the parent style in the left panel.
Resource Type Options
When you click the + button to create a resource, the designer presents several options, each optimized for different use cases. See the options and their use case below:
| Option | Description |
|---|---|
| Color | Creates a simple solid color value. Colors use an 8-digit hexadecimal format where the first two digits represent alpha (transparency), and the remaining six represent RGB values. For example, FF4F4FFF.Note:
The format doesn't require any prefix, just enter the eight hexadecimal digits directly. |
| Dynamic color | Provides a state-aware color set. Instead of defining a single color, define how color changes across interaction states: Normal, Hovered, Focused, Pressed, Disabled, and Selected. The designer applies these automatically based on component state. Each state is optional, and is only necessary to define the states relevant to the design. |
| Image (Static Bitmap) | Loads raster images from file. The designer supports standard DPI scaling with four scale factors: 1x, 1.5x, 2x, and 3x. If your filenames follow the convention of ending with the scale (e.g., [email protected]), the designer automatically recognizes and organizes them by scale factor. |
| Dynamic Image | A combination of state awareness and DPI scaling. For each interaction state (Normal, Hovered, Pressed, etc.), you can provide images at multiple scales. Particularly useful for button backgrounds and other interactive elements where visual feedback is important. |
| SVG Path | Allows users to define custom vector shapes using SVG path syntax. This provides more flexibility than simple rectangles while maintaining the benefits of vector graphics: resolution independence, small file sizes, and dynamic coloring. |
| Vector Rectangle | Creates programmatic backgrounds with configurable properties. Use this option to set the corner radius, border stroke color, and fill color. |
See other Resources and useful features in the FMX Style Designer Features page.
Integration with RAD Studio
The following section explains how to integrate your styles with RAD Studio.
Load Styles to Applications
After exporting the styles to an .fsf file, the next step is to integrate them into a Delphi or C++Builder application. The mechanism uses a TStyleBook component that acts as a container for custom styles.
Follow the steps below to load styles using the TStyleBook.
- Open the FireMonkey project and locate the Form Designer.
- Using the Tool Palette, add the
TStyleBookcomponent to the Form (it’s a non-visual component). - Select the
TStyleBookcomponent, and use the Object Inspector to find the FileName property. - Click the ellipsis button (...) and navigate to your exported
.fsffile. - Select the form itself and find its
StyleBookproperty. - Set the StyleBook property to reference your TStyleBook component.
The form and all its child components now have access to your custom styles
If you have multiple forms in your application, you can either place a StyleBook on each form or place one StyleBook on your main form and set other forms' StyleBook properties to reference it. For independent forms, each typically has its own StyleBook pointing to the same .fsf file.
Apply Styles to Components
Once the StyleBook is loaded, applying custom styles is as simple as selecting from a dropdown. Here is an example of how to apply the style.
- Place any component on the Form (e.g., a TButton).
- Select the component and locate the StyleLookup property in the Object Inspector.
- Click the dropdown to see a filtered list of styles appropriate for the selected component.
- Select the style you desire (e.g., ButtonPrimary), and the component updates immediately to reflect the selection.
The dropdown filtering is based on the style name containing the component name. This is why including the component name in the FMX Style Name is essential.
Update Styles
When you refine your styles and re-export the .fsf file, the RAD Studio application picks up the changes automatically the next time the form is opened in the designer or when the application is run. There's no special reload step, just overwrite the old .fsf file with the new one.
Accessing the Tool
Launch the Style Designer directly from the command line or file explorer:
- 32-bit version,
C:\Program Files (x86)\Embarcadero\Studio\37.0\bin\FMXStyleDesigner.exe - 64-bit version,
C:\Program Files (x86)\Embarcadero\Studio\37.0\bin64\FMXStyleDesigner.exe
Best Practices and Recommendations
This section outlines best practices for using the FMX Style Designer tool and provides recommendations.
RAD Studio makes the following recommendations when using the FMX Style Designer tool:
Start with Design Tokens:
- It is recommended to define comprehensive parameters before creating component styles. Define a complete color system (primary, secondary, and all semantic colors), typography scale, spacing units, and standard dimensions.
- Use descriptive, semantic parameter names. Names should convey meaning and intent rather than appearance. The name "primary" is more meaningful than "blue" because it remains accurate even if the actual color changes.
Keep Visual Consistency:
- Leverage parameters and shared resources aggressively. If two components have similar shadows, they should reference the same shadow resource. If three buttons use the same corner radius, that should be a parameter, not three separately entered values.
- Avoid slight variations for components; these one-off customizations accumulate over time and create a maintenance burden.
- It is recommended to keep your project structure organized from the start. Delete unused resources rather than letting them accumulate. Rename resources when their purpose changes. Maintain clear hierarchies in your Common Elements section through thoughtful naming. Periodic cleanup sessions are valuable.
Test Across Scales and States:
- Use the live preview extensively during development. Click buttons, hover over components, type in text inputs.
- Ensure all states have appropriate visual feedback and that transitions between states are smooth.
- For mobile-focused applications, verify that touch targets meet minimum size guidelines and have sufficient visual feedback in pressed states.
- Note:
The live preview doesn't work perfectly for all styled controls. Some complex components, such asTGrid,TMenuItem, orTTreeNode, may not render exactly as they do in your application. The preview works best for simpler components like buttons, panels, edits, and labels. For complex components, always verify the final appearance by testing in a running RAD Studio application.