Skew Objects

Skew Objects

Figma 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

  • Real-time Preview: See skew transformations applied instantly as you adjust values
  • Dual-axis Control: Independent horizontal (X) and vertical (Y) skew adjustments
  • Precise Input: Use sliders for quick adjustments or number inputs for exact values
  • Range: Skew angles from -45° to +45° with 0.1° precision
  • Quick Reset: Individual reset buttons for each axis
  • Non-destructive: Cancel to revert all changes before applying
  • 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

ㅤ

image gallery

ㅤ

➊ Horizontal Skew (X-axis)

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

ㅤ

➋ Vertical Skew (Y-axis)

  • Slider: Drag to adjust vertical skew from -45° to +45°
  • Number Input: Type exact values for precise control
  • Reset Button (✕): Click to reset vertical skew to 0°
  • 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-axisPositive values skew rightNegative values skew left
  4. Adjust the Vertical Skew slider to skew along the Y-axisPositive values skew upwardNegative values skew downward
  5. 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

  • Keyboard Input: Click on the number input and use arrow keys for fine adjustments
  • Quick Reset: Right-click on any slider or input to instantly reset that axis to 0°
  • Preview Mode: All changes are previewed in real-time, so experiment freely
  • Cancel Anytime: Click Cancel to revert all changes and return objects to their original state
  • Multiple Objects: Select multiple objects to apply the same skew to all of them at once

Common Use Cases

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

Leave a comment

Version:

Updated:

  • Supported Versions:

    • Compatible with Adobe Illustrator CS6 and later, including Adobe Illustrator CC versions.

    Operating Systems:

    • Works on both macOS and Windows platforms.

  • End User License Agreement (EULA)

    Last Updated: 21.12.2024

    ㅤ

    This End User License Agreement (“Agreement”) is a legal agreement between you (“User” or “Licensee”) and Samolevsky.com (“Licensor”) regarding the use of the Adobe Illustrator scripts (“Software”). By downloading, installing, or using the Software, you agree to be bound by the terms of this Agreement.

    ㅤ

    1. Grant of License

    Licensor grants the User a non-exclusive, non-transferable, and revocable license to use the Software in accordance with this Agreement.

    • Free Software: If the Software is provided for free, you may use it for personal or commercial purposes without payment, subject to the restrictions outlined in this Agreement.
    • Paid Software: If the Software is provided for a fee, you may use it only after payment has been made in full.

    ㅤ

    2. Usage Rights

    You are permitted to:

    • Install and use the Software on devices you own or control.
    • Use the Software in your personal or commercial projects, subject to compliance with this Agreement.

    ㅤ

    3. Restrictions

    You may NOT:

    • Reverse engineer, decompile, or otherwise attempt to discover the source code, underlying ideas, or algorithms of the Software.
    • Reuse, incorporate, or integrate any portion of the Software into any other software, product, or project, except as expressly permitted by the Licensor in writing.
    • Resell, redistribute, or share the Software, whether in its original or modified form, without prior written consent from the Licensor.
    • Claim ownership of the Software or its underlying code.
    • Use the Software in any way that violates applicable laws or regulations.

    ㅤ

    4. Ownership

    The Software and all intellectual property rights therein remain the exclusive property of the Licensor. This Agreement does not transfer ownership of the Software or any intellectual property rights to the User.

    ㅤ

    5. Disclaimer of Warranties

    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE LICENSOR BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    ㅤ

    6. Limitation of Liability

    To the maximum extent permitted by law, Licensor shall not be liable for any damages, including but not limited to direct, indirect, incidental, special, or consequential damages, arising out of or related to the use or inability to use the Software.

    ㅤ

    7. Termination

    This Agreement is effective until terminated. Licensor may terminate this Agreement immediately if you breach any term of this Agreement. Upon termination, you must cease all use of the Software and destroy any copies in your possession.

    ㅤ

    8. Updates and Support

    Licensor is not obligated to provide updates, support, or maintenance for the Software. However, updates may be provided at the sole discretion of the Licensor.

    ㅤ

    9. Governing Law

    This Agreement shall be governed by and construed in accordance with the laws of the State of New York, without regard to its conflict of law principles.

    ㅤ

    10. Entire Agreement

    This Agreement constitutes the entire agreement between you and the Licensor concerning the Software and supersedes all prior or contemporaneous understandings regarding such subject matter.

    By using the Software, you acknowledge that you have read this Agreement, understand it, and agree to be bound by its terms.

    ㅤ

    For any questions or concerns regarding this Agreement, please contact us at hello@samolevsky.com

Required Software

Figma

Learn more

Figma is a cloud-based design and prototyping tool primarily used for user interface and user experience design. It allows designers, developers, and other stakeholders to collaborate in real-time on projects.

Browse More Plugins

More Figma Plugins
  1. Explore Stroke Width Randomizer
    Stroke Width Randomizer

    Stroke Width Randomizer

    A powerful Figma plugin that applies random stroke widths to selected objects within a customizable range.

    Explore
  2. Explore Stroke Scaler
    Stroke Scaler

    Stroke Scaler

    A Figma plugin that allows you to scale and adjust stroke weights on selected objects with real-time preview.

    Explore
  3. Explore Select by Name
    Select by Name

    Select by Name

    Select by Name is a powerful Figma plugin that allows you to quickly find, filter, and select design elements by their names across your Figma documents. 

    Explore

Got questions?

Need help or have an idea to share? We’d love to hear from you! Whether you have questions, found a bug, have a feature request, or just want to share your feedback, reach out to us—we’re here for you! 

Ask a Qestion

Shop More Creative Assets