Skip to content
BranchesTags

Repository files navigation

FigmaGen

Travis CIVersionXcodeSwiftLicense

FigmaGen - a command line tool to generate code for UI styles using Figma components.

It can generate:

  • color styles
  • text styles

README на русском языке

Navigation

Installation

CocoaPods

To install FigmaGen using CocoaPods add the following line to your Podfile: 

pod'FigmaGen','~> 1.0.0'

Then run in Terminal:

$ pod install --repo-update

If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:

$ Pods/FigmaGen/figmagen generate

Homebrew

To install FigmaGen using Homebrew run:

$ brew install hhru/tap/FigmaGen

Manually

  • Go to releases page.
  • Download the latest release figmagen-x.y.z.zip
  • Unzip the archive

Important: in this case one should use the relative path to the archive content folder while using generate command:

$ MyFolder/figmagen generate

Usage

To generate the code run in Terminal:

$ figmagen generate

The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.

One can use another configuration file passing its path in --config parameter:

$ figmagen generate --config 'Folder/figmagen.yml'

The generated source code can be customised using Stencil-templates. If the standard templates do not fit your needs then use your own one, passing its path in the configuration.

FigmaGen uses Figma API, thus it needs an internet connection.

Configuration

FigmaGen can be configured using a file in YAML format. This file should contain all the required parameters.

The configuration file structured into several sections:

  • base: base parameters that being used by all the commands (см. Base parameters).
  • colors: color styles generation configuration (см. Color styles).
  • textStyles: text styles generation configuration (см. Text styles).

Base parameters

All the generation commands use the following base parameters:

  • accessToken: access token needed to perform requests to Figma API (see Figma access token).
  • fileKey: identifier of a Figma file that will be used for code generation (see Figma file).

Example:

base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFc
...

If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.

Figma access token

In order to get access to Figma files one have to be authorized via a personal access token. How to obtain a token:

  1. Open Figma account settings.
  2. Press "Create a new personal access token" in "Personal Access Tokens" section.
  3. Input the token description ("FigmaGen", for example).
  4. Copy the token to the clipboard.
  5. Paste the token to accessToken field in the configuration file

Figma file

FigmaGen requests the Figma file by its identifier, that can be copied from the file URL: This URL has the following format:

https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.

Generation settings

For all the commands one should set the following parameters:

  • destinationPath: path to the resulting file.
  • templatePath: path to the Stencil-template. If missing then the default template will be used.
  • includingNodes: array of node identifiers that should be used for code generation. If missing then all the nodes will be used.
  • excludingNodes: array of node identifiers that should be ignored. If missing then all the nodes from includingNodes array will be used.

Color styles

Configuration example

base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFccolors:
destinationPath: Sources/Generated/Colors.swiftincludingNodes:
- 7:24

Usage example:

view.backgroundColor =Colors.carolina

Text styles

Configuration example:

base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFctextStyles:
destinationPath: Sources/Generated/TextStyle.swiftincludingNodes:
- 3:19

Usage example:

label.attributedText ="Hello World".styled(.title1, textColor:Colors.black)

License

FigmaGen is released under the MIT License. (see LICENSE).

About

Command line tool to generate code for styles using the Figma API.

Resources

Readme
MIT license
Activity
Custom properties

Stars

69 stars

Watchers

23 watching

Forks

10 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - hhru/FigmaGen: Command line tool to generate code for styles using the Figma API. · GitHub
Skip to content
BranchesTags
Repository files navigation
FigmaGen
Travis CIVersionXcodeSwiftLicense
FigmaGen - a command line tool to generate code for UI styles using Figma components.
It can generate:
  • color styles
  • text styles
README на русском языке
Navigation
Installation
CocoaPods
To install FigmaGen using CocoaPods add the following line to your Podfile: 
pod'FigmaGen','~> 1.0.0'
Then run in Terminal:
$ pod install --repo-update
If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:
$ Pods/FigmaGen/figmagen generate
Homebrew
To install FigmaGen using Homebrew run:
$ brew install hhru/tap/FigmaGen
Manually
  • Go to releases page.
  • Download the latest release figmagen-x.y.z.zip
  • Unzip the archive
