frames for figma

Bring the Outrageous Benefits of ACSS & Frames Directly Into Your Figma Workflow

A Frames + ACSS powered workflow takes you from UX/UI design in Figma, to finished development in WordPress, in a fraction of the time.

Launch is closed. Please check back soon.

Unlock Your Figma Flow-State With This Two-Product Bundle

This product bundle features ACSS Tokens and Frames for Figma, two products that will quadruple your margins on all Figma work. Here's how...

Product #1: ACSS Tokens

The power, maintainability, and scalability of Automatic.css, embedded straight into every Figma project.

  • Global color management

    All colors, shades, and tranasparencies are managed with tokens. You can update colors and shades in seconds across your entire project.

  • Global typography management

    All text & heading sizes and math scales are managed with tokens. You can adjust your text and heading sizes at any time from one place.

  • Global spacing management

    All spacing values & math scales are managed with tokens. Loosen or tighten spacing across your entire project at any time.

  • A gorgeous style guide

    Full style guide pages for all key areas of your project (typography, spacing, colors, widths, shadows, radius, etc.) are ready-made & auto-updated.

  • A near-replica of ACSS in Figma

    ACSS Tokens makes style-management and design in Figma feel effortless and nearly automatic without limiting you creatively.

Product #2: Frames for Figma

The absurd efficiency of powering your UX and UI process with perfectly structured, unopinionated layout patterns.

  • The full Frames library inside Figma

    A perfect 1-1 mapping of every frame between Figma and Bricks so you can start development based on the exact frames used in design.

  • Built exclusively with auto-layouts

    Any design set that doesn't use auto-layouts is an instant disqualification. Frames is 100% built with auto-layouts for effortless customization.

  • Uses Figma's "component" functionality

    Every frame is a component and some contain nested components. This gives you both individual & instance-based control over every frame.

  • Powered by Figma "Instances"

    Instances allow you to swap one frame with another from the same category without having to remove one and add another. Instant gratification!

  • Bonus features

    A full icon set page with over 2400+ icons, an "Identity" page to set your project's brand information & logo across the project, and more...

This is your opportunity to get a LIFETIME LICENSE for both products with our special, limited time launch bundle.

Launch is closed. Please check back soon.

Frequently asked questions

If you don't see your question answered here, please get in touch!

Contact us

    Will this work with the free version of Figma?

    Yes. The free version of Figma is limited to 3 project files. If you want more than three project files, you’ll need a premium account, but Frames for Figma and ACSS Tokens will work with the free version.

    How will Frames for Figma benefit me financially?

    Frames for Figma and ACSS Tokens have the potential to bring two major financial benefits to your business: (1) An increase in revenue (2) An increase in margin.

    If you’re not charging separately for the UX Design phase and again for the UI design phase, this gives you a great opportunity to add those as billable line items. Many businesses charge $100 to $500+ per page in Figma for these steps alone, meaning Frames for Figma and ACSS Tokens easily pay for themselves the first time you use them on a billable project.

    Additionally, the increased workflow speed and efficiency you’ll get with these tools will improve profitability. You’ll be completing your work on average 50-70% faster. Not only that, you’ll see a big jump in the quality of your work and process.

    Does this work with the free version of Tokens Studio?

    Yes, the free version of Tokens Studio (a 3rd party Figma plugin) is all you need.

    Why didn’t you use Figma’s native tokens feature?

    Figma recently released a native tokens feature. While it’s a great step in the development and functionality of Figma, it lacks certain functionality that ACSS Tokens relies on. For this reason, we’ve decided to stick with the Tokens Studio plugin for now. If we decide to convert everything over to native Figma tokens in the future, you’ll receive the update at no extra charge (if you have the LTD).

    What is ACSS Tokens?

    ACSS Token is a “Figmafied” version of Automatic.css. It’s built with “tokens,” which work similarly to CSS variables. In fact, I often refer to CSS variables as “tokens” and have talked at length about the importance of “tokenized styling” because it gives you a single source of truth for the styling values you use repeatedly throughout a project.

    Does Frames for Figma require ACSS Tokens?

    Yes, just like Frames for Bricks requires Automatic.css. ACSS Token is the “framework” that every frame uses for perfect construction, scalability, and maintainability.

    Can I use ACSS Tokens without Frames for Figma?

    Yes! You can (and should) use ACSS Tokens on every project, whether you’re leveraging Frames for Figma or not.

    Can my entire team use this bundle?

    Yes. Any project that you or your business works on can be made available to anyone else working on the project. You can also give any project built with ACSS Tokens or Frames to a client as a deliverable. There are no restrictions as to who can use this bundle. With that said, distributing the product publicly or re-selling the product is strictly prohibited.

    Are all Frames available in Figma on day one?

    I want to make this perfectly clear: You’re buying into a v1.0 product. As with Frames for Bricks, we need to iron out any workflow issues before we make every frame available. As the first batch of real users starts interacting with the bundle and providing initial feedback, we’ll sprint to start incorporating the rest of the frames library.

    With that said, ACSS Tokens is fully built out and fully functional and the Frames for Figma library will ultimately be an exact match of the entire Frames dev library. In fact, new Frames will likely be created in Figma BEFORE they’re developed in the dev environment (since that’s truly the best workflow). So, there won’t be any issues with missing frames between Figma and Dev!

    Just don’t expect every frame to be there immediately when you purchase. We will do consistent releases to update the library over the coming weeks.