Figma to Drupal.

Design with Figma, launch in Drupal. Days, not weeks.

Create a stunning website using our open source design system in Figma and let us build it in Drupal for you. Responsive, inclusive, pixel-perfect, bug-free, and super fast to assemble.

The cost, time and pain of translating design to build is often very high. Designs get missed, misinterpreted and take a long time to translate into code. Many bugs arise, which take time to resolve...and end up breaking the bank.

Innovative technology
Prebuilt and synchronised
Figma with Drupal.
High quality. Rapid build. Low cost.
We’ve built a true atomic, component-based design system in Figma that is 100% in-sync with a Drupal 10 theme. This significantly reduces the time it takes to build your website, while ensuring a consistent, compliant and visually stunning experience.

Figma design system

A true design system based on atomic design principles, comprising of a set of standards, reusable components and patterns.

Component library

A component library that connects design with code. Components are mirrored (and centralised) to remove ambiguity, reduce bugs, ensure consistency and deliver rapid, quality builds.

Open source software

Fully open source so communities can adopt, adapt or customise as they see fit. Co-create with communities and build on the foundation and make it even greater.

Drupal 10 CMS

Prebuilt Drupal 10 theme components, 100% in-sync with the Figma design system to enable rapid, quality site assembly in the latest version of Drupal.

Like-for-like
Seriously like-for-like. Pixel-by-pixel.
What we see is what you get.
Our Figma design system is jam packed with out-of-the box and ready-to-use design components that will ensure your Drupal website looks exactly as you’ve designed it. Scout’s honour.

ENJOY A

100%

PIXEL DESIGN

GUARANTEE

Design
Visually stunning, responsive and user-tested.
Possibly even artistically Michelangelo worthy.
We’ve handcrafted a suite of visual components that are modern, inclusive and responsive, so you can create great digital experiences for your customers. But we didn’t stop there…these components support light and dark themes, aligned to digital web and accessibility standards, and are user-tested.
Drupal 10
Drupal 10 here we come.
The most powerful open source CMS. Period.
Built, tried and tested to work with the latest version of Drupal. We’ve engineered prebuilt components that are 100% in-sync with Figma. This enables us to build your web pages on the latest and greatest version of Drupal, with high quality, speed and precision.
Speed
Ridiculously rapid site builds.
Impatient people love us.

Did we say fast? We’ve prebuilt our Figma visual design components in Drupal to allow us to deliver your website at ridiculous speeds. Deploy fast, load fast and test fast. This gives a headstart to all content, development and research teams, reducing your design-build-test-deploy project lifecycle.

Low code
Surprisingly low-code to no-code.
That’s no joke.
We’ve done all the code so you don’t have to. Our engineers have built a framework in Drupal so that we can assemble your website to match Figma with no code. Basically, we can pick and mix from a library of prebuilt visual components and have your website look like Figma without a single line of code. Aren’t we clever.
Cost
Transparent, upfront and low fixed costs.
Quotes are a thing of the past.
Know your costs upfront with our simple and disruptive low-cost pricing model. Lower your financial risk and better manage your budget by knowing exactly how much your website will cost in advance. No need to submit a request for a quote, no surprises and no hidden fees. That’s no bull.
Proof
Seeing is believing.
The proof is in the pudding.
Here’s just one of the many examples showing the original design file in Figma and identical site build in Drupal. Pixel-perfect. Like-for-like.

Figma

Drupal Nation | Open Community

Drupal

Drupal Nation | Open Community

Why
How Figma to Drupal can help you.
Use cases to infinity and beyond.
Rapid prototyping
Meet crazy deadlines
Detailed user feedback
Get accurate insights
Assemble quickly
Functional prototyping
Meet tight budgets
Implement teasers
Quick launches
CivicTheme
Introducing our design system.
Welcome to CivicTheme.
CivicTheme is an open source, inclusive and component-based design system that makes this all possible. It was created so governments and corporations can rapidly assemble modern, consistent and compliant digital experiences.

Open source

Fully open source so communities can adopt, adapt or customise.

Atomic design system

Based on atomic design principles, made up of a set of standards, reusable components and patterns.

Inclusive & accessible

Built and assessed to comply with WCAG accessibility standards 2.1 AA out-of-the-box.

Government grade

Based on, and inspired by, the former Australian Government Design System.

Aligned to digital policies

Built to comply with policies of leading digital nations.

Project-led. User-led.

Informed from real projects that deliver information and services for real users.

Component library

Connects code to design to remove ambiguity and bugs and deliver rapid builds.

Responsive for desktop & mobile

Great appreciation for gestures, swiping and reachability.

How
How does it all work?
It’s as easy as 1-2-3.
Once we have qualified (together) that our service is a good fit, we’ll formalise a statement of work and then get started as per the steps below.

1. We'll onboard you

