Menu
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.
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.
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.
2. Make a copy of our Figma Drupal-ready file
Make a copy of our open source Figma Drupal 10 design system file.
4. Drupal site page assembly
Send us your file and we’ll do our thing…
3. Mock up your page designs
Do ya thing – design and mockup pages like nobody’s watching!
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.
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.
1+ page(s)
$500
/page
- Min pages 1
- Min spend $500
3+ pages
$400
/page
- Min pages 3
- Min spend $1,200
5+ pages
$300
/page
- Min pages 5
- Min spend $1,500
We’ll transfer your custom Figma designs to our CivicTheme Figma Design System, and once approved, we’ll assemble them using the CivicTheme Drupal 10 theme.
1+ page(s)
$800
/page
- Min pages 1
- Min spend $800
3+ pages
$700
/page
- Min pages 3
- Min spend $2,100
5+ pages
$600
/page
- Min pages 5
- Min spend $3,000
Want us to build your custom Figma in Drupal as-is?
We’ll take your Figma file as-is and build a custom theme in Drupal to match.
This would be a custom build and so needs to be quoted separately.
Reach out to explore your options
If we can’t convince you to use CivicTheme, we’d be happy to organise a custom quote.
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.
- Can we design anything we want?
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.
- Can you convert our custom Figma file into Drupal?
We can, but it’s nowhere near as low cost and fast as using ours.
- Can we host it on our hosting platform?
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.