Important: in this case one should use the relative path to the archive content folder while using generate command:
$ MyFolder/figmagen generate
Usage
To generate the code run in Terminal:
$ figmagen generate
The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.
One can use another configuration file passing its path in --config parameter:
$ figmagen generate --config 'Folder/figmagen.yml'
The generated source code can be customised using Stencil-templates.
If the standard templates do not fit your needs then use your own one, passing its path in the configuration.
FigmaGen uses Figma API, thus it needs an internet connection.
Configuration
FigmaGen can be configured using a file in YAML format.
This file should contain all the required parameters.
The configuration file structured into several sections:
  • base: base parameters that being used by all the commands (см. Base parameters).
  • colors: color styles generation configuration (см. Color styles).
  • textStyles: text styles generation configuration (см. Text styles).
Base parameters
All the generation commands use the following base parameters:
  • accessToken: access token needed to perform requests to Figma API
(see Figma access token).
  • fileKey: identifier of a Figma file that will be used for code generation
(see Figma file).
Example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFc
...
If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.
Figma access token
In order to get access to Figma files one have to be authorized via a personal access token.
How to obtain a token:
  1. Open Figma account settings.
  2. Press "Create a new personal access token" in "Personal Access Tokens" section.
  3. Input the token description ("FigmaGen", for example).
  4. Copy the token to the clipboard.
  5. Paste the token to accessToken field in the configuration file
Figma file
FigmaGen requests the Figma file by its identifier, that can be copied from the file URL:
This URL has the following format:
https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.
Generation settings
For all the commands one should set the following parameters:
  • destinationPath: path to the resulting file.
  • templatePath: path to the Stencil-template.
If missing then the default template will be used.
  • includingNodes: array of node identifiers that should be used for code generation.
If missing then all the nodes will be used.
  • excludingNodes: array of node identifiers that should be ignored.
If missing then all the nodes from includingNodes array will be used.
Color styles
Configuration example
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFccolors:
destinationPath: Sources/Generated/Colors.swiftincludingNodes:
- 7:24
Usage example:
view.backgroundColor =Colors.carolina
Text styles
Configuration example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFctextStyles:
destinationPath: Sources/Generated/TextStyle.swiftincludingNodes:
- 3:19
Usage example:
label.attributedText ="Hello World".styled(.title1, textColor:Colors.black)
License
FigmaGen is released under the MIT License. (see LICENSE).
About
Command line tool to generate code for styles using the Figma API.
Resources
Readme
MIT license
Activity
Custom properties
Stars
69 stars
Watchers
23 watching
Forks
10 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - hhru/FigmaGen: Command line tool to generate code for styles using the Figma API. · GitHub
Skip to content
BranchesTags
Repository files navigation
FigmaGen
Travis CIVersionXcodeSwiftLicense
FigmaGen - a command line tool to generate code for UI styles using Figma components.
It can generate:
  • color styles
  • text styles
README на русском языке
Navigation
Installation
CocoaPods
To install FigmaGen using CocoaPods add the following line to your Podfile: 
pod'FigmaGen','~> 1.0.0'
Then run in Terminal:
$ pod install --repo-update
If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:
$ Pods/FigmaGen/figmagen generate
Homebrew
To install FigmaGen using Homebrew run:
$ brew install hhru/tap/FigmaGen
Manually
  • Go to releases page.
  • Download the latest release figmagen-x.y.z.zip
  • Unzip the archive
