add web - #12
Merged
Merged
Conversation
Proposal to extend ExFig with native Web/React support: - CSS variables and TypeScript constants for colors - React TSX components via SVGR pattern for icons - Raw SVG/PNG asset export with barrel index files - New WebExport module following FlutterExport patterns
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds comprehensive support for exporting Figma assets to Web (React/TypeScript) projects in addition to the existing platforms (iOS, Android, Flutter). It introduces a new
WebExportmodule, updates configuration and documentation to support web-specific options, and implements the necessary data structures and logic for handling web exports, including multiple configuration formats for colors, icons, and images.The most important changes are:
Web Export Platform Support:
Added "Web" as a supported export platform throughout the project, including in the CLI, configuration files, and documentation. This includes updating descriptions, command options, and platform lists. [1] [2] [3] [4] [5] [6]
Introduced a new
WebExportmodule in the Swift package, with its own target and test target, and included it as a dependency where appropriate. [1] [2] [3]Configuration and Data Structures:
Extended the configuration schema (
.claude/EXFIG.toon,CONFIG.md) to support web-specific export options, including new sections for web templates and parameters for colors, icons, and images. Added support for both single-object (legacy) and array (multi-source) formats for web configuration. [1] [2] [3] [4] [5]Added a new
Params.Webstruct and related types (Colors,Icons,Images, and their corresponding entry/configuration enums) toSources/ExFig/Input/Params.swiftto represent and decode all web export configuration options, supporting both single and multiple entries for each asset type.Loaders and Processing Logic:
Updated the
IconsLoaderConfigandIconsLoaderlogic to support web exports, including a newforWebfactory method and adjustments to format handling for the web platform. [1] [2]Updated image name parsing logic to correctly handle the web platform in addition to existing platforms.
Testing:
WebExportTeststest target and updated the test targets list in both the package manifest and the meta/config files to ensure web export functionality is covered by automated tests. [1] [2]Documentation:
CONFIG.md,README.md) to describe web export capabilities, configuration options, and usage examples, including support for array formats for colors, icons, and images. [1] [2] [3] [4] [5] [6]These changes collectively enable ExFig to export design assets from Figma directly to modern web codebases, supporting scalable and flexible configuration for real-world design systems.