Easily copy any Live website to Figma and then to your App

Picasso was quoted saying “good artists borrow, great artists
steal.” I totally agree with this point, I think you should steal whenever there's opportunity to do so easily, and in this post, I'll show you how you can straight up steal any design you want.

I'm just kidding, stealing is wrong and blah blah, we should all be decent human beings and respect each other, but let's explore a method how you can easily get any component you want from some website and adjust it for your project and use case.

Let's say you are browsing a cool website and you saw a date picker component or a profile card that you like. With this approach you can have that component in your app in less then a couple of minutes.

First tool we'll use is figma.to.html. This is a really cool tool that will allow us to select any section of a website and open it inside Figma. You'll need to install their Google Chrome extension and Figma plugin as well.

First step is to find a component you would like to copy, I was browsing awwwards.com directory and thought I might copy a component for one website.

To save a certain section inside Figma you need to click on html.to.design chrome extension and then on Selection (or click Alt+Shift+D) and just select the component you want.

Once you click on a selection it will automatically download a file that you can import inside Figma.

Next up, open up Figma and then from plugins click on html.to.design. Once the plugin opens up, select the file you just downloaded and check all the fields.

Finally click on Go, and you will get your component loaded up inside Figma. Sometimes it will not match the design 100% but I tested a couple of these plugins and I've found that this one works the best. Feel free to fix any styling that didn't import correctly and modify the design to match your liking.

In my case import was not 100% correct and I had to fix a table.

After I fixed this table component was perfect and ready for the export.

To get the code for this component we will use another plugin for Figma from Builder.io. Just like for html.to.design there are many plugins for Figma that are used to get code from design. From my experience none of them work perfectly, this one from Builder.io is also not perfect, but I've found it works the best out of all of them.

Just open up the plugin, select the entire component in Figma and click on Generate code. It will open up Builder.io website with your design, this tool will generate the entire code for your component.

Inside the Builder.io dashboard you can choose to generate code with React, Qwik, Vue, Svelte, React Native, Angular, HTML, Mitrosis, Solid and Marko with styling in Tailwind and CSS, you are also able to edit the component with their editor.

Once I generated the code I got three components: ProfileCard.tsx that contains InfoRow.tsx and AwardCounter.tsx.

Let's examine them:

ProfileCard.tsx:

import React from "react";
import AwardCounter from "@/components/AwardCounter";
import InfoRow from "@/components/InfoRow";

interface ProfileCardProps {
  imageUrl: string;
  avatarUrl: string;
  name: string;
  isPro: boolean;
  location: string;
  website: string;
  awards: {
    type: string;
    count: number;
  }[];
}

const ProfileCard: React.FC<ProfileCardProps> = ({
  imageUrl,
  avatarUrl,
  name,
  isPro,
  location,
  website,
  awards,
}) => {
  return (
    <article className="flex flex-col bg-white rounded-lg max-w-[435px]">
      <img
        loading="lazy"
        src={imageUrl}
        alt="Profile cover"
        className="w-full aspect-[1.33]"
      />
      <header className="flex gap-3 self-start mt-8 ml-8 text-neutral-800">
        <img
          loading="lazy"
          src={avatarUrl}
          alt={`${name}'s avatar`}
          className="shrink-0 aspect-square w-[60px]"
        />
        <div className="flex gap-0.5 justify-between my-auto">
          <h1 className="text-2xl font-bold leading-6">{name}</h1>
          {isPro && <span className="text-xs font-medium leading-6">PRO</span>}
        </div>
      </header>
      <InfoRow label="Location" value={location} />
      <InfoRow label="Website" value={website} />
      <section className="px-8 py-7 w-full border-t border-gray-200 border-solid">
        <div className="flex gap-5 max-md:flex-col max-md:gap-0">
          <h2 className="text-sm font-bold leading-5 text-neutral-800 w-[44%] max-md:w-full">
            Awards
          </h2>
          <div className="flex grow gap-0 self-stretch text-center whitespace-nowrap text-neutral-800 w-[56%] max-md:w-full">
            {awards.map((award, index) => (
              <AwardCounter
                key={index}
                type={award.type}
                count={award.count}
                isLast={index === awards.length - 1}
              />
            ))}
          </div>
        </div>
      </section>
    </article>
  );
};

export default ProfileCard;

InfoRow.tsx

import React from "react";

interface InfoRowProps {
  label: string;
  value: string;
}

const InfoRow: React.FC<InfoRowProps> = ({ label, value }) => {
  return (
    <div className="flex gap-5 justify-between px-8 py-7 w-full border-t border-gray-200 border-solid text-neutral-800">
      <div className="text-base font-bold leading-5">{label}</div>
      <div className="text-sm font-light leading-5">{value}</div>
    </div>
  );
};

export default InfoRow;

AwardCounter.tsx

import React from "react";

interface AwardCounterProps {
  type: string;
  count: number;
  isLast: boolean;
}

const AwardCounter: React.FC<AwardCounterProps> = ({ type, count, isLast }) => {
  const borderClasses = isLast
    ? "rounded-none border border-solid border-neutral-800"
    : "border-t border-b border-l border-solid border-neutral-800";

  return (
    <div className={`flex flex-col py-px pl-px ${borderClasses}`}>
      <div className="text-xs font-medium leading-4">{type}</div>
      <div className="px-2 pt-3 pb-3 mt-1.5 text-xs font-bold leading-4 border-t border-solid border-neutral-800">
        {count}
      </div>
    </div>
  );
};

export default AwardCounter;

When I import ProfileCard component inside my page this is what I get.

import ProfileCard from "@/components/ProfileCard";
export default function Home() {
  return (
    <div className="flex flex-col h-screen">
      <ProfileCard
        imageUrl="https://assets.awwwards.com/awards/avatar/87991/6656d09421dac549404842.png"
        avatarUrl="https://assets.awwwards.com/awards/media/cache/thumb_user_retina/avatar/87991/620f9ee354b1b133493338.jpeg"
        name="Red Collar"
        isPro={true}
        website="https://redcollar.com"
        location="Los Angeles, CA"
        awards={[
          { type: "BW", count: 5 },
          { type: "MB", count: 19 },
          { type: "APP", count: 3 },
        ]}
      />
    </div>
  );
}

As you can see, the code Builder.io generated created a reusable component with props already defined which is quite impressive!

The end result looks like this:

This might seem like a long post but the entire process took a couple of minutes. I'm not saying you should steal design from other websites, but you can use this method to speed up your workflow for sure when you are inspired by some design that you saw. You can also use builder.io plugin to convert your one Figma designs much faster or to test how a certain component might fit into your designs. Sometimes I use this method to convert simpler components from Figma into code and then I adjust it, I found it speeds up my workflow so hopefully it can help you too.

I'm interested to hear what you guys think of this approach and do you think it makes sense for you, feel free to comment bellow.

If you enjoyed this post I'd love it if you could give me a follow on Twitter by clicking on the button below! :)