Figma
- Layouts agreed before build
- Comments in the file
- Figma Make for ad statics
- Figma MCP for AI builds
Where we draw the layout and agree it with you before anything is built. Websites, landing pages and ad statics all start in the file.
- 12example LinkedIn posts on one Figma page (19 October 2026)
- ~25reference frames on the same page
What we use Figma for
Agreed before it's built
You comment on the layout in the file, and we don't start the build until you've said yes. Changing a drawing costs far less than changing a built page.
Clickable prototypes
We've shown homepage concepts as an interactive prototype with motion and video, so the decision is made on something that moves.
One file for everyone
Clients and freelancers are added to the file or project they need, so feedback sits on the layout it's about. We remove them when the work ends.
Example posts on one page
We keep a Figma page of example LinkedIn posts, so new ads start from real examples instead of a blank page.
Drafts from Figma Make
For branded statics, Figma Make drafts frames from a prompt and a brand pack. We check them against the brand and finish them by hand in Figma.
Readable by AI builders
Figma's MCP server gives Claude Code and Cursor a file's layout, components and variables, so the build starts from the real design. We still check each page against the file.
Figma is where we draw a layout and agree it with you before anything is built. We use it for website and landing-page designs, ad statics and the occasional deck.
How a site project runs
- Mood boards and colour direction go in a shared file first.
- Then the page designs. For an online shop that can mean a homepage prototype, then the homepage, collection, product, FAQ and contact pages.
- You comment in the file, and we walk through it on a call.
- Once the full file is signed off, it's built on the platform that suits the site: Webflow for a site the team edits visually, Shopify for a shop, or a build like Astro and Keystatic when it needs code.
Ad creative
- A Figma page of example LinkedIn posts, so new ads start from real examples instead of a blank page.
- Figma Make for branded statics. We load the client's brand pack, write the prompt, then refine the frames in Figma.
Handing it to AI builders
In our operations repo, Figma's MCP server is connected to Claude Code, and Cursor connects through Figma's plugin. The server gives the tool a file's layout, components and variables to build from. It reduces guesswork, but we still review each page against the file.
Who gets in
Freelancers and clients are added to the specific file or project, and taken off when it's done.
What we connect it to
A design file can't tell you whether a page brings in customers. You only find that out from the tracking once it's live.
WebflowWhere the site suits it, layouts agreed in Figma are built in Webflow.
PhotoshopPhotoshop takes heavy image editing. Figma takes the layouts.
Claude CodeCan read a Figma file through its MCP server, so the agent has the layout to build from.
CursorConnects to Figma through Figma's plugin, to read a file's layout and components.
It's one part of the setup.
If another part is broken, this one wastes money.
What's a customer worth?
- 1
- 2
- 3
- 4
Services that use it
We don't sell it on its own. Each of these services uses it alongside the rest of your setup.
- Place in the loop: WebsiteWebsite Design & DevelopmentWebsites that look the part, turn visitors into enquiries, and that your team can update without a developer.Related tools: Webflow, Astro and Keystatic, Shopify, FigmaHow it fits
- Place in the loop: AdsContent & SEOContent and SEO that get you found on Google by people already looking for what you do.Related tools: Google Search Console, Google Analytics 4 (GA4), Google, WebflowHow it fits
What Figma is
Figma is a design tool that works in the browser, with desktop apps too. Designers, clients and freelancers can open the same file at once, leave comments on the layout and follow changes as they happen. It also has Dev Mode for handing designs to developers, FigJam for whiteboarding and Figma Make for drafting designs from a prompt.
Figma also runs an MCP server, which lets AI coding tools read a file's layout, components and variables. Seats come in three kinds (Full, Dev and Collab) and there's a free Starter plan. Prices are on figma.com/pricing.
Questions about Figma
Straight answers on how we work, what it costs and what to expect. If yours isn't here, just ask.
Still have questions?
Talk to usHow do you integrate Adobe Photoshop into modern marketing workflows?
Photoshop is where an image gets prepared. We design the page or ad layout in Figma, then export the image at the size the layout needs and compress it before it goes on a page or into an ad.
For one shop we built a Photoshop template for its product photos, with fixed export names and a three-stage compression pipeline.
How does Figma improve collaboration between designers and developers?
Everyone works from the same file. You comment on the layout, we reply in the file and talk it through on a call, and the build starts once you've agreed it. Comments sit on the part of the design they're about, so feedback doesn't get lost in email. That's how our website design and development service runs.
Figma's MCP server can pass the layout, components and variables on to an AI coding tool, and we can connect it to ours.
What is Figma Dev Mode and how does it help with design handoff?
Dev Mode is Figma's view for developers: it shows measurements, spacing, colours and component details, and shows code snippets for a selected frame. It's included in Full and Dev seats.
Figma's MCP server gives an AI coding tool the same layout and component details, and we can connect it to our coding tools.
What types of content do you create?
In house we do copywriting and design. For photography and video production we bring in freelance photographers and crews and manage the shoot. We pick the type by your goals and your audience, and write it for the reader first.
How do you build and maintain design systems in Figma?
On our own site the design system lives in code rather than in Figma: a tokens file holds the values, and every block on the site has a permanent reference. A design system is the shared set of colours, type styles, spacing and components that every page is built from.
In Figma, we draw a project's layouts and agree them with you before anything is built.
How do you ensure my website is mobile-friendly and accessible?
On our own site, checking pages at phone width is a written rule with a check script behind it: text size, tap targets and layout. Phone checks before launch are part of how we build.
Accessibility is a separate job. We don't issue an accessibility certificate, and a formal audit against WCAG isn't something we provide.
What are the key differences between Figma and other design tools like Sketch or Adobe XD?
Figma works in the browser (and has desktop apps), so clients, designers and freelancers can all open the same file and comment on it without installing anything. That's the main reason we use it.
Sketch is a Mac app, and Adobe has stopped adding features to Adobe XD.
How do you use FigJam for marketing strategy and brainstorming sessions?
FigJam is Figma's online whiteboard. It's handy for mapping a customer journey or sketching a campaign with a group, because everyone can add notes to the same board at once.
Our own design work happens in Figma files rather than FigJam boards, so we don't run FigJam as a service. Tell us if your team already uses it and we'll work with your boards.
How do you use Figma's AI features for faster design workflows?
We've used Figma Make to draft branded ad statics from a prompt and a brand pack, then finished the frames by hand. Since October our ad studio renders ads from a brief instead, and Figma is for extra versions and edits.
The other AI route is Figma's MCP server, which lets an AI coding tool read a design file, and we can connect it to ours. A person checks anything AI drafts against the brand and the brief.
How do you develop creative assets for paid ads?
We start from your brand, your audience and what your competitors' ads say, then write the messages and make versions for each platform, such as Google, Meta and LinkedIn. We use our ad studio to render ads from a brief in your brand, and a person on our team reviews every ad before it goes live.
Once ads are running, we compare the versions and replace the ones that tire.
Show 5 more questions
How does Adobe Photoshop compare to Figma for design work?
They do different jobs. Figma is for layouts: pages, ads, components and feedback from your team. Photoshop is for the image itself: retouching, cut-outs and compositing.
Our design work happens in Figma, and we've used Photoshop for the picture itself, in the product image template we built for a shop.
How do you integrate Figma with other marketing and development tools?
Figma sits at the start of a build. We agree the layout in the file with you, then it's built on the platform that suits the site: Webflow, or code when a site needs it.
Figma also has an MCP server that lets an AI coding tool read a file's layout, components and variables. We can connect it to our coding tools.
What does Figma cost and which plan should you choose?
Figma has a free Starter plan, then paid Professional, Organization and Enterprise plans billed per seat. Seats come in three kinds: Full (design), Dev and Collab. At the time of writing (21 October 2026), a Full seat is $16 a month on Professional and $55 on Organization. Figma's page didn't state Professional's billing period, so check figma.com/pricing.
When we design for you, we work in our own workspace and add you to the file to comment on it. If your team keeps editing afterwards, the seat you need depends on what each person does.
What's the difference between UX and UI design?
UX (user experience) is how a visitor moves through your site and whether they get to what they came for. UI (user interface) is how it looks: layout, type, colour and buttons.
If it takes five clicks to reach the page that makes you money, that's a UX problem. Both are part of our website design and development.
What is website design and development?
It's planning, designing, building and launching a website. Design covers how it's laid out and how it looks. Development is building it so it works and is easy for you to edit.
We draw the layout in Figma, agree it with you, then build it on the platform that suits the site, and set up tracking and forms before launch.
Start with your numbers.
We'll tell you which tools you need and which connections are missing.
Bring your numbers.
We'll tell you if the spend makes sense.
- A 15-minute callYour goals, your challenges, and whether we're the right fit.
- A 1-hour discovery callWe dig into your numbers. Worth a hundred emails.
- A concrete planAds, a custom build or both, as a one-off project or ongoing.