<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>tomake.design (tofig.design) - Figma Design Tools &amp; Plugins</title>

  <!-- SEO Meta Tags -->
  <meta name="description" content="Install Figma plugins to import websites, HTML/CSS, and PDFs as editable Figma designs. Formerly tofig.design - now tomake.design with html.tomake.design and pdf.tomake.design plugins." />
  <meta name="keywords" content="Figma plugin, HTML to Figma, PDF to Figma, website to Figma, convert HTML to Figma, import PDF Figma, tomake.design, tofig.design, html.tofig.design, pdf.tofig.design, html.tomake.design, pdf.tomake.design, Figma design tools, AI to Figma, free Figma plugins, @tomakedesign, Figma Community" />
  <meta name="author" content="tomakedesign LLC" />
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
  <meta name="googlebot" content="index, follow" />
  <meta name="bingbot" content="index, follow" />
  <link rel="canonical" href="https://tomake.design/feed.xml" />
  <link rel="alternate" hreflang="en" href="https://tomake.design/feed.xml" />
  <link rel="alternate" hreflang="x-default" href="https://tomake.design/feed.xml" />
  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
  <link rel="alternate" type="application/rss+xml" title="tomake.design RSS Feed" href="/feed.xml" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://tomake.design/feed.xml" />
  <meta property="og:title" content="tomake.design (tofig.design) - Figma Design Tools &amp; Plugins" />
  <meta property="og:description" content="Install Figma plugins to import websites, HTML/CSS, and PDFs as editable Figma designs. Formerly tofig.design - now tomake.design with html.tomake.design and pdf.tomake.design plugins." />
  <meta property="og:image" content="https://tomake.design/brand/og-image.svg" />
  <meta property="og:image:alt" content="tomake.design - Free Figma Plugins" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:site_name" content="tomake.design" />
  <meta property="og:locale" content="en_US" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:url" content="https://tomake.design/feed.xml" />
  <meta name="twitter:title" content="tomake.design (tofig.design) - Figma Design Tools &amp; Plugins" />
  <meta name="twitter:description" content="Install Figma plugins to import websites, HTML/CSS, and PDFs as editable Figma designs. Formerly tofig.design - now tomake.design with html.tomake.design and pdf.tomake.design plugins." />
  <meta name="twitter:image" content="https://tomake.design/brand/og-image.svg" />
  <meta name="twitter:image:alt" content="tomake.design - Free Figma Plugins" />
  <meta name="twitter:site" content="@tomakedesign" />
  <meta name="twitter:creator" content="@tomakedesign" />

  <!-- Additional SEO & PWA -->
  <meta name="application-name" content="tomake.design" />
  <meta name="apple-mobile-web-app-title" content="tomake.design" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="theme-color" content="#1a1a1a" />
  <meta name="msapplication-TileColor" content="#1a1a1a" />
  <meta name="color-scheme" content="light dark" />

  <!-- Inter Font -->
  <link rel="preconnect" href="https://rsms.me">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

  <!-- Local CSS: Tachyons + Animate.css -->
  <link rel="stylesheet" href="/css/vendor/tachyons.min.css">
  <link rel="stylesheet" href="/css/vendor/animate.min.css">

  <!-- Icons -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

  <!-- CSS -->
  <style>/*
 * tomake.design
 * Modern Design System
 * Clean. Professional. Consistent.
 */