Important: in this case one should use the relative path to the archive content folder while using generate command:
$ MyFolder/figmagen generate
Usage
To generate the code run in Terminal:
$ figmagen generate
The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.
One can use another configuration file passing its path in --config parameter:
$ figmagen generate --config 'Folder/figmagen.yml'
The generated source code can be customised using Stencil-templates.
If the standard templates do not fit your needs then use your own one, passing its path in the configuration.
FigmaGen uses Figma API, thus it needs an internet connection.
Configuration
FigmaGen can be configured using a file in YAML format.
This file should contain all the required parameters.
The configuration file structured into several sections:
  • base: base parameters that being used by all the commands (см. Base parameters).
  • colors: color styles generation configuration (см. Color styles).
  • textStyles: text styles generation configuration (см. Text styles).
Base parameters
All the generation commands use the following base parameters:
  • accessToken: access token needed to perform requests to Figma API
(see Figma access token).
  • fileKey: identifier of a Figma file that will be used for code generation
(see Figma file).
Example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFc
...
If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.
Figma access token
In order to get access to Figma files one have to be authorized via a personal access token.
How to obtain a token:
  1. Open Figma account settings.
  2. Press "Create a new personal access token" in "Personal Access Tokens" section.
  3. Input the token description ("FigmaGen", for example).
  4. Copy the token to the clipboard.
  5. Paste the token to accessToken field in the configuration file
Figma file
FigmaGen requests the Figma file by its identifier, that can be copied from the file URL:
This URL has the following format:
https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.
Generation settings
For all the commands one should set the following parameters:
  • destinationPath: path to the resulting file.
  • templatePath: path to the Stencil-template.
If missing then the default template will be used.
  • includingNodes: array of node identifiers that should be used for code generation.
If missing then all the nodes will be used.
  • excludingNodes: array of node identifiers that should be ignored.
If missing then all the nodes from includingNodes array will be used.
Color styles
Configuration example
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFccolors:
destinationPath: Sources/Generated/Colors.swiftincludingNodes:
- 7:24
Usage example:
view.backgroundColor =Colors.carolina
Text styles
Configuration example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFctextStyles:
destinationPath: Sources/Generated/TextStyle.swiftincludingNodes:
- 3:19
Usage example:
label.attributedText ="Hello World".styled(.title1, textColor:Colors.black)
License
FigmaGen is released under the MIT License. (see LICENSE).
About
Command line tool to generate code for styles using the Figma API.
Resources
Readme
MIT license
Activity
Custom properties
Stars
69 stars
Watchers
23 watching
Forks
10 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - hhru/FigmaGen: Command line tool to generate code for styles using the Figma API. · GitHub
Skip to content
BranchesTags
Repository files navigation
FigmaGen
Travis CIVersionXcodeSwiftLicense
FigmaGen - a command line tool to generate code for UI styles using Figma components.
It can generate:
  • color styles
  • text styles
README на русском языке
Navigation
Installation
CocoaPods
To install FigmaGen using CocoaPods add the following line to your Podfile: 
pod'FigmaGen','~> 1.0.0'
Then run in Terminal:
$ pod install --repo-update
If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:
$ Pods/FigmaGen/figmagen generate
Homebrew
To install FigmaGen using Homebrew run:
$ brew install hhru/tap/FigmaGen
Manually
  • Go to releases page.
  • Download the latest release figmagen-x.y.z.zip
  • Unzip the archive
Important: in this case one should use the relative path to the archive content folder while using generate command:
$ MyFolder/figmagen generate
Usage
To generate the code run in Terminal:
$ figmagen generate
The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.
One can use another configuration file passing its path in --config parameter:
$ figmagen generate --config 'Folder/figmagen.yml'
The generated source code can be customised using Stencil-templates.
If the standard templates do not fit your needs then use your own one, passing its path in the configuration.
FigmaGen uses Figma API, thus it needs an internet connection.
Configuration
FigmaGen can be configured using a file in YAML format.
This file should contain all the required parameters.
The configuration file structured into several sections:
  • base: base parameters that being used by all the commands (см. Base parameters).
  • colors: color styles generation configuration (см. Color styles).
  • textStyles: text styles generation configuration (см. Text styles).
