Pencil: 02 Figma to Pencil Variables using Claude Code
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
// 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