:root {
  /* Bold Geometric Mural Palette */
  --ink: #1a1a1a;
  --ink-light: #2d2d2d;
  --white: #ffffff;
  --cream: #faf9f6;
  --off-white: #f5f5f5;

  /* Grays */
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-400: #a1a1aa;
  --gray-600: #71717a;
  --gray-800: #3f3f46;

  /* Vibrant Geometric Colors */
  --orange: #ff6b35;
  --coral: #ff6b6b;
  --magenta: #e91e8c;
  --pink: #ff69b4;
  --red: #ef476f;
  --yellow: #ffd60a;
  --lime: #9ef01a;
  --green: #06d6a0;
  --teal: #2ec4b6;
  --cyan: #00b4d8;
  --sky: #48cae4;
  --blue: #4361ee;
  --navy: #1d3557;
  --purple: #7b2cbf;

  /* Primary accent */
  --accent: #ff6b35;
  --accent-hover: #e55a2b;

  /* Typography - Inter */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

/* Inter font features */
@supports (font-variation-settings: normal) {
  :root {
    --font-sans: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em; /* Inter recommended */
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga" 1, "calt" 1; /* Inter ligatures */
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }

/* Typography */
.f-display {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.f-headline {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.f-subheadline {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.f-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.f-body {
  font-size: 16px;
  line-height: 1.6;
}
.f-caption {
  font-size: 14px;
  line-height: 1.5;
}
.f-micro {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Color utilities */
.ink { color: var(--ink); }
.white { color: var(--white); }
.gray { color: var(--gray-600); }
.accent { color: var(--accent); }
.coral { color: var(--coral); }
.yellow { color: var(--yellow); }
.mint { color: var(--mint); }
.sky { color: var(--sky); }
.purple { color: var(--purple); }

.bg-ink { background: var(--ink); }
.bg-white { background: var(--white); }
.bg-gray { background: var(--gray-100); }
.bg-accent { background: var(--accent); }
.bg-coral { background: var(--coral); }
.bg-yellow { background: var(--yellow); }
.bg-mint { background: var(--mint); }
.bg-sky { background: var(--sky); }
.bg-purple { background: var(--purple); }
.bg-orange { background: var(--orange); }
.bg-pink { background: var(--pink); }
.bg-teal { background: var(--teal); }

/* Layout */
.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
.container-sm { max-width: 768px; margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-16) 0; }

/* Flexbox */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* Grid */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit grid for products - scales from 1 to many */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Spacing */
.ma0 { margin: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.pv-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.pv-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.pv-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn:hover {
  background: var(--ink);
  color: var(--white);
}
.btn-primary {
  background: var(--ink);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-accent {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-yellow {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-yellow:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.btn-mint {
  background: var(--mint);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-mint:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.btn-sky {
  background: var(--sky);
  color: var(--white);
  border-color: var(--ink);
}
.btn-sky:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.btn-coral {
  background: var(--coral);
  color: var(--white);
  border-color: var(--ink);
}
.btn-coral:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.btn-big {
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 800;
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover {
  background: var(--gray-100);
  color: var(--ink);
}
.btn img, .btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Cards */
.card {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: var(--space-6);
  transition: all 0.2s ease;
}
.card:hover {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.card-bordered {
  border: 2px solid var(--ink);
}
.card-bordered:hover {
  box-shadow: 4px 4px 0 var(--accent);
  transform: translate(-2px, -2px);
}

/* Product Badge Circle */
.badge-circle {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}
.badge-circle.accent { background: var(--accent); }
.badge-circle.large {
  width: 72px;
  height: 72px;
  font-size: 28px;
}

/* Step Counter */
.step-list { counter-reset: step; }
.step-item { counter-increment: step; }
.step-circle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.step-circle::before { content: counter(step); }

/* Tags/Badges */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--yellow);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.tag img, .tag svg { width: 14px; height: 14px; }
.tag-outline {
  background: transparent;
  border: 2px solid var(--ink);
}
.tag-coral { background: var(--coral); }
.tag-mint { background: var(--mint); }
.tag-sky { background: var(--sky); color: var(--white); }
.tag-purple { background: var(--purple); color: var(--white); }
.tag-orange { background: var(--orange); }
.tag-pink { background: var(--pink); }
.tag-teal { background: var(--teal); }

/* Icon sizes */
.icon { width: 20px; height: 20px; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* Stats */
.stat-block {
  text-align: center;
  padding: var(--space-6);
  background: var(--yellow);
  border: 2px solid var(--ink);
}
.stat-block:nth-child(2) { background: var(--mint); }
.stat-block:nth-child(3) { background: var(--sky); }
.stat-block:nth-child(4) { background: var(--pink); }
.stat-value {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}
.stat-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600);
}

/* FAQ Accordion */
details {
  border-bottom: 1px solid var(--gray-200);
}
details:first-of-type {
  border-top: 1px solid var(--gray-200);
}
details summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) 0;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary:hover { color: var(--accent); }
details[open] summary { color: var(--accent); }
details[open] summary svg { transform: rotate(180deg); }
details .answer {
  padding: 0 0 var(--space-4);
  color: var(--gray-600);
}
details summary svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--gray-400);
}

/* Divider */
.divider {
  height: 1px;
  background: var(--gray-200);
  border: none;
  margin: var(--space-12) 0;
}

/* Header accent stripe - colorful rainbow */
.header-stripe {
  height: 8px;
  display: flex;
}
.header-stripe::before {
  content: '';
  flex: 1;
  background: var(--coral);
}
.header-stripe::after {
  content: '';
  flex: 1;
  background: var(--yellow);
}
.header-stripe-inner {
  display: flex;
  flex: 2;
}
.stripe-mint { flex: 1; background: var(--mint); }
.stripe-sky { flex: 1; background: var(--sky); }
.stripe-purple { flex: 1; background: var(--purple); }
.stripe-pink { flex: 1; background: var(--pink); }

/* Simple multi-color stripe */
.color-stripe {
  height: 8px;
  background: linear-gradient(90deg,
    var(--orange) 0%, var(--orange) 14.28%,
    var(--yellow) 14.28%, var(--yellow) 28.56%,
    var(--lime) 28.56%, var(--lime) 42.84%,
    var(--teal) 42.84%, var(--teal) 57.12%,
    var(--cyan) 57.12%, var(--cyan) 71.4%,
    var(--magenta) 71.4%, var(--magenta) 85.68%,
    var(--purple) 85.68%, var(--purple) 100%
  );
}

/* Patterns */
.pattern-dots {
  background-image: radial-gradient(var(--ink) 2px, transparent 2px);
  background-size: 20px 20px;
}
.pattern-grid {
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pattern-diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    var(--ink) 10px,
    var(--ink) 12px
  );
}
.pattern-zigzag {
  background: linear-gradient(135deg, var(--yellow) 25%, transparent 25%) -20px 0,
    linear-gradient(225deg, var(--yellow) 25%, transparent 25%) -20px 0,
    linear-gradient(315deg, var(--yellow) 25%, transparent 25%),
    linear-gradient(45deg, var(--yellow) 25%, transparent 25%);
  background-size: 40px 40px;
  background-color: var(--coral);
}
.pattern-checker {
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ink) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--ink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--ink) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.pattern-waves {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M0 40 C20 40 20 0 40 0 S60 40 80 40' fill='none' stroke='%231a1a2e' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 80px 40px;
}

/* Mural Art Elements - Organic Shapes */
.blob-1 {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.blob-2 {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.blob-3 {
  border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
}

/* Paint Drip Effect */
.drip {
  position: relative;
}
.drip::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 15%;
  width: 8px;
  height: 30px;
  background: inherit;
  border-radius: 0 0 50% 50%;
  animation: drip-fall 3s ease-in-out infinite;
}
@keyframes drip-fall {
  0%, 100% { height: 30px; opacity: 1; }
  50% { height: 45px; opacity: 0.8; }
}

/* Brushstroke Underline */
.brushstroke {
  position: relative;
  display: inline-block;
}
.brushstroke::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -5%;
  right: -5%;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 10 Q25 2 50 10 T100 10 T150 10 T200 10' stroke='%23ffd93d' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
  z-index: -1;
}

/* Spray Paint Texture */
.spray-texture {
  position: relative;
}
.spray-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='10' cy='20' r='1' fill='%231a1a2e' opacity='0.3'/%3E%3Ccircle cx='30' cy='10' r='0.5' fill='%231a1a2e' opacity='0.2'/%3E%3Ccircle cx='50' cy='35' r='1.5' fill='%231a1a2e' opacity='0.25'/%3E%3Ccircle cx='70' cy='15' r='0.8' fill='%231a1a2e' opacity='0.3'/%3E%3Ccircle cx='85' cy='45' r='1' fill='%231a1a2e' opacity='0.2'/%3E%3Ccircle cx='20' cy='60' r='1.2' fill='%231a1a2e' opacity='0.25'/%3E%3Ccircle cx='45' cy='75' r='0.7' fill='%231a1a2e' opacity='0.3'/%3E%3Ccircle cx='65' cy='55' r='1' fill='%231a1a2e' opacity='0.2'/%3E%3Ccircle cx='90' cy='80' r='1.3' fill='%231a1a2e' opacity='0.25'/%3E%3Ccircle cx='15' cy='90' r='0.6' fill='%231a1a2e' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  pointer-events: none;
  opacity: 0.4;
}

/* Splatter decoration */
.splatter {
  position: absolute;
  width: 60px;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='50' rx='35' ry='30' fill='currentColor'/%3E%3Cellipse cx='25' cy='35' rx='12' ry='10' fill='currentColor'/%3E%3Cellipse cx='75' cy='30' rx='15' ry='12' fill='currentColor'/%3E%3Cellipse cx='70' cy='70' rx='10' ry='14' fill='currentColor'/%3E%3Cellipse cx='30' cy='75' rx='8' ry='10' fill='currentColor'/%3E%3Ccircle cx='15' cy='55' r='6' fill='currentColor'/%3E%3Ccircle cx='85' cy='50' r='5' fill='currentColor'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Rough/hand-drawn border */
.border-rough {
  border: none;
  position: relative;
}
.border-rough::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='4' y='4' width='192' height='192' fill='none' stroke='%231a1a2e' stroke-width='4' stroke-dasharray='2,0' stroke-linecap='round' rx='2'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Tape/sticker effect */
.tape {
  position: relative;
}
.tape::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 80px;
  height: 24px;
  background: rgba(255, 217, 61, 0.85);
  border: 2px solid var(--ink);
}

/* Graffiti tag style */
.tag-graffiti {
  display: inline-block;
  padding: 8px 20px;
  background: var(--ink);
  color: var(--white);
  transform: rotate(-3deg) skewX(-5deg);
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  position: relative;
}
.tag-graffiti::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 10%;
  width: 4px;
  height: 12px;
  background: var(--ink);
  border-radius: 0 0 2px 2px;
}

/* Neon glow effect (for night mural feel) */
.neon-text {
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor;
}

/* Layered shadow (3D mural effect) */
.shadow-layered {
  box-shadow:
    4px 4px 0 var(--coral),
    8px 8px 0 var(--yellow),
    12px 12px 0 var(--teal);
}

/* Wobble animation for organic feel */
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.wobble {
  animation: wobble 4s ease-in-out infinite;
}

/* Hero image */
.hero-image {
  overflow: hidden;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.hero-image img {
  width: 100%;
  height: auto;
}

/* Screenshot frame */
.screenshot {
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--gray-100);
}
.screenshot img {
  width: 100%;
  height: auto;
  display: block;
}
.screenshot-placeholder {
  aspect-ratio: 16/10;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

/* Notice Bar */
.notice-bar {
  background: var(--ink);
  color: var(--white);
  padding: var(--space-3) var(--space-6);
  font-size: 14px;
}
.notice-bar a {
  color: var(--accent);
  font-weight: 600;
}
.notice-bar a:hover { text-decoration: underline; }

/* Footer */
.footer {
  background: var(--ink);
  color: var(--white);
  padding: var(--space-12) 0 var(--space-8);
}
.footer h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  margin: 0 0 var(--space-4);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-link {
  color: var(--gray-400);
  font-size: 14px;
  transition: color 0.15s ease;
}
.footer-link:hover { color: var(--white); }
.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink-light);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.footer-copyright {
  font-size: 13px;
  color: var(--gray-400);
}
.social-links {
  display: flex;
  gap: var(--space-2);
}
.social-link {
  width: 36px;
  height: 36px;
  background: var(--ink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  border: 2px solid transparent;
}
.social-link:hover {
  background: var(--accent);
  border-color: var(--white);
}
.social-link img { width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: 0.7; }
.social-link:hover img { opacity: 1; }

/* Legal pages */
.legal h2 {
  font-size: 18px;
  font-weight: 700;
  margin: var(--space-8) 0 var(--space-4);
  color: var(--ink);
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-size: 15px;
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--ink);
}
.legal p {
  margin: 0 0 var(--space-4);
  color: var(--gray-600);
  line-height: 1.7;
}
.legal ul, .legal ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.legal li {
  margin-bottom: var(--space-2);
  color: var(--gray-600);
  line-height: 1.7;
}
.legal a { color: var(--accent); }
.legal a:hover { text-decoration: underline; }

/* Typography Utilities */
.font-display { font-family: var(--font-sans); font-weight: 800; }
.font-bold { font-family: var(--font-sans); font-weight: 700; }
.font-medium { font-family: var(--font-sans); font-weight: 500; }

.text-stroke {
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
.text-stroke-sm {
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.text-shadow-hard {
  text-shadow: 4px 4px 0 var(--ink);
}
.text-shadow-pop {
  text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--coral);
}
.text-rotate-left { transform: rotate(-3deg); display: inline-block; }
.text-rotate-right { transform: rotate(3deg); display: inline-block; }
.text-slant { transform: skewX(-5deg); display: inline-block; }

/* Spray paint drip effect */
.drip-text {
  position: relative;
}
.drip-text::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 20%;
  width: 4px;
  height: 12px;
  background: currentColor;
  border-radius: 0 0 2px 2px;
}

/* Hand-painted underline */
.underline-marker {
  background-image: linear-gradient(120deg, var(--yellow) 0%, var(--yellow) 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 90%;
}
.underline-coral {
  background-image: linear-gradient(120deg, var(--coral) 0%, var(--coral) 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 90%;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeIn 0.4s ease forwards;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .container, .container-sm { padding: 0 var(--space-4); }
  .section { padding: var(--space-12) 0; }
  .btn { padding: 10px 18px; font-size: 13px; }
  .hide-mobile { display: none; }
  .footer .grid { grid-template-columns: 1fr 1fr !important; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .footer .grid { grid-template-columns: 1fr !important; }
}
</style>
  <style></style>

  <!-- Structured Data: Organization -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "@id": "https://tomake.design/#organization",
    "name": "tomakedesign LLC",
    "legalName": "tomakedesign LLC",
    "alternateName": ["tomake.design", "tofig.design", "html.tofig.design", "pdf.tofig.design", "html.tomake.design", "pdf.tomake.design", "@tomakedesign"],
    "url": "https://tomake.design",
    "logo": {
      "@type": "ImageObject",
      "url": "https://tomake.design/brand/logo-icon.svg",
      "width": 512,
      "height": 512
    },
    "image": "https://tomake.design/brand/og-image.svg",
    "description": "Free Figma plugins to import websites, HTML/CSS, AI-generated code, and PDFs as fully editable designs. 100% free, no signup required.",
    "foundingDate": "2024-12-01",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "1209 Mountain Road Pl NE, Ste R",
      "addressLocality": "Albuquerque",
      "addressRegion": "NM",
      "postalCode": "87110",
      "addressCountry": "US"
    },
    "contactPoint": [
      {
        "@type": "ContactPoint",
        "email": "support@tomake.design",
        "contactType": "customer support",
        "availableLanguage": "English"
      }
    ],
    "sameAs": [
      "https://tofig.design",
      "https://html.tofig.design",
      "https://pdf.tofig.design",
      "https://x.com/tomakedesign",
      "https://www.figma.com/@tomakedesign",
      "https://discord.com/invite/VVArNqBGjB",
      "https://github.com/tomakedesign",
      "https://chromewebstore.google.com/detail/ijoegnplinjhfdnhgakjgfejieiclppi"
    ],
    "knowsAbout": ["Figma", "HTML to Figma", "PDF to Figma", "Web Design", "UI Design", "Design Tools"],
    "slogan": "Anything to Figma. Instantly."
  }
  </script>

  <!-- Structured Data: WebSite for search box -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "@id": "https://tomake.design/#website",
    "name": "tomake.design",
    "alternateName": ["tofig.design", "tofig", "tomake", "html.tofig.design", "pdf.tofig.design", "html.tomake.design", "pdf.tomake.design"],
    "url": "https://tomake.design",
    "description": "Free Figma plugins - HTML to Figma, PDF to Figma. Formerly tofig.design.",
    "publisher": {
      "@id": "https://tomake.design/#organization"
    }
  }
  </script>

  <!-- Structured Data: Software Applications -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "ItemList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@type": "SoftwareApplication",
          "name": "HTML to Figma Plugin",
          "alternateName": ["html.tomake.design", "html.tofig.design", "HTML to Figma converter"],
          "description": "Figma plugin that converts any URL or HTML/CSS into editable Figma layers. Import websites directly into Figma.",
          "applicationCategory": "DesignApplication",
          "operatingSystem": "Figma",
          "softwareRequirements": "Figma account",
          "isAccessibleForFree": true,
          "url": "https://html.tomake.design",
          "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD",
            "availability": "https://schema.org/InStock"
          },
          "creator": {
            "@type": "Organization",
            "name": "tomake.design",
            "alternateName": "tofig.design"
          }
        }
      },
      {
        "@type": "ListItem",
        "position": 2,
        "item": {
          "@type": "SoftwareApplication",
          "name": "PDF to Figma Plugin",
          "alternateName": ["pdf.tomake.design", "pdf.tofig.design", "PDF to Figma converter"],
          "description": "Figma plugin to turn PDFs into layered, editable Figma designs. Fast, private, and local processing.",
          "applicationCategory": "DesignApplication",
          "operatingSystem": "Figma",
          "softwareRequirements": "Figma account",
          "isAccessibleForFree": true,
          "url": "https://pdf.tomake.design",
          "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD",
            "availability": "https://schema.org/InStock"
          },
          "creator": {
            "@type": "Organization",
            "name": "tomake.design",
            "alternateName": "tofig.design"
          }
        }
      }
    ]
  }
  </script>

  <!-- Structured Data: BreadcrumbList -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://tomake.design"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "",
        "item": "https://tomake.design/feed.xml"
      }
    ]
  }
  </script>

  <!-- Structured Data: Brand mention for Figma Community -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Brand",
    "@id": "https://tomake.design/#brand",
    "name": "tomake.design",
    "alternateName": ["tofig.design", "@tomakedesign"],
    "description": "Free Figma plugins: HTML to Figma and PDF to Figma. Find us on Figma Community as @tomakedesign.",
    "url": "https://tomake.design",
    "logo": "https://tomake.design/brand/logo-icon.svg"
  }
  </script>

  <!-- Structured Data: FAQ -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "Is tomake.design the same as tofig.design?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Yes! We rebranded from tofig.design to tomake.design. All our plugins (html.tofig.design and pdf.tofig.design) are now available at html.tomake.design and pdf.tomake.design. The functionality remains the same — same great tools, new name."
        }
      },
      {
        "@type": "Question",
        "name": "Are the Figma plugins free to use?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Yes, both html.tomake.design and pdf.tomake.design are free to install and use. You can import unlimited websites and PDFs into Figma at no cost."
        }
      },
      {
        "@type": "Question",
        "name": "Can I import AI-generated code into Figma?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Absolutely! The html.tomake.design plugin works perfectly with code generated by ChatGPT, Claude, v0, Bolt, Lovable, and other AI coding tools. Just paste the HTML/CSS code and convert it to editable Figma layers."
        }
      },
      {
        "@type": "Question",
        "name": "Is my PDF data private and secure?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Yes, completely. The pdf.tomake.design plugin processes all PDF files locally on your device. Your documents never get uploaded to any server — your data stays private."
        }
      },
      {
        "@type": "Question",
        "name": "What types of websites can I import into Figma?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "You can import any publicly accessible website. This includes landing pages, portfolios, dashboards, e-commerce sites, blogs, and more. The plugin captures the visual layout and converts it to Figma layers."
        }
      },
      {
        "@type": "Question",
        "name": "How do I get support or report issues?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "You can reach us at support@tomake.design for any questions or issues. We also have a Discord community where you can get help and share feedback with other users."
        }
      },
      {
        "@type": "Question",
        "name": "Where can I find tomake.design plugins on Figma?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "All our plugins are available on Figma Community at figma.com/@tomakedesign. You can install HTML to Figma and PDF to Figma directly from there, completely free."
        }
      }
    ]
  }
  </script>

  <!-- Structured Data: HowTo -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "How to import HTML or PDF into Figma",
    "description": "Learn how to convert websites, HTML/CSS code, and PDF files into editable Figma designs using free plugins from tomake.design (formerly tofig.design).",
    "step": [
      {
        "@type": "HowToStep",
        "position": 1,
        "name": "Install the Figma plugin",
        "text": "Choose html.tomake.design for websites/HTML or pdf.tomake.design for PDFs. Both are free to install from the Figma Community."
      },
      {
        "@type": "HowToStep",
        "position": 2,
        "name": "Paste URL, code, or select PDF",
        "text": "Enter any website URL, paste your HTML/CSS code, or select a PDF file from your computer."
      },
      {
        "@type": "HowToStep",
        "position": 3,
        "name": "Edit your design in Figma",
        "text": "Your import appears as fully editable Figma layers. Modify text, colors, layout — everything is customizable."
      }
    ],
    "totalTime": "PT1M"
  }
  </script>