Base parameters
All the generation commands use the following base parameters:
  • accessToken: access token needed to perform requests to Figma API
(see Figma access token).
  • fileKey: identifier of a Figma file that will be used for code generation
(see Figma file).
Example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFc
...
If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.
Figma access token
In order to get access to Figma files one have to be authorized via a personal access token.
How to obtain a token:
  1. Open Figma account settings.
  2. Press "Create a new personal access token" in "Personal Access Tokens" section.
  3. Input the token description ("FigmaGen", for example).
  4. Copy the token to the clipboard.
  5. Paste the token to accessToken field in the configuration file
Figma file
FigmaGen requests the Figma file by its identifier, that can be copied from the file URL:
This URL has the following format:
https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.
Generation settings
For all the commands one should set the following parameters:
  • destinationPath: path to the resulting file.
  • templatePath: path to the Stencil-template.
If missing then the default template will be used.
  • includingNodes: array of node identifiers that should be used for code generation.
If missing then all the nodes will be used.
  • excludingNodes: array of node identifiers that should be ignored.
If missing then all the nodes from includingNodes array will be used.
Color styles
Configuration example
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFccolors:
destinationPath: Sources/Generated/Colors.swiftincludingNodes:
- 7:24
Usage example:
view.backgroundColor =Colors.carolina
Text styles
Configuration example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFctextStyles:
destinationPath: Sources/Generated/TextStyle.swiftincludingNodes:
- 3:19
Usage example:
label.attributedText ="Hello World".styled(.title1, textColor:Colors.black)
License
FigmaGen is released under the MIT License. (see LICENSE).
About
Command line tool to generate code for styles using the Figma API.
Resources
Readme
MIT license
Activity
Custom properties
Stars
69 stars
Watchers
23 watching
Forks
10 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - hhru/FigmaGen: Command line tool to generate code for styles using the Figma API. · GitHub
Skip to content
BranchesTags
Repository files navigation
FigmaGen
Travis CIVersionXcodeSwiftLicense
FigmaGen - a command line tool to generate code for UI styles using Figma components.
It can generate:
  • color styles
  • text styles
README на русском языке
Navigation
Installation
CocoaPods
To install FigmaGen using CocoaPods add the following line to your Podfile: 
pod'FigmaGen','~> 1.0.0'
Then run in Terminal:
$ pod install --repo-update
If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:
$ Pods/FigmaGen/figmagen generate
Homebrew
To install FigmaGen using Homebrew run:
$ brew install hhru/tap/FigmaGen
Manually
  • Go to releases page.
  • Download the latest release figmagen-x.y.z.zip
  • Unzip the archive
Important: in this case one should use the relative path to the archive content folder while using generate command:
$ MyFolder/figmagen generate
Usage
To generate the code run in Terminal:
$ figmagen generate
The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.
One can use another configuration file passing its path in --config parameter:
$ figmagen generate --config 'Folder/figmagen.yml'
The generated source code can be customised using Stencil-templates.
If the standard templates do not fit your needs then use your own one, passing its path in the configuration.
FigmaGen uses Figma API, thus it needs an internet connection.
Configuration
FigmaGen can be configured using a file in YAML format.
This file should contain all the required parameters.
The configuration file structured into several sections:
  • base: base parameters that being used by all the commands (см. Base parameters).
  • colors: color styles generation configuration (см. Color styles).
  • textStyles: text styles generation configuration (см. Text styles).
Base parameters
All the generation commands use the following base parameters:
  • accessToken: access token needed to perform requests to Figma API
(see Figma access token).
  • fileKey: identifier of a Figma file that will be used for code generation
(see Figma file).
Example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFc
...
If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.
Figma access token
In order to get access to Figma files one have to be authorized via a personal access token.
How to obtain a token:
  1. Open Figma account settings.
  2. Press "Create a new personal access token" in "Personal Access Tokens" section.
  3. Input the token description ("FigmaGen", for example).
  4. Copy the token to the clipboard.
  5. Paste the token to accessToken field in the configuration file
