Swift Colors
<p>Swift Colors is a simple plugin for exporting color tokens to a Swift color theme.</p><p><br></p><h2><strong>Features</strong></h2><p><br></p><ul><li>Map color tokens in Figma to a type-safe Swift color theme file automatically.</li></ul><p><br></p><ul><li>Define light and dark mode color behaviour directly from Figma, by organising your color tokens in light and dark mode palettes.</li></ul><p><br></p><h2><strong>How to use</strong></h2><p><br></p><p><strong>1. Prepare your file's color tokens</strong></p><p>Organise color styles into a light and dark mode color palette in the Color Styles panel. Figma color styles can be organised in groups by prefixing the color style name with the group name.</p><p><br></p><p><em>For example: </em></p><p><code>"Light Mode/Buttons/Primary"</code></p><p><code>"Dark Mode/Buttons/Primary"</code></p><p><br></p><p>If you don't have a dark mode color palette yet, the plugin will use the light mode palette for dark mode too.</p><p><br></p><p><strong>2. Export</strong></p><p>Export the <code>.swift</code> file to your Xcode project.</p><p><br></p><p><strong>3. Use in Xcode</strong></p><p>Use your color theme by calling the desired color token name in your code. </p><p><br></p><p><em>For example:</em></p><pre class="ql-syntax" spellcheck="false">button.backgroundColor = Buttons.primary </pre><p><br></p><p><strong>4. See it in action!</strong></p><p> If you have defined both a light and dark mode color palette that contains a color style for <code>Buttons.primary</code>, iOS will automatically change between the two variants based on the user's preference.</p><p><br></p><h2><strong>Why it works</strong></h2><p><br></p><p>The exported theme file includes an extension on <code>UIColor</code> that automatically adapts to light and dark mode variants based on the current <code>UITraitCollection</code>.</p>
Plugin Preview
About this plugin
Swift Colors is a simple plugin for exporting color tokens to a Swift color theme.
Features
- Map color tokens in Figma to a type-safe Swift color theme file automatically.
- Define light and dark mode color behaviour directly from Figma, by organising your color tokens in light and dark mode palettes.
How to use
1. Prepare your file's color tokens
Organise color styles into a light and dark mode color palette in the Color Styles panel. Figma color styles can be organised in groups by prefixing the color style name with the group name.
For example:
"Light Mode/Buttons/Primary"
"Dark Mode/Buttons/Primary"
If you don't have a dark mode color palette yet, the plugin will use the light mode palette for dark mode too.
2. Export
Export the .swift
file to your Xcode project.
3. Use in Xcode
Use your color theme by calling the desired color token name in your code.
For example:
button.backgroundColor = Buttons.primary
4. See it in action!
If you have defined both a light and dark mode color palette that contains a color style for Buttons.primary
, iOS will automatically change between the two variants based on the user's preference.
Why it works
The exported theme file includes an extension on UIColor
that automatically adapts to light and dark mode variants based on the current UITraitCollection
.
Plugin Details
Version | 1 |
---|---|
Created | February 13, 2022 |
Last Updated | February 13, 2022 |
Category | Software development |
Creator | Emil Baehr |
Stats | 468 installs, 35 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Editor Types:figma
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI