feat: Add RTL variant detection via Figma component property - #52
Conversation
Introduce the `rtlProperty` configuration to support RTL variant detection in Figma components. This change updates the loaders to filter RTL=On variants based on a customizable RTL property name, which defaults to "RTL". By setting `rtlProperty`, components with this variant property are marked as RTL, and RTL=On variants are automatically skipped (iOS/Android auto-mirror these variants). This enhances platform support for RTL languages by ensuring icons and images are properly processed without redundant RTL=On variants.
Add `rtlProperty` field to `ImagesSourceInput` and `IconsSourceInput` to enable detection of right-to-left variants for Figma components. Ensure `rtlProperty` is propagated correctly through the export process for all platforms (iOS, Android, Flutter, Web) without modifying existing behaviors for left-to-right components. Implement tests to validate the preservation of `rtlProperty` through the data pipeline. Transition from default hardcoded RTL property `"RTL"` to configurable approach, allowing per-entry customization or disabling (by setting it to `nil`). This change enhances localization support by providing optional RTL variant support, while maintaining backward compatibility with current workflows.
Summary of ChangesHello @alexey1312, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the handling of Right-to-Left (RTL) assets by introducing a more structured and configurable detection method. It moves away from description-based RTL identification to leverage dedicated Figma component properties, enhancing accuracy and developer control. The changes ensure that RTL variants are correctly identified, filtered, and named across all supported platforms, streamlining the asset pipeline and providing greater flexibility for designers and developers. Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a robust mechanism for detecting RTL variants of icons and images directly from Figma component properties, which is a significant improvement over relying on description text. The changes are extensive, touching configuration, data models, loaders, and exporters across all platforms, and are well-executed. The documentation and tests have been thoroughly updated to reflect these new capabilities. I have one suggestion to improve the robustness of the variant property parsing.
alexey1312
changed the title
1 participant
Description
Detect RTL (Right-to-Left) icons/images via structured Figma COMPONENT_SET variant property instead of relying solely on description text. The variant property name defaults to
"RTL"and is configurable through PKL config (rtlProperty).Changes
rtlPropertyfield toFrameSource(inherited by all platform entry types)ContainingComponentSettoContainingFramefor variant component name resolutionRTL=On/RTL=Off) with description fallbackcontainingComponentSet.namefor variant components instead of raw variant namertlPropertytoIconsSourceInputandImagesSourceInput— flows through entire pipeline: PKL config → entry → SourceInput → Context → LoaderHow RTL detection works
RTLvariant property → mark as RTL, skipRTL=OnvariantsrtlProperty = nullin PKL config to disable variant-based detection🤖 Generated with Claude Code