Pencil: 02 Figma to Pencil Variables using Claude Code

Pencil: 02 Figma to Pencil Variables using Claude Code

Christopher Deane 14.1K subscribers
6.4K views · 2026-02-24 UI Design
Hello everyone, in this episode we’re going to export Semantic Color Variables from Figma and import them into Pencil using Claude Code.

// Chapters:
0:00 Intro
0:11 Export rom Figma - import into VS Code
2:56 Create a new Pencil file
4:07 Tell Claude to convert css to Pencil variables
5:58 Outro

// Links
Official Website: https://www.pencil.dev/
Downloads: https://www.pencil.dev/downloads
Documentation: https://docs.pencil.dev/
Discord Community: https://discord.gg/Azsk8cnnVp
VS Code: https://code.visualstudio.com/download
VS Code Extension: Search "Pencil" or "highagency.pencildev" in VS Code Marketplace

// Download the files used and created in this tutorial:


// For updates. follow me on
Twitter: https://twitter.com/deanemachine

#pencil #figma #ai