PENPOT VS FIGMA

You could save up to
$33,000/year on design software.

PENPOT · SELF-HOSTED

$0

Unlimited developer seats
Free & open source

FIGMA • PER SEAT

$12

/user/mo
$2,100/mo at 100 developers

But, should you?

Penpot is an open-source design and prototyping platform you host yourself, real-time collaboration,
components and variants, prototyping, native design tokens, and a developer mode that outputs real CSS,
HTML, and SVG. Designs are stored in open formats, so they're yours forever. You pay for the server it runs
on, not for every seat at the table.

DESIGNS THAT ARE ALREADY CODE

What you draw is what they ship.

Penpot lays out with native CSS Grid and Flexbox, the same models that exist in the browser. Flip the layout and watch the
real code update. No proprietary export, no translation layer between design and front-end.

Penpot canvas showing the Create account board

<!DOCTYPE html>
<html>
  <head>
    <style>
    /* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://design.staging.fxprofessionalservices.com/internal/gfonts/font/poppins/v24/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://design.staging.fxprofessionalservices.com/internal/gfonts/font/poppins/v24/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://design.staging.fxprofessionalservices.com/internal/gfonts/font/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(https://design.staging.fxprofessionalservices.com/internal/gfonts/font/poppins/v24/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(https://design.staging.fxprofessionalservices.com/internal/gfonts/font/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(https://design.staging.fxprofessionalservices.com/internal/gfonts/font/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html, body {
  margin: 0;
  min-height: 100%;
  min-width: 100%;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
}

.text-node { background-clip: text !important; -webkit-background-clip: text !important; }

/* Board */
.board-61b570cc562a {
  position: absolute;
  left: 9720px;
  top: 7518px;
  width: 100%;
  background: #141421FF;
  border-start-start-radius: 30px;
  border-start-end-radius: 30px;
  border-end-start-radius: 30px;
  border-end-end-radius: 30px;
  display: flex;
  align-items: start;
  align-content: stretch;
  justify-content: start;
  row-gap: 33px;
  padding-inline-start: 40px;
  padding-inline-end: 40px;
  padding-block-start: 40px;
  padding-block-end: 40px;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  flex-grow: 1;
}

/* Create account */
.create-acc-61b570cc562c {
  height: 24px;
  flex-shrink: 0;
}
.create-acc-61b570cc562c .root-0 {
  
  
  display: flex;
  white-space: break-spaces;
  align-items: flex-start;
}
.create-acc-61b570cc562c .root-0-paragraph-set-0 {
  display: inline-flex;
  flex-direction: column;
  justify-content: inherit;
  
  margin-right: 1px;
  vertical-align: top;
}
.create-acc-61b570cc562c .root-0-paragraph-set-0-paragraph-0 {
  font-size: 0;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}
.create-acc-61b570cc562c .root-0-paragraph-set-0-paragraph-0-text-0 {
  color: rgba(251, 247, 236, 1);
  text-transform: unset;
  
  line-break: auto;
  overflow-wrap: initial;
  white-space: pre;
  font-size: 20px;
  text-rendering: geometricPrecision;
  caret-color: rgba(251, 247, 236, 1);
  text-decoration: none;
  letter-spacing: 0px;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
}

/* Board */
.board-61b570cc562d {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  align-items: start;
  align-content: stretch;
  justify-content: start;
  row-gap: 20px;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
}