We’ll schedule a workshop with your design team to show you the ropes and get you ready to rapidly start designing.
how-arrow.svg

2. Make a copy of our Figma Drupal-ready file

Make a copy of our open source Figma Drupal 10 design system file.
how-arrow.svg

4. Drupal site page assembly

Send us your file and we’ll do our thing…
how-arrow.svg

3. Mock up your page designs

Do ya thing – design and mockup pages like nobody’s watching!
how-arrow.svg

5. Feedback and revisions

Tell us what you think. Hopefully we got it pixel-perfect, but just in case let’s make a tweak or two.
Other services
Need help in other areas?
We’ve got you covered.
Here are some optional services that we offer should you ever need it.

Figma UX/UI design

Professional UI/UX design services using Figma to create high-quality, visually appealing designs.

Full WCAG compliance accessibility review

Expert accessibility reviews to ensure your website meets WCAG compliance standards for inclusivity.

Drupal custom component theming

Drupal theming services to create custom components that meet your website's specific needs.

Custom Figma design systems

Bespoke Figma design systems for unique product branding and identity.

Figma custom component design

Figma design services to create custom components that meet your needs.

User research and testing

Expert user research and testing services to validate, refine and ensure user-centered design.

Resources
Wanna DIY?
Knock yourself out.
You can use our open source tools to do it all yourself.
Feel free to give it a crack and engage with the CivicTheme open source community for free.

Figma Drupal 10 Design System - CivicTheme

Play with our Drupal 10 CivicTheme Design System.

Storybook

Our component library connecting design with development.

Drupal 10 theme code repo

Build the code yourself, here’s our repo.

CivicTheme documentation

Comprehensive training guides to enable you to assemble pages fast.

WCAG: Accessibility compliance documentation

Assessment to the Web Content Accessibility Guidelines (WCAG) AA 2.0.

AUDS: Design compliance documentation

Lineage mapping to the former Australian Government Design System.

Spin up a demo site instantly

Spin up and experience the CivicTheme Design System on Drupal 10 instantly with LaunchPad.
Pricing
Figma to Drupal page prices.
Simple. Transparent. Fixed.
You design your pages using the open source CivicTheme Figma Design System, then submit them us to assemble using the CivicTheme Drupal 10 theme.
All prices shown in:

1+ page(s)

$500

$335

/page

3+ pages

$400

$265

/page

5+ pages

$300

$200

/page

Inclusions
Standard inclusions.
With every page.

Figma design system check

We’ll validate your Figma design file to check the design integrity and compliance of each page.

WCAG colour contrast check

We’ll validate colours and contrasts to ensure compliance with the relevant WCAG AA standards.

Drupal web page build

We’ll build out each web page in Drupal 10 to match your Figma designs.

Pixel match QA

We’ll conduct visual tests to ensure each Drupal web page we build matches your Figma page design.

1 round of revisions

We’ll support 1 round of revisions to reflect any minor changes.

1-month sandbox hosting

We’ll provide 1 month of free hosting for your web pages on our secure Drupal hosting platform.
FAQs
Questions?
These are the most popular.
Can’t find the answer you’re looking for?
Book a time to chat with us and a member of our team will get back to you as soon as they can.
Our service assumes you use our design system and assemble your pages using all of our out-of-the-box components as-is. This ensures you get a consistent, responsive and accessible Drupal build at low cost and high speed.
We can, but it’s nowhere near as low cost and fast as using ours.

Yes, but it will cost you more. Quote on application.

Get in touch
Where to from here?
All roads lead to Rome.

Reach out and tell us what you want to do, and we’ll explore how we can help.

About us
Who is Salsa?
More than a Latin dance.
Salsa is an open source digital innovation company that’s devoted the past 11+ years to mastering its craft in Drupal. We are currently responsible for managing many of the largest Drupal websites on behalf of the Australian Government… Can we have this dance?

Official service provider

Official service provider of 4 major government programs across Australia.

Drupal contributor

Top 10 international ranking in 2022 for Drupal contribution.

Design system custodians

Custodians of the open source, inclusive design system CivicTheme.

Supporting 400 websites

Responsible for supporting over 400 Drupal websites across Australian Government.

Values-driven culture

Accountability, transparency and authenticity are 3 examples of Salsa’s 8 key values.

Digital innovation company

Salsa is a digital innovation company with a pioneering spirit.

Figma to Drupal. Design with Figma, launch in Drupal. Days, not weeks.

Create a stunning website using our Figma open source design system and let us build it in Drupal for you. Responsive, inclusive, pixel-perfect, bug-free and super fast to assemble.

Contact

© 2023 Salsa Digital is located on the traditional lands of the Wurundjeri-willam people of the Kulin Nation. We pay our respects to Elders both past and present and recognise Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land.
aboriginal-flag
tsi-flag