Name: Theming And Styles
Author: fabioeducacross

Theming & Styles

1. Enabling Theme Support

figma.showUI(__html__, { themeColors: true });

This injects into the UI iframe:

A figma-light or figma-dark class on <html>
A <style id="figma-style"> with CSS variables

2. Basic CSS Setup

body {
  background-color: var(--figma-color-bg);
  color: var(--figma-color-text);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  margin: 0;
  padding: 8px;
}

button {
  background: var(--figma-color-bg-brand);
  color: var(--figma-color-text-onbrand);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 11px;
}

Theming And Styles

Theming & Styles

1. Enabling Theme Support

2. Basic CSS Setup

Theming And Styles

Theming & Styles

1. Enabling Theme Support

2. Basic CSS Setup

Coding Agent (bash-first)

Install Vscode Extension

Launch

Agent Customization

Init

Launch