From e82ba01731d010b412e76ae302e296eb1287a531 Mon Sep 17 00:00:00 2001 From: Rafal Sroka Date: Fri, 16 May 2025 16:16:34 +0200 Subject: [PATCH 1/3] Improve error description and include more troubleshooting information --- Sources/FigmaAPI/Model/FigmaClientError.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sources/FigmaAPI/Model/FigmaClientError.swift b/Sources/FigmaAPI/Model/FigmaClientError.swift index f39eccdb..ab7d12c9 100644 --- a/Sources/FigmaAPI/Model/FigmaClientError.swift +++ b/Sources/FigmaAPI/Model/FigmaClientError.swift @@ -7,7 +7,7 @@ struct FigmaClientError: Decodable, LocalizedError { var errorDescription: String? { switch err { case "Not found": - return "Figma file not found. Check lightFileId and darkFileId (if you project supports dark mode) in the yaml config file." + return "Figma file not found. Check lightFileId and darkFileId (if your project supports dark mode) in the yaml config file. Also verify that your personal access token is valid and hasn't expired." default: return "Figma API: \(err)" } From 7c0d76230f3d6089f7eaa2208afd225e1672d5d8 Mon Sep 17 00:00:00 2001 From: Rafal Sroka Date: Fri, 16 May 2025 16:16:58 +0200 Subject: [PATCH 2/3] Fix typos --- Examples/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Examples/README.md b/Examples/README.md index a6ed8cc1..a7886272 100644 --- a/Examples/README.md +++ b/Examples/README.md @@ -12,7 +12,7 @@ The UI-Kit of the example project in Figma: ### Example iOS project -There are 2 example iOS projects in `Example` and `ExampleSwiftUI` directories which demostrates how to use figma-export with UIKit and SwiftUI. +There are 2 example iOS projects in `Example` and `ExampleSwiftUI` directories which demonstrates how to use figma-export with UIKit and SwiftUI. @@ -20,8 +20,8 @@ There are 2 example iOS projects in `Example` and `ExampleSwiftUI` directories w 1. Open `Example/fastlane/.env` file. 2. Change FIGMA_PERSONAL_TOKEN to your personal Figma token. 3. Go to `Example` folder. -4. Run the following command in Termanal to install cocoapods and fastlane: `bundle install` -5. Run the following command in Termanal to install figma-export: `bundle exec pod install` +4. Run the following command in Terminal to install CocoaPods and Fastlane: `bundle install` +5. Run the following command in Terminal to install figma-export: `bundle exec pod install` **How to export resources from figma** * To export colors run: `bundle exec fastlane export_colors` @@ -39,7 +39,7 @@ There is an example Android Studio project in `AndroidExample` directory which d ### Example Android Jetpack Compose project -There is an example Android Studio project in `AndroidComposeExample` directory which demostrates how to use `figma-export` configured for Jetpack Compose. +There is an example Android Studio project in `AndroidComposeExample` directory which demonstrates how to use `figma-export` configured for Jetpack Compose. You can find the generated code for compose in the package `com.redmadrobot.androidcomposeexample.ui.figmaexport` From 384f6013437c4d44683555cd448baca5bb2021b2 Mon Sep 17 00:00:00 2001 From: Rafal Sroka Date: Fri, 16 May 2025 16:37:53 +0200 Subject: [PATCH 3/3] Update readme --- README.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 326f90a4..f4e1527c 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,6 @@ Additionally, the following Swift file will be created to use colors from the co static var backgroundVideo: UIColor { return UIColor(named: #function)! } ... } - ``` For SwiftUI the following Swift file will be created to use colors from the code. @@ -99,7 +98,6 @@ For SwiftUI the following Swift file will be created to use colors from the code static var backgroundVideo: Color { return Color(#function) } ... } - ``` If you set option `useColorAssets: False` in the configuration file, then will be generated code like this: @@ -221,6 +219,7 @@ Example of these files: Colors will be exported to `values/colors.xml` and `values-night/colors.xml` files. For Jetpack Compose, following code will be generated, if configured: + ```kotlin package com.redmadrobot.androidcomposeexample.ui.figmaexport @@ -234,6 +233,7 @@ fun Colors.backgroundPrimary(): Color = colorResource(id = R.color.background_pr ``` Icons will be exported to `drawable` directory as vector xml files. For Jetpack Compose, following code will be generated, if configured: + ```kotlin package com.redmadrobot.androidcomposeexample.ui.figmaexport @@ -260,6 +260,7 @@ Vector images will be exported to `drawable` and `drawable-night` directories as Raster images will be exported to `drawable-???dpi` and `drawable-night-???dpi` directories as `png` or `webp` files. Typography will be exported to `values/typography.xml`. For Jetpack Compose, following code will be generated, if configured: + ```kotlin package com.redmadrobot.androidcomposeexample.ui.figmaexport @@ -290,16 +291,20 @@ object Typography { [Download](https://github.com/RedMadRobot/figma-export/releases) the latest release and read [Usage](#usage) ### Homebrew -``` + +```bash brew install RedMadRobot/formulae/figma-export ``` + If you want to export raster images in WebP format install [cwebp](https://developers.google.com/speed/webp/docs/using) command line utility. -``` + +```bash brew install webp ``` ### CocoaPods + Fastlane Add the following line to your Podfile: + ```ruby pod 'FigmaExport' ``` @@ -308,6 +313,7 @@ This will download the FigmaExport binaries and dependencies in `Pods/` during y `pod install` execution and will allow you to invoke it via `Pods/FigmaExport/Release/figma-export` in your Fastfile. Add the following line to your Fastfile: + ```ruby lane :sync_colors do Dir.chdir("../") do @@ -321,6 +327,7 @@ Don't forget to place figma-export.yaml file at the root of the project director Run `fastlane sync_colors` to run FigmaExport. ## Usage + 1. Open `Terminal.app` 2. Go (cd) to the folder with `figma-export` binary file 3. Run `figma-export` @@ -413,7 +420,8 @@ Example of `figma-export.yaml` file for iOS project — [Examples/Example/figma- Example of `figma-export.yaml` file for Android project — [Examples/AndroidExample/figma-export.yaml](./Examples/AndroidExample/figma-export.yaml) Generate `figma-export.yaml` config file using one of the following command: -``` + +```bash figma-export init --platform android figma-export init --platform ios ```