</head>
<body>
  <?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>tomake.design</title>
    <link>https://tomake.design/</link>
    <description>Free Figma plugins for importing websites, HTML/CSS, and PDFs as editable designs.</description>
    <language>en-us</language>
    <atom:link href="https://tomake.design/feed.xml" rel="self" type="application/rss+xml"/>

    <item>
      <title>HTML to Figma Plugin</title>
      <link>https://tomake.design/html-to-figma/</link>
      <guid>https://tomake.design/html-to-figma/</guid>
      <description>Transform websites and HTML into editable Figma designs. Import any URL, paste code, or use AI-generated HTML. 100% free.</description>
    </item>

    <item>
      <title>PDF to Figma Plugin</title>
      <link>https://tomake.design/pdf-to-figma/</link>
      <guid>https://tomake.design/pdf-to-figma/</guid>
      <description>Convert PDFs into layered, editable Figma designs. Choose between vector precision or image modes. 100% private, local processing.</description>
    </item>

    <item>
      <title>AI to Figma</title>
      <link>https://tomake.design/ai-to-figma/</link>
      <guid>https://tomake.design/ai-to-figma/</guid>
      <description>Import AI-generated code from ChatGPT, Claude, v0, Bolt, Lovable, and Replit directly into Figma as editable layers.</description>
    </item>
  </channel>
</rss>


  
</body>
</html>
