Back to Plugins
Swift Colors

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:&nbsp;</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.&nbsp;</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>

themeiosuicoloriphonexcodecodeexportcolorswift

Plugin Preview

Swift Colors 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

Version1
CreatedFebruary 13, 2022
Last UpdatedFebruary 13, 2022
CategorySoftware development
CreatorEmil Baehr
Stats468 installs, 35 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Editor Types:
    figma