In this video, I walk you through the process of using ChatGPT and Figma to create consistent design effects, with a special focus on color codes and elevation/shadow tokens. You'll learn how to apply global design system guidelines to create tokens with various elevation levels, ensuring a cohesive look for your design projects. This video covers step-by-step instructions on building different shadow types, including inner and outer shadows, commonly used by top brands to bring depth and dimension to design elements.
🔹 Read the full article for more in-depth information on creating effective Elevation design tokens:
- atlassian.design/foundations/elevation
- Basic CHATGPT -
1. Shadow Offset: Determines the distance of the shadow from the object, often calculated as a small fraction of the object's size (e.g., 5% of the object's width and height).
2. Shadow Blur: Defines the blurriness of the shadow edges, typically set as 10% of the object’s width or height.
3. Shadow Opacity: Controls shadow transparency, where 100% is fully opaque and lower values increase transparency. For instance, 75% opacity provides a balanced shadow effect.
4. Shadow Color: Generally a darker shade of the object’s color or a neutral grey to keep the shadow natural and consistent with the object.
🔹 Try out the prompt for AI-assisted design and make your own design effects in minutes -
[ "I am creating a design system tokens for a brand, focusing on foundational elements, specifically Elevation/Shadow, in the Figma tool. Review the global design system guidelines and create a table that include x, y, blur, spread, color values and usages clearly separated for Inner and Outer shadows. Having different variations like Elevation 1, Elevation 2..... "]
This tutorial is ideal for designers, UI/UX enthusiasts, and Figma users who want to improve their understanding of global design systems and token creation. Whether you're building a brand from scratch or refining an existing one, these techniques will help streamline your workflow and enhance design consistency.