Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Official Figma skill for writing directly to the Figma canvas through the MCP server and Plugin API.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
wwds-variables--creating.md
1# Working with design systems: Creating Variables23When creating Figma variables, you need to start by understanding the state of the source data.45If the user is asking you to create variables based on values, they likely want you to indicate the structure. Whether or not you use semantic aliasing of primitives will be based on the inputs you are given about the source data.67If you are given code inputs (JSON, CSS, etc) your goal should be to reflect the existing patterns as closely as possible, but also embrace the design context as distinct from code. For example, casing is less important since you have code syntax that can directly represent the code form. Feel free to take a sentence or capitalized case approach for better readability in Figma.89It is important to understand the underlying structure before you create anything. If there is an implied aliased setup, you want to get that right. You may also need to anticipate modes to know how to split things up. Sizes and Colors likely have different mode requirements in complex systems, so you want to consider that as you create the structure.1011If someone asks you to just make a decision based on best practices, that answer will be relative to the complexity of the environment. A simple theme is a great best practice for simple needs. Similarly, a complex extended collection setup for someone on an enterprise plan might also be best practice.1213Keep in mind that systems might also require you to handle text and effect styles for some of the things specified in token libraries.14