PHPackages                             opscale-co/nova-figma-field - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. opscale-co/nova-figma-field

ActiveLibrary

opscale-co/nova-figma-field
===========================

Read-only Figma file renderer for Laravel Nova, powered by @grida/refig.

1.0.0(1mo ago)00MITPHPPHP ^8.3CI passing

Since Jul 11Pushed 1mo agoCompare

[ Source](https://github.com/opscale-co/nova-figma-field)[ Packagist](https://packagist.org/packages/opscale-co/nova-figma-field)[ RSS](/packages/opscale-co-nova-figma-field/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)Dependencies (12)Versions (2)Used By (0)

Support us
----------

[](#support-us)

At Opscale, we’re passionate about contributing to the open-source community by providing solutions that help businesses scale efficiently. If you’ve found our tools helpful, here are a few ways you can show your support:

⭐ **Star this repository** to help others discover our work and be part of our growing community. Every star makes a difference!

💬 **Share your experience** by leaving a review on [Trustpilot](https://www.trustpilot.com/review/opscale.co) or sharing your thoughts on social media. Your feedback helps us improve and grow!

📧 **Send us feedback** on what we can improve at . We value your input to make our tools even better for everyone.

🙏 **Get involved** by actively contributing to our open-source repositories. Your participation benefits the entire community and helps push the boundaries of what’s possible.

💼 **Hire us** if you need custom dashboards, admin panels, internal tools or MVPs tailored to your business. With our expertise, we can help you systematize operations or enhance your existing product. Contact us at  to discuss your project needs.

Thanks for helping Opscale continue to scale! 🚀

Description
-----------

[](#description)

Design files usually live in Figma and rarely make it into the apps they describe. This package closes that gap: upload a `.fig` export or a Figma REST API JSON from any Nova resource and the design renders right on the record — read-only, pixel-faithful, no Figma account or API token required at view time. Rendering happens fully in the browser via [`@grida/refig`](https://www.npmjs.com/package/@grida/refig) (Skia over WebAssembly). Compatible with Nova 5.

Installation
------------

[](#installation)

[![Latest Version on Packagist](https://camo.githubusercontent.com/1d164429a1d9cb93dc11c0b62fae90590f4fbef36a248a4f9116690316c8172a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f707363616c652d636f2f6e6f76612d6669676d612d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/opscale-co/nova-figma-field)

You can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer:

```
composer require opscale-co/nova-figma-field
```

The package will auto-register its service provider.

Back your field with a `string` column on the owning model — it stores the disk path of the uploaded Figma file. The file itself lives on the Laravel disk of your choice (typically `public`).

```
Schema::create('designs', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('figma_path')->nullable();
    $table->timestamps();
});
```

Make sure the disk is publicly readable (for the default `public` disk: `php artisan storage:link`).

Usage
-----

[](#usage)

Add the `Figma` field to any Nova Resource that owns a Figma attribute:

```
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Http\Requests\NovaRequest;
use Laravel\Nova\Resource;
use Opscale\Fields\Figma;

class Design extends Resource
{
    public static $model = \App\Models\Design::class;

    public function fields(NovaRequest $request): array
    {
        return [
            ID::make()->sortable(),
            Text::make('Name')->rules('required', 'max:255'),

            Figma::make('Design', 'figma_path', 'public')
                ->prunable()
                ->deletable()
                ->height(600)
                ->scale(2)
                ->framePicker(),
        ];
    }
}
```

On **Create / Update** the field renders Nova’s native File dropzone — pick a `.fig` (Figma → *File → Save local copy*) or a REST API JSON export (`GET /v1/files/:key`), it is uploaded to the configured disk and the path is persisted. On **Detail / Lens** the field fetches the file from the disk and renders the selected frame as a crisp raster image, with a frame picker when the file has more than one top-level frame. It is intentionally **hidden from Index** and intentionally **not editable** — this is a viewer, not a design tool.

### Field behavior

[](#field-behavior)

ViewBehaviorCreate / UpdateNova’s native File field dropzone (`.fig`, `.json`). Inherited storage, deletion, and `->prunable()` semantics.Detail / LensRead-only render of the design via `@grida/refig` (Skia/WASM), with a page/frame picker.IndexHidden — a full design inside a table cell adds no decision-making value.### Modifiers

[](#modifiers)

MethodPurpose`->height(int $pixels)`Max height of the render viewport in pixels (default `600`; taller frames scroll).`->scale(float $factor)`Raster scale factor for the render (default `2` for crisp displays).`->framePicker(bool $enabled = true)`Show the page/frame dropdown when the file has multiple top-level frames.`->wasmUrl(string $url)`Override where the Skia WASM binary (~17 MB, cached immutably) is fetched from — e.g. a CDN. Defaults to a route served by this package.`->prunable()` / `->deletable()`Inherited from `Laravel\Nova\Fields\File` — remove the stored file when the record is deleted or the field is cleared.### Under the hood

[](#under-the-hood)

LayerDependencyUpload / storage`Laravel\Nova\Fields\File` — disk-backed upload, deletion, prunable.Renderer[`@grida/refig`](https://grida.co/docs/packages/@grida/refig) `FigmaRenderer` over [`@grida/canvas-wasm`](https://www.npmjs.com/package/@grida/canvas-wasm) (Skia).The PHP field class is a thin subclass of Nova’s `File`; the Vue `form` and `index` slots alias `form-file-field` and `index-file-field` verbatim, so there is no custom upload UI to maintain. Only the `detail` slot is custom — it reads `field.previewUrl`, fetches the bytes, parses them with `FigmaDocument` (`.fig` binary or REST JSON), and renders the chosen frame to a PNG.

Notes:

- The WASM renderer binary is served by this package at `/nova-vendor/nova-figma-field/grida_canvas_wasm.wasm` with immutable cache headers; it downloads once per browser.
- Figma’s default fonts (Inter, Noto Sans variants) are loaded from Google Fonts’ CDN by the renderer on first use. Custom/brand typefaces fall back to the closest default — see refig’s bring-your-own-font docs if you need exact fidelity.
- Image fills are embedded in `.fig` exports and render as designed. REST JSON exports reference image fills by hash without the bytes, so those render without bitmaps.

Testing
-------

[](#testing)

```
npm run test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](https://github.com/opscale-co/.github/blob/main/CONTRIBUTING.md) for details.

Security
--------

[](#security)

If you discover any security related issues, please email  instead of using the issue tracker.

Credits
-------

[](#credits)

- [Opscale](https://github.com/opscale-co)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance90

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 66.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

50d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/3722594?v=4)[opscale](/maintainers/opscale)[@opscale](https://github.com/opscale)

---

Top Contributors

[![opscale-development](https://avatars.githubusercontent.com/u/181295122?v=4)](https://github.com/opscale-development "opscale-development (2 commits)")[![semantic-release-bot](https://avatars.githubusercontent.com/u/32174276?v=4)](https://github.com/semantic-release-bot "semantic-release-bot (1 commits)")

---

Tags

laravelfieldnovavisualizerfigmarefiggrida

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/opscale-co-nova-figma-field/health.svg)

```
[![Health](https://phpackages.com/badges/opscale-co-nova-figma-field/health.svg)](https://phpackages.com/packages/opscale-co-nova-figma-field)
```

###  Alternatives

[outl1ne/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2852.3M9](/packages/outl1ne-nova-sortable)[optimistdigital/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2852.2M6](/packages/optimistdigital-nova-sortable)[outl1ne/nova-simple-repeatable

A Laravel Nova simple repeatable rows field.

75429.1k](/packages/outl1ne-nova-simple-repeatable)[dniccum/phone-number

A Laravel Nova phone number field with input masking and validation support.

70484.9k](/packages/dniccum-phone-number)[markwalet/nova-modal-response

A Laravel Nova asset for Modal responses on an action.

17984.6k](/packages/markwalet-nova-modal-response)[optimistdigital/nova-simple-repeatable

A Laravel Nova simple repeatable rows field.

75156.0k](/packages/optimistdigital-nova-simple-repeatable)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)