/* Board */
.board-61b570cc562e {
  position: relative;
  width: auto;
  height: auto;
  border: 1px solid #9a9890FF;
  border-start-start-radius: 20px;
  border-start-end-radius: 20px;
  border-end-start-radius: 20px;
  border-end-end-radius: 20px;
  display: flex;
  align-items: start;
  align-content: stretch;
  justify-content: start;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
  padding-block-start: 20px;
  padding-block-end: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* you@company.com */
.youcompan-61b570cc5630 {
  width: 310px;
  flex-shrink: 0;
}
.youcompan-61b570cc5630 .root-0 {
  
  
  display: flex;
  white-space: break-spaces;
  align-items: flex-start;
}
.youcompan-61b570cc5630 .root-0-paragraph-set-0 {
  display: inline-flex;
  flex-direction: column;
  justify-content: inherit;
  min-width: 100%;
  margin-right: 1px;
  vertical-align: top;
}
.youcompan-61b570cc5630 .root-0-paragraph-set-0-paragraph-0 {
  font-size: 0;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}
.youcompan-61b570cc5630 .root-0-paragraph-set-0-paragraph-0-text-0 {
  color: rgba(91, 87, 90, 1);
  text-transform: unset;
  
  line-break: auto;
  overflow-wrap: initial;
  white-space: break-spaces;
  font-size: 19.933324672892457px;
  text-rendering: geometricPrecision;
  caret-color: rgba(91, 87, 90, 1);
  text-decoration: none;
  letter-spacing: 0px;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
}

/* Board */
.board-61b570cc562f {
  position: relative;
  width: auto;
  height: auto;
  background: #e76c21FF;
  border: 1px solid #9a9890FF;
  border-start-start-radius: 20px;
  border-start-end-radius: 20px;
  border-end-start-radius: 20px;
  border-end-end-radius: 20px;
  display: flex;
  align-items: start;
  align-content: stretch;
  justify-content: start;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
  padding-block-start: 20px;
  padding-block-end: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* Sign up */
.sign-up-61b570cc5631 {
  width: 310px;
  flex-shrink: 0;
}
.sign-up-61b570cc5631 .root-0 {
  
  
  display: flex;
  white-space: break-spaces;
  align-items: flex-start;
}
.sign-up-61b570cc5631 .root-0-paragraph-set-0 {
  display: inline-flex;
  flex-direction: column;
  justify-content: inherit;
  min-width: 100%;
  margin-right: 1px;
  vertical-align: top;
}
.sign-up-61b570cc5631 .root-0-paragraph-set-0-paragraph-0 {
  font-size: 0;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}
.sign-up-61b570cc5631 .root-0-paragraph-set-0-paragraph-0-text-0 {
  color: rgba(0, 0, 0, 1);
  text-transform: unset;
  
  line-break: auto;
  overflow-wrap: initial;
  white-space: break-spaces;
  font-size: 19.933324672892457px;
  text-rendering: geometricPrecision;
  caret-color: rgba(0, 0, 0, 1);
  text-decoration: none;
  letter-spacing: 0px;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
}
    </style>
  </head>
  <body>
  <!-- frame: Board -->
<div class="frame board-61b570cc562a">
  <!-- frame: Board -->
  <div class="frame board-61b570cc562d">
    <!-- frame: Board -->
    <div class="frame board-61b570cc562f">
      <!-- text: Sign up -->
      <div class="shape text sign-up-61b570cc5631">
        <div class="text-node-html" id="html-text-node-5b62c659-5ac3-80d6-8008-61b570cc5631" data-x="9397" data-y="6988">
          <div class="root rich-text root-0" xmlns="http://www.w3.org/1999/xhtml">
            <div class="paragraph-set root-0-paragraph-set-0">
              <p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr"><span class="text-node root-0-paragraph-set-0-paragraph-0-text-0">Sign up</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- frame: Board -->
    <div class="frame board-61b570cc562e">
      <!-- text: you@company.com -->
      <div class="shape text youcompan-61b570cc5630">
        <div class="text-node-html" id="html-text-node-5b62c659-5ac3-80d6-8008-61b570cc5630" data-x="9397" data-y="6904">
          <div class="root rich-text root-0" xmlns="http://www.w3.org/1999/xhtml">
            <div class="paragraph-set root-0-paragraph-set-0">
              <p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr"><span class="text-node root-0-paragraph-set-0-paragraph-0-text-0">you@company.com</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- text: Create account -->
  <div class="shape text create-acc-61b570cc562c">
    <div class="text-node-html" id="html-text-node-5b62c659-5ac3-80d6-8008-61b570cc562c" data-x="9377" data-y="6827">
      <div class="root rich-text root-0" xmlns="http://www.w3.org/1999/xhtml">
        <div class="paragraph-set root-0-paragraph-set-0">
          <p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr"><span class="text-node root-0-paragraph-set-0-paragraph-0-text-0">Create account</span></p>
        </div>
      </div>
    </div>
  </div>
</div>
  </body>
</html>

Straight from Penpot's inspect mode, the same CSS and HTML your front-end team copies out of the design, no plugin or handoff tool required.

Your design files belong in
formats you own.

Cost & Value

98 35

Design-to-code accuracy

95 50

Self-hosting & data control

100 0

Native design tokens (W3C)

95 40

Developer handoff (free)

95 60

Plugin ecosystem

35 95

Prototyping depth

55 90

Penpot

Figma

Why you might stay with Figma

Figma earns its price for plenty of teams. Here's where it genuinely leads.

The deepest plugin ecosystem

Years of third-party integrations and a mature marketplace, the broadest catalog of tools and connectors in design.

Polish on large files

Figma stays smooth on massive design systems where lighter tools begin to lag. At extreme scale, it's still the benchmark.

Best-in-class Dev Mode

Engineers inspect, annotate, and export with the most refined handoff workflow the category has produced so far.

Category-defining collaboration

Multiplayer editing and the wider suite (FigJam, Slides) are battle-tested across teams of every size.

Why switch to Penpot

Some things are priceless.

No per-seat license

Add every designer, developer, and stakeholder at $0. Cost tracks your server, not your org chart.

Your designs, your format

Files are open SVG, CSS, and JSON: human-readable, version-controllable, and portable forever, with or without Penpot.

Self-host for full sovereignty

Design files never leave infrastructure you control. Air-gap it for regulated work or strict client NDAs.

Designs that are already code

Native CSS Grid and Flexbox mean what designers draw is the flexbox developers ship, with no translation layer in handoff.

Free developer mode

Inspect, copy real CSS, and export assets without a paid Dev seat or a single plugin standing in the way.

Open-source, no lock-in

MPL-2.0 licensed and community-built. No vendor can change the format, the terms, or the price out from under you.

The seat tax

Your 100th editor
should cost $0 more
in design tools.

Figma charges $16 per Full seat every month, so
every hire quietly extends the invoice, about
$1,600 a month once your team reaches 100. Add
Dev seats for engineers and the bill climbs even
faster. Penpot charges per server, not per seat.

Figma $1,600/mo at 100 seats

$1,600 $1,200 $800 $400 $0

5 10 25 50 100

editor seats

Penpot Figma Professional

Ready to own your design stack?

Open source. Zero per-seat fees. Real CSS output from day one.

Option 1

Use Penpot Cloud

Free tier with unlimited editors.
Import your Figma files and start
designing in minutes. No credit
card.

Option 2

Self-host with Docker

Full control over your design
infrastructure. Your files, your
servers, your rules. Deploy in an
afternoon.

RECOMMENDED FxP icon

Option 3

Lower your SaaS spend

Tell us what your business needs.
Our team will recommend the right solution and help you get started.