Figma file
FigmaGen requests the Figma file by its identifier, that can be copied from the file URL:
This URL has the following format:
https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.
Generation settings
For all the commands one should set the following parameters:
  • destinationPath: path to the resulting file.
  • templatePath: path to the Stencil-template.
If missing then the default template will be used.
  • includingNodes: array of node identifiers that should be used for code generation.
If missing then all the nodes will be used.
  • excludingNodes: array of node identifiers that should be ignored.
If missing then all the nodes from includingNodes array will be used.
Color styles
Configuration example
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFccolors:
destinationPath: Sources/Generated/Colors.swiftincludingNodes:
- 7:24
Usage example:
view.backgroundColor =Colors.carolina
Text styles
Configuration example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFctextStyles:
destinationPath: Sources/Generated/TextStyle.swiftincludingNodes:
- 3:19
Usage example:
label.attributedText ="Hello World".styled(.title1, textColor:Colors.black)
License
FigmaGen is released under the MIT License. (see LICENSE).
About
Command line tool to generate code for styles using the Figma API.
Resources
Readme
MIT license
Activity
Custom properties
Stars
69 stars
Watchers
23 watching
Forks
10 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - hhru/FigmaGen: Command line tool to generate code for styles using the Figma API. · GitHub
Skip to content
BranchesTags
Repository files navigation
FigmaGen
Travis CIVersionXcodeSwiftLicense
FigmaGen - a command line tool to generate code for UI styles using Figma components.
It can generate:
  • color styles
  • text styles
README на русском языке
Navigation
Installation
CocoaPods
To install FigmaGen using CocoaPods add the following line to your Podfile: 
pod'FigmaGen','~> 1.0.0'
Then run in Terminal:
$ pod install --repo-update
If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:
$ Pods/FigmaGen/figmagen generate
Homebrew
To install FigmaGen using Homebrew run:
$ brew install hhru/tap/FigmaGen
Manually
  • Go to releases page.
  • Download the latest release figmagen-x.y.z.zip
  • Unzip the archive
Important: in this case one should use the relative path to the archive content folder while using generate command:
$ MyFolder/figmagen generate
Usage
To generate the code run in Terminal:
$ figmagen generate
The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.
One can use another configuration file passing its path in --config parameter:
$ figmagen generate --config 'Folder/figmagen.yml'
The generated source code can be customised using Stencil-templates.
If the standard templates do not fit your needs then use your own one, passing its path in the configuration.
FigmaGen uses Figma API, thus it needs an internet connection.
Configuration
FigmaGen can be configured using a file in YAML format.
This file should contain all the required parameters.
The configuration file structured into several sections:
  • base: base parameters that being used by all the commands (см. Base parameters).
  • colors: color styles generation configuration (см. Color styles).
  • textStyles: text styles generation configuration (см. Text styles).
Base parameters
All the generation commands use the following base parameters:
  • accessToken: access token needed to perform requests to Figma API
(see Figma access token).
  • fileKey: identifier of a Figma file that will be used for code generation
(see Figma file).
Example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFc
...
If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.
Figma access token
In order to get access to Figma files one have to be authorized via a personal access token.
How to obtain a token:
  1. Open Figma account settings.
  2. Press "Create a new personal access token" in "Personal Access Tokens" section.
  3. Input the token description ("FigmaGen", for example).
  4. Copy the token to the clipboard.
  5. Paste the token to accessToken field in the configuration file
Figma file
FigmaGen requests the Figma file by its identifier, that can be copied from the file URL:
This URL has the following format:
https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.
Generation settings
For all the commands one should set the following parameters:
  • destinationPath: path to the resulting file.
  • templatePath: path to the Stencil-template.
If missing then the default template will be used.
  • includingNodes: array of node identifiers that should be used for code generation.
