Automator Community

Design Systems

  • API

  • Art

  • Design Systems

  • FigJam

  • Icons

  • Illustrations

  • Other

  • Productivity

  • Styles

  • Typography

S
  • Design Systems

  • Generate Color Swatch - HSL, HSB & Hex

    1️⃣ Generate color swatchs from selection of colors. 2️⃣ Update existing colors. 3️⃣ Easily generate HSL, HSB & HEX values from selection. See this all in action: https://twitter.com/SatbirArora/status/1592247743438737408

    Download
    K
  • Design Systems

  • Batch resize icons

    Loop over selected Frames, outputting scaled components at a 1:1 size defined from user input. Great for processing large icon batches. Optional User-defined batch component description. I normally use this to drop the icon library name. *Icons in the demo image are examples created from rebellenoire's icon library https://teenyicons.com/

    Download
    K
  • Design Systems

  • Color Style Export

    Export all selected color styles in the local library into created color chips with named labels and HEX codes.

    Download
    J
  • Design Systems

  • Rename Hex to Color

    Renames selected text layers containing #hex values to the closest color name from thecolorapi.com/

    Download
    J
  • Design Systems

  • Create Documentation for Figma Tokens

    This Automation allows you to read design tokens stored on a document with the Figma Tokens plugin and creates living documentation layers for you. It takes a template layer as a selection, asks you which token set and what token groups you'd like to use. It then creates layers based on this template layer, sets token data in the sharedPluginData space so the Figma Tokens plugin can later on pick those up again. Create template layers that match any token property with two underscores so the plugin will pick it up: __fill __value __tokenName __tokenValue And basically any other property that Figma Tokens supports. For example, if you have "global", "light", "dark" token sets defined in Figma Tokens and you'd want to create a documentation for the "light" set for every token name that starts with "colors", you'd input "light" followed by "colors", have the template layer selected and then run the automation.

    Download
    V
  • Design Systems

  • Create Color Category & Color style

    Creating a Color Style automatically from a frame. 1. Create a frame with your color 2. Name your frame by first letter of the category + # 
(Example: Brand:B, #:1 = B1) 3. Use ‘Create ColorStyle Plugin’ 4. Select the desired color frames 5. Insert in the prompt your category (brand,utility,ect.) You will get a renamed layer with category name / color name & a color style inside of a category. This method works only with the same category names for now

    Download
    J
  • Design Systems

  • Color Styles from Fill Styles

    Create functional styles from existing color styles. Style names based on frame name and parent frame name.

    Download
    A
  • Design Systems

  • Convert to .base and variant components

    The proper way of using .base components is to let it drive a separate variant component*. It usually requires 5 steps; this automation turns it into just one. 💪 * See Ridd's tweet thread for details: https://twitter.com/Ridderingand/status/1487470624318509056

    Download
    J
  • Design Systems

  • Generate style guide

    Generates a style guide using your local styles

    Download
    J
  • Design Systems

  • Layout components

    this automation groups your main components together automatically for you https://twitter.com/jsngr/status/1483469784461283329

    Download

    Automator for Figma

    Automate your Figma tasks in one click.

    Try for free
    Automator
    • Submit automation
    • Discord
    • Help