component-design

2 posts

figma

7 Tips for Using Figma Make Credits More Efficiently | Figma Blog (opens in new tab)

Figma argues that efficient AI prototyping is less about writing longer prompts and more about setting up projects carefully, limiting changes, and knowing when to edit manually. The first prompt should establish a strong foundation, while follow-ups should describe precise deltas. For minor visual or code changes, direct editing is often faster and cheaper than another AI request. ## Build a Strong First Prompt - Treat the initial prompt as a complete project brief. - Include: - The project goal and context - Key elements and behaviors - Constraints and exclusions - A clear definition of what “done” means - Use follow-up prompts as deltas that explain: - What should change - How it should change - What should remain unchanged - For larger projects, work in stages: - Establish the structure first - Add logic and behaviors - Refine content and visual polish afterward - Keep follow-ups tightly scoped. Combine requests only when they affect the same component or logic. - Specific instructions such as “Update the calendar component” or “Edit `tokens.ts`” are more efficient than vague requests like “Redo it.” ## Prefer Manual Edits for Small Changes - Use Figma Make’s **Edit tool** for minor adjustments such as: - Changing spacing - Removing an element - Adjusting text - Direct edits avoid spending credits on changes that do not require a new design solution. - Use **Go to source** when the relevant value is dynamic or unavailable in the preview. - Press **⌘F** to search the code for a specific tag or data source. - Start with `App.tsx`, then inspect other `.tsx` files in the component folder if necessary. - Direct source editing is particularly useful for repeated components or content populated from lists.

figma

Building a Design System That Breathes with Headspace | Figma Blog (opens in new tab)

Headspace rebuilt its design system to support rapid growth, multiple brands, and products spanning apps, wearables, and VR. Its previous system relied on hard-coded colors, manual processes, and plugins, making updates slow and creating inconsistencies. By adopting design tokens and Figma variables, Headspace created a scalable source of truth for designers and engineers that could evolve with the business. ## Challenges of the Previous System - Headspace served more than 100 million members across numerous products and partnerships. - The existing design system was manual and heavily dependent on plugins. - Hard-coded color values produced multiple hex-code variations and inconsistent experiences. - Even small palette changes could take the design systems team hours or days. - Plugins often required specialized knowledge, frequent resets, and workflows that were not intuitive for occasional users. - The system was designed for a single brand, creating problems when Headspace merged with Ginger, later rebranded as Headspace Care. ## Preparing for Multiple Brands and Future Growth - Senior product designer Steven Sczepanik audited the existing system after the merger announcement. - He rebuilt components and patterns so they were easier for designers and engineers to find and use. - The redesign established Headspace’s first formal token system. - Tokens created a shared language for foundational properties such as colors and typography. - The system was designed to support Headspace Care and future partnerships without requiring separate, disconnected systems. ## Replacing Plugins with Figma Variables - Headspace converted its color tokens and typography into Figma variables. - Variables replaced many plugin-based workflows with a native Figma solution. - Steven implemented the initial color and typography variables in about a day, compared with two years spent developing the broader previous system. - The new approach made theme changes and system-wide updates faster and more reliable. - Designers and engineers gained a more dependable source of truth for shared design decisions. ## A Design System That Can Evolve - Headspace’s design system now supports a growing ecosystem of brands, platforms, and experiences. - Centralized tokens reduce duplication and improve consistency across products. - Native variables make the system easier to maintain as the visual identity changes. - The work demonstrates that scalable design systems must accommodate organizational change, not just reuse components. Headspace’s experience suggests that teams preparing for growth should replace hard-coded values and fragile plugin workflows with structured tokens and native variables. This creates a more flexible foundation for consistent design across brands, products, and future expansion.