If missing then all the nodes will be used.
  • excludingNodes: array of node identifiers that should be ignored.
If missing then all the nodes from includingNodes array will be used.
Color styles
Configuration example
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFccolors:
destinationPath: Sources/Generated/Colors.swiftincludingNodes:
- 7:24
Usage example:
view.backgroundColor =Colors.carolina
Text styles
Configuration example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFctextStyles:
destinationPath: Sources/Generated/TextStyle.swiftincludingNodes:
- 3:19
Usage example:
label.attributedText ="Hello World".styled(.title1, textColor:Colors.black)
License
FigmaGen is released under the MIT License. (see LICENSE).
About
Command line tool to generate code for styles using the Figma API.
Resources
Readme
MIT license
Activity
Custom properties
Stars
69 stars
Watchers
23 watching
Forks
10 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - hhru/FigmaGen: Command line tool to generate code for styles using the Figma API. · GitHub
Skip to content
BranchesTags
Repository files navigation
FigmaGen
Travis CIVersionXcodeSwiftLicense
FigmaGen - a command line tool to generate code for UI styles using Figma components.
It can generate:
  • color styles
  • text styles
README на русском языке
Navigation
Installation
CocoaPods
To install FigmaGen using CocoaPods add the following line to your Podfile: 
pod'FigmaGen','~> 1.0.0'
Then run in Terminal:
$ pod install --repo-update
If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:
$ Pods/FigmaGen/figmagen generate
Homebrew
To install FigmaGen using Homebrew run:
$ brew install hhru/tap/FigmaGen
Manually
  • Go to releases page.
  • Download the latest release figmagen-x.y.z.zip
  • Unzip the archive
Important: in this case one should use the relative path to the archive content folder while using generate command:
$ MyFolder/figmagen generate
Usage
To generate the code run in Terminal:
$ figmagen generate
The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.
One can use another configuration file passing its path in --config parameter:
$ figmagen generate --config 'Folder/figmagen.yml'
The generated source code can be customised using Stencil-templates.
If the standard templates do not fit your needs then use your own one, passing its path in the configuration.
FigmaGen uses Figma API, thus it needs an internet connection.
Configuration
FigmaGen can be configured using a file in YAML format.
This file should contain all the required parameters.
The configuration file structured into several sections:
  • base: base parameters that being used by all the commands (см. Base parameters).
  • colors: color styles generation configuration (см. Color styles).
  • textStyles: text styles generation configuration (см. Text styles).
Base parameters
All the generation commands use the following base parameters:
  • accessToken: access token needed to perform requests to Figma API
(see Figma access token).
  • fileKey: identifier of a Figma file that will be used for code generation
(see Figma file).
Example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFc
...
If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.
Figma access token
In order to get access to Figma files one have to be authorized via a personal access token.
How to obtain a token:
  1. Open Figma account settings.
  2. Press "Create a new personal access token" in "Personal Access Tokens" section.
  3. Input the token description ("FigmaGen", for example).
  4. Copy the token to the clipboard.
  5. Paste the token to accessToken field in the configuration file
Figma file
FigmaGen requests the Figma file by its identifier, that can be copied from the file URL:
This URL has the following format:
https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.
Generation settings
For all the commands one should set the following parameters:
  • destinationPath: path to the resulting file.
  • templatePath: path to the Stencil-template.
If missing then the default template will be used.
  • includingNodes: array of node identifiers that should be used for code generation.
If missing then all the nodes will be used.
  • excludingNodes: array of node identifiers that should be ignored.
