AspectMatic

The Figma plugin that helps developers with aspect ratio calculations.

Introduction

I built this plugin after learning about the CSS aspect-ratio property and getting tired of doing aspect ratio calculations manually. With AspectMatic, you can calculate aspect ratios instantly and format them in multiple ways.

Installation

Head to Figma Community to install the plugin.

Features

1. Separator Options: Choose between colon (:) or slash (/) to format aspect ratios.

2. Ratio Formats:

   • Regular Ratio: A simple division format for width and height, such as 300:9 or 300/9.
   • Reduced Ratio: The simplified version of the regular ratio, like 100:3.
   • Decimal Form: The ratio expressed as a decimal number, such as 33.33.
   • Rounded Decimal Form: The decimal ratio rounded to the nearest whole number, such as 33.

3. Aspect Ratio History: View and manage the history of calculated aspect ratios.

4. Easy Copy: Quickly copy any aspect ratio to your clipboard for use in your designs.

5. User-Friendly Interface: Clean and intuitive UI designed to streamline the aspect ratio calculation process.

How it works

1. Select Node(s): Click on one or more nodes in Figma to start the aspect ratio calculation process.

2. Choose a Separator: Decide whether to use colon (:) or slash (/) as your ratio separator.

3. Select a Ratio Form: Pick from one of four ratio forms (Regular Ratio, Reduced Ratio, Decimal, or Rounded Decimal).

4. Generate and Copy: Click "Get AR" to calculate the aspect ratio(s). Easily copy the results for use in your projects.

Contributing

Contributions are welcome! If you'd like to contribute to AspectMatic, please open a pull request or raise an issue in the repository.

Local Development

1. Clone the repository:

   git clone https://github.com/Jemeni11/AspectMatic.git
   

2. Install dependencies:

   pnpm install
   

3. Build the plugin:

   pnpm build
   

   This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

4. Watch for changes:

   To watch for code changes and rebuild the plugin automatically:

   pnpm watch
   

5. Install the plugin:

   • In the Figma desktop app, open a Figma document.
   • Search for and run Import plugin from manifest… via the Quick Actions search bar.
   • Select the manifest.json file that was generated by the build script.

6. Debugging: Use console.log statements and the Figma developer console (access via Show/Hide Console in Quick Actions).

Credits

AspectMatic was developed by Emmanuel Jemeni, a frontend developer.

Built with Create Figma Plugin, Preact, TypeScript, Prettier, and TailwindCSS.

If you find this plugin helpful and would like to support my work, feel free to buy me a coffee.

For any contributions or issues, check out the AspectMatic repository.

• LinkedIn: Emmanuel Jemeni
• GitHub: @Jemeni11
• Twitter/X: @Jemeni11_

License

GPL-3.0