Figma offers a variety of powerful features to streamline the design process, and derivatives are one of its hidden gems. Derivatives allow you to create variations of existing components without the hassle of manually duplicating and editing them. This saves time and ensures consistency across your designs.

What are Derivatives?

In Figma, a derivative is a modified version of a main component. Any changes made to the main component are automatically reflected in its derivatives. However, you can also selectively override specific properties within a derivative for customized versions while still retaining a link to the original.

Why Use Derivatives?

• Efficient Experimentation: Try different button styles, input fields, or icons without manually creating each iteration.
• Maintaining Consistency: Ensure elements throughout your design follow a consistent theme with any updates reflected easily across all instances.
• Easier Collaboration: Shared components and their derivatives create a single source of truth for teams, reducing errors and miscommunication.

How to Use Derivatives in Figma

1. Create a Main Component: Begin by designing the element you want variations of (e.g., button, text box, icon). Right-click and create it as a component.
2. Create a Derivative: In the Assets panel, find your main component. Drag and drop it onto your canvas, or use the shortcut Option/Alt + Cmd/Ctrl + C to create a derivative instance.
3. Customize Properties: Select the derivative and use the right-side panel to make changes that only affect that instance. This may include:
   • Color variations
   • Text overrides
   • Icon changes
   • Resizing and repositioning of elements

Examples of Derivatives in Action

• Button States: Create a main button component with its standard design. Use derivatives to illustrate different states: hover, active, disabled, and variations for primary and secondary buttons.
• Form Elements: Establish a main input field component. Use derivatives to create variants for different types, such as text input, password input, or dropdowns, while maintaining consistent overall styling.
• Navigation Bars: Design a main navigation bar component. Use derivatives to represent active and inactive tab states, while easily updating the overall menu structure if needed.
• Card Layouts: Build a main card component. Use derivatives to create variations showing different image sizes, content lengths, or the presence/absence of specific elements.

Tips and Best Practices

• Naming Conventions: Give your main components and derivatives descriptive names to ensure organization and clarity.
• Nesting Components: For more complex derivatives, consider nesting components within your main component. This adds additional flexibility.
• Using Libraries: For large projects, create a component library to house your main components for team-wide access and consistency.