If missing then all the nodes from includingNodes array will be used.
Color styles
Configuration example
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFccolors:
destinationPath: Sources/Generated/Colors.swiftincludingNodes:
- 7:24
Usage example:
view.backgroundColor =Colors.carolina
Text styles
Configuration example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFctextStyles:
destinationPath: Sources/Generated/TextStyle.swiftincludingNodes:
- 3:19
Usage example:
label.attributedText ="Hello World".styled(.title1, textColor:Colors.black)
License
FigmaGen is released under the MIT License. (see LICENSE).
About
Command line tool to generate code for styles using the Figma API.
Resources
Readme
MIT license
Activity
Custom properties
Stars
69 stars
Watchers
23 watching
Forks
10 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - hhru/FigmaGen: Command line tool to generate code for styles using the Figma API. · GitHub
Skip to content
BranchesTags
Repository files navigation
FigmaGen
Travis CIVersionXcodeSwiftLicense
FigmaGen - a command line tool to generate code for UI styles using Figma components.
It can generate:
  • color styles
  • text styles
README на русском языке
Navigation
Installation
CocoaPods
To install FigmaGen using CocoaPods add the following line to your Podfile: 
pod'FigmaGen','~> 1.0.0'
Then run in Terminal:
$ pod install --repo-update
If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:
$ Pods/FigmaGen/figmagen generate
Homebrew
To install FigmaGen using Homebrew run:
$ brew install hhru/tap/FigmaGen
Manually
  • Go to releases page.
  • Download the latest release figmagen-x.y.z.zip
  • Unzip the archive
Important: in this case one should use the relative path to the archive content folder while using generate command:
$ MyFolder/figmagen generate
Usage
To generate the code run in Terminal:
$ figmagen generate
The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.
One can use another configuration file passing its path in --config parameter:
$ figmagen generate --config 'Folder/figmagen.yml'
The generated source code can be customised using Stencil-templates.
If the standard templates do not fit your needs then use your own one, passing its path in the configuration.
FigmaGen uses Figma API, thus it needs an internet connection.
Configuration
FigmaGen can be configured using a file in YAML format.
This file should contain all the required parameters.
The configuration file structured into several sections:
  • base: base parameters that being used by all the commands (см. Base parameters).
  • colors: color styles generation configuration (см. Color styles).
  • textStyles: text styles generation configuration (см. Text styles).
Base parameters
All the generation commands use the following base parameters:
  • accessToken: access token needed to perform requests to Figma API
(see Figma access token).
  • fileKey: identifier of a Figma file that will be used for code generation
(see Figma file).
Example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFc
...
If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.
Figma access token
In order to get access to Figma files one have to be authorized via a personal access token.
How to obtain a token:
  1. Open Figma account settings.
  2. Press "Create a new personal access token" in "Personal Access Tokens" section.
  3. Input the token description ("FigmaGen", for example).
  4. Copy the token to the clipboard.
  5. Paste the token to accessToken field in the configuration file
Figma file
FigmaGen requests the Figma file by its identifier, that can be copied from the file URL:
This URL has the following format:
https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.
Generation settings
For all the commands one should set the following parameters:
  • destinationPath: path to the resulting file.
  • templatePath: path to the Stencil-template.
If missing then the default template will be used.
  • includingNodes: array of node identifiers that should be used for code generation.
If missing then all the nodes will be used.
  • excludingNodes: array of node identifiers that should be ignored.
If missing then all the nodes from includingNodes array will be used.
Color styles
Configuration example
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFccolors:
destinationPath: Sources/Generated/Colors.swiftincludingNodes:
- 7:24
Usage example:
view.backgroundColor =Colors.carolina
Text styles
Configuration example:
base:
accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868fileKey: ZvsRf99Ik11qS4PjS6MAFctextStyles:
destinationPath: Sources/Generated/TextStyle.swiftincludingNodes:
- 3:19
Usage example:
label.attributedText ="Hello World".styled(.title1, textColor:Colors.black)
License
FigmaGen is released under the MIT License. (see LICENSE).
About
Command line tool to generate code for styles using the Figma API.
Resources
Readme
MIT license
Activity
Custom properties
Stars
69 stars
Watchers
23 watching
Forks
10 forks
Report repository
Releases
Packages
Used by
Contributors
Languages