Skew Objects

About this plugin

Description

Skew Objects provides precise control over horizontal and vertical skewing of Figma objects through an easy-to-use interface. The plugin applies real-time transformations using transform matrices, allowing you to preview changes instantly before committing them to your design.

Key Features

1. Real-time Preview: See skew transformations applied instantly as you adjust values
2. Dual-axis Control: Independent horizontal (X) and vertical (Y) skew adjustments
3. Precise Input: Use sliders for quick adjustments or number inputs for exact values
4. Range: Skew angles from -45° to +45° with 0.1° precision
5. Quick Reset: Individual reset buttons for each axis
6. Non-destructive: Cancel to revert all changes before applying
7. Multi-selection Support: Apply skew to multiple objects simultaneously

ㅤ

ㅤ

User Guide

Getting Started

1. Select Objects: Select one or more objects in your Figma canvas that you want to skew
2. Launch Plugin: Go to Plugins → Skew Objects (or use the keyboard shortcut if configured)
3. Adjust Skew: Use the controls to apply your desired skew transformation
4. Apply or Cancel: Click OK to apply changes or Cancel to revert

Interface Controls

Horizontal Skew (X-axis)

1. Slider: Drag to adjust horizontal skew from -45° to +45°
2. Number Input: Type exact values for precise control
3. Reset Button (✕): Click to reset horizontal skew to 0°
4. Right-click: Right-click on slider or input to quickly reset to 0°

Vertical Skew (Y-axis)

1. Slider: Drag to adjust vertical skew from -45° to +45°
2. Number Input: Type exact values for precise control
3. Reset Button (✕): Click to reset vertical skew to 0°
4. Right-click: Right-click on slider or input to quickly reset to 0°

ㅤ

ㅤ

Step-by-Step Usage

Basic Skew Application

1. Select the object(s) you want to skew
2. Run the plugin
3. Adjust the Horizontal Skew slider to skew along the X-axis
4. Positive values skew right
5. Negative values skew left
6. Adjust the Vertical Skew slider to skew along the Y-axis
7. Positive values skew upward
8. Negative values skew downward
9. Click OK to apply the transformation

Creating Perspective Effects

1. Select a rectangle or text object
2. Run the plugin
3. Set Horizontal Skew to around 15-20° for a right-leaning perspective
4. Optionally add slight Vertical Skew (5-10°) for depth
5. Click OK to apply

Isometric Design

1. Select your object
2. Run the plugin
3. For isometric left face: Set Horizontal Skew to -30°
4. For isometric right face: Set Horizontal Skew to 30°
5. Click OK to apply

Adjusting Existing Skew

1. Select an object that already has skew applied
2. Run the plugin
3. The current skew values will be displayed in the inputs
4. Adjust as needed or reset individual axes
5. Click OK to apply new values

ㅤ

ㅤ

Tips & Tricks

1. Keyboard Input: Click on the number input and use arrow keys for fine adjustments
2. Quick Reset: Right-click on any slider or input to instantly reset that axis to 0°
3. Preview Mode: All changes are previewed in real-time, so experiment freely
4. Cancel Anytime: Click Cancel to revert all changes and return objects to their original state
5. Multiple Objects: Select multiple objects to apply the same skew to all of them at once
6. Combine with Rotation: Use Figma's rotation tools in combination with skew for complex transformations

ㅤ

ㅤ

Common Use Cases

1. Typography Effects: Create dynamic, slanted text designs
2. Isometric Illustrations: Build isometric graphics with precise angles
3. Perspective Mockups: Add depth to UI mockups and presentations
4. Logo Design: Create unique, skewed logo variations
5. Decorative Elements: Design dynamic shapes and patterns
6. 3D-like Effects: Simulate 3D perspectives in 2D designs

ㅤ

ㅤ

Need more design tools? Visit Samolevsky.com to discover more plugins and resources.