DEV Community: Anastasia Kas

Defining and creating a basic Design System based on any website (in Figma and React) using Claude

Anastasia Kas — Mon, 06 Apr 2026 06:26:10 +0000

It's 2026, and MCP and design tooling are constantly changing with various improvements in the AI space. Arguably, one of the most long-awaited features was Figma MCP supporting agents writing to its canvas. The funny thing is, I created a particular workflow 2 weeks ago, the lack of the write to canvas was a bit of a bottleneck but could be worked around since Claude Code was pretty good at generating plugins to create and clean up tokens (variables), as well as components and their props. Thankfully, that gap didn't hang around for long enough, and now there's native support for writing directly to canvas.

Firstly, we'll look at how we can set up the correct tooling for the following use case:

You've joined a startup, they have a website or a web page, but lack any reusable design system in either codebase or Figma. You want to generate semantic CSS variables and a basic set of web components in React and have the exact same copy of them in Figma.

If you have Claude Code, the good news is that you can achieve it with just 4 commands.

What are Claude Code commands?

For this workflow, we'll be using commands, since they're a set of repeatable instructions that can be invoked in the order we want, and every step can be controlled and double-checked.

Starter files

You can download or clone pre-defined commands as part of the starter repository here:
https://github.com/saintasia/workshop-claude-figma-design-system

Building the design system

1. Check that the repository is correctly initiated in Claude Code

Open terminal, go inside the repository you downloaded, cd REPOSITORY, run claude and try typing /extract to see if /extract-tokens command is on the list. If it is, then we're ready to go.

2. Extract tokens from a web page

I suggest making sure the page you're feeding Claude has all the colours and primary and secondary buttons for its reference, so that it can read a more complete token system.

When Claude is done with the command, you should get a token summary:

This command will generate a raw.json file with semantic and other token mapping for easier further organisation.

3. Build token system

Once the previous step is complete, Claude Code should let you know to run the following command: /build-token-system.

This command will generate structured css and json files under the tokens/system directory and give you a summary, including the contrast audit. It will also generate a human-readable token-conventions.md that will list the decisions it made and the implied rules that it has detected.

4. Generate React components

After we have the token systems and descriptions in place, we can generate our web components, including a basic preview of the entire design system by running /generate-components. You can follow the command up with a list of components you'd like to be generated, otherwise it will generate a basic set that includes some elements it has detected when first looking at the colour tokens and semantics.

Once the command is done running, you should see a summary of what has been generated, including a web application for preview.

If we run cd preview && npm run dev it should run our preview application locally and we should get something like the following preview in the browser.

5. Generate all the tokens and components in Figma

Once you've confirmed everything is looking pretty good, it's time to run the final command /push-to-figma. Follow it up with a link to the file where you'd like the variable sets and components to be generated.

For this step, make sure you install figma plugin from claude code plugins directory (https://claude.com/plugins/figma). And that you authenticate in order to use Figma's MCP.

Once you get the success message from Claude Code, you can go and check your referred Figma design file; it should have new tabs for tokens and components and be filled with the correct properties and light/dark modes.

All done!

Summary and good follow-up steps

In summary, as the AI tools keep evolving, it's important to keep trying different workflows and pay more attention to context engineering when it comes to reusable steps. Something like the example above could previously take several days to set up and make sure it's decently synced between the code tokens, components, and Figma; now, with Claude Code the same thing is achievable within about 30 minutes (given the correct context engineering).

Some of the follow-up steps I'd recommend now would be to add Figma's Code Connect to your web components and publish the Design System to be accessible outside of your local environment for developer reusability.

You can also rewrite the /generate-components command to set up a Storybook system instead of a simple web preview, and to also generate documents on how to use and assemble components into full-fledged UI for further reuse.

Easy micro-interactions in CSS (Pt2): Multi-state button

Anastasia Kas — Sat, 08 Feb 2020 08:02:44 +0000

A little preface, this is the second part of my micro-interactions in CSS posts (or micro-tutorials, even). And I am aware it has taken ages for me to finally get to the second part, but life has been crazy!

The last part was devoted to the star of all responsive websites and web apps - hamburger icon.

If you're not particularly interested in hamburger icons, let's just recap what a micro-interaction is (a bit of poetry, well, almost):

Microinteractions are an exercise in restraint, in doing as much as possible with as little as possible. Embrace the constraints and focus your attention on doing one thing well. ― Dan Saffer

As you may have guessed from the title, this part is going to be about buttons - something no site or app can do without. The button is also one of the oldest elements in UI that has gone through a lot of visual transformations over the years, starting with a simple square shape and a small shadow, going through the 3d phase, flat design age, and now the material design look. The modern frameworks also enabled the use of a button as a status communicator, and this is precisely the use cases we'll be looking at.

Just as a reminder, I'm using Slim and SCSS, but you can always compile and grab HTML and CSS from the codepen examples!

Multi-state button

As implementing such a button takes more effort and essentially all of the other use cases are similar in terms of state switching (Eg. Download -> Downloading -> Done or Netflix-style skip: Disabled -> Loading -> Skip), we'll only go through one example. For this example, let's focus on a message or email send button.

Let's start by adding 3 possible states' text values into DOM and then manipulating their visibility and positioning. In most cases, you will also need a 4th state for error, but to simplify this example, I won't be doing that.

So let's have a closer look at what we need to do.

Adding an icon element
Adding 3 text values
Providing 3 styles for the button background-color
Showing separate icon, switching text value and background depending on the state

The structure of the button is as follows:

  button.button.button--default
    .button__icon-wrapper
      .button__icon
    .button__text-wrapper
      .button__text.button__text--default Send
      .button__text.button__text--process Cancel
      .button__text.button__text--success Sent!

And the basic styling (you can look up color names here):

.button {
  font-size: 1.2em;
  text-align: left;
  padding: 0.8em 1.4em;
  border-radius: 2em;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  border: 0;
  color: WHITE;
  line-height: 1.6em;
  transition: background-color 300ms ease-in-out;
  &:focus {
    outline: 0;
  }
  &--default {
    background-color: CORNFLOWERBLUE;
  }
  &--process {
    background-color: MEDIUMSLATEBLUE; 
  }
  &--success {
    background-color: DARKTURQUOISE;   
  }
}

Lastly, let's add a simple script to toggle classes onClick. In a real-world application, you'd want the class toggle to be triggered by other events and most likely in a different manner altogether, but for now, we'll just use setTimeout().

const button = document.querySelector('.button');
button.addEventListener('click', function(){
  button.classList.remove('button--default');
  button.classList.add('button--process');
  setTimeout(function() {
    button.classList.remove('button--process');
    button.classList.add('button--success');
  }, 2000);
  setTimeout(function() {
    button.classList.remove('button--success');
    button.classList.add('button--default');
  }, 4500);
})

At this point, you should have a button with vertically stacked text, which onClick will start changing colors (and classes):

Now it's time to manipulate text switching, we'll do so by absolute positioning every element inside .button__text__wrapper and toggling their opacity and transformation depending on the currently active class.
The default will be opacity: 0;, and transform: translateY(20px);, this will give us a nice fade-from-the-bottom animation (see next paragraph).

  &__text-wrapper {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 1.6em;
    vertical-align: top;
  }

  &__text {
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    transition: all 250ms ease-in-out;
  }

It's time to apply transformation depending on the active class inside our .button, we'll need to transform the needed text to transform: translateY(0); and set opacity: 1;, this alone will give us a nice enough fade-in effect. But it's much better if the previous text fades-up and gives us that extra sense of dimension. We'll do that by targeting a previous class and fading it up transform: translateY(-20px);. You can always target these with the nth selector or in javascript, but to keep things simple I prefer to use classes.

  &--default {
    background-color: CORNFLOWERBLUE;
    .button__text--default {
      opacity: 1;
      transform: translateY(0);
    }
    .button__text--success {
      transform: translateY(-20px);
    }
  }
  &--process {
    background-color: MEDIUMSLATEBLUE; 
    .button__text--process {
      opacity: 1;
      transform: translateY(0);
    }
    .button__text--default {
      transform: translateY(-20px);
    }
  }
  &--success {
    background-color: DARKTURQUOISE;   
    .button__text--success {
      opacity: 1;
      transform: translateY(0);
    }
    .button__text--process {
      transform: translateY(-20px);
    }
  }

At this stage, you should already have a nice interaction going

To finalize our kickass send button, let's add a morphing icon. We'll use the CSS only approach, but you can always utilize SVGs as well.

First, we'll style our .button__icon-wrapper and the initial .button__icon (nested inside our .button)

  &__icon-wrapper {
    width: 1.6em;
    height: 1.6em;
    margin-right: 1em;
    display: inline-block;
    vertical-align: top;
  }
  &__icon {
    transition: all 300ms ease-in-out;
    display: block;
    box-sizing: border-box;
  }

Once the base is ready, let's go ahead and style every icon. First is going to be a simple caret, we'll add it inside &--default class. We'll simply create a square element, add top and right borders and then rotate it.

   .button__icon {
      width: 1em;
      height: 1em;
      margin: 0.3em 0.5em 0.3em 0;
      border-right: 3px solid white;
      border-top: 3px solid white;
      transform: rotate(45deg);
    }

For the &--process, things get just a little more tricky, as we need to create a simple loading icon. We'll do that by utilizing clip-path. You can read more about it here. We'll then animate the whole element with keyframes, rotating it and creating a spinner illusion.

    .button__icon {
      width: 1.2em;
      height: 1.2em;
      margin: 0.2em 0.5em 0.2em 0;
      border-radius: 100px;
      border: 3px solid white;
      animation: loading 1s infinite ease;
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
    }

Keyframes:

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Finally, let's create the success icon, a simple checkmark, similar to how we created the angle icon. Except let's rotate it an additional 360deg to make the transition back to default more smooth, and apply reveal animation that uses clip-path, essentially it reveals the bottom border first, and then moves to a 100% height.
You can play with clip-path and adjust it with clippy. Once we apply rotation, it will reveal the icon following the checkmark line.
Without it, a smooth transformation from the previous icon is harder to achieve.

Inside &--success let's add:

    .button__icon {
      margin: 0 0.3em 0.3em 0.1em;
      height: 1.2em;
      width: 0.9em;
      border-radius: 0;
      border-right: 3px solid white;
      border-bottom: 3px solid white;
      transform: rotate(405deg);
      animation: reveal 500ms ease-in;
    }

Keyframes (we'll also add a slight opacity transition):

@keyframes reveal {
  0% {
    opacity: 0;
    clip-path: polygon(0 85%, 0 85%, 0 100%, 0 100%);
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

And our multi-state button is ready!

Of course, when you use it in production you should really fool-proof the way the classes are being toggled and handled! Are there any other micro-interactions you'd like to take a look at? If yes, let me know and my next post might be just about that!

Easy micro-interactions in CSS (Pt1): Hamburger menu icons

Anastasia Kas — Mon, 11 Nov 2019 14:44:38 +0000

Whether you’re a designer or a developer working on the user-facing side of things, you have probably noticed how important micro-interactions can be. Let’s think about what micro-interaction is — it is an interaction that revolves around a single moment or use-case, regardless of what is happening in the rest of the app. As such I believe it is important to look at them in a vacuum and see how they work and look by themselves.

This is the first of the series on micro-interactions, and it is going to be fully devoted to the hamburger menu icons, one of the most frequently used elements on the web. We’ll go through the 3 most popular types of motions and how to replicate them in CSS. (With some JS to only toggle a class).

Stack and rotate

This is one of the most widely used interactions that you can see in many apps and sites, let’s break what happens down.

Stacking 3 bars on top of each other in the middle
Hiding one of the bars
Rotating the 2 visible bars to for an X
Reverse interaction on close

Let’s start by preparing our HTML, I’ll be using slim since it’s more concise, but of course, you can use either pure HTML or whatever preprocessor you prefer!

We’ll start by drawing the 3 bar elements inside a container. This is the base we will use for most examples:

body
  .hamburger
    .bar
    .bar
    .bar

Now, for the CSS, let's create the base by positioning our bars to look collapsed (default icon):

.hamburger {
  height: 2.3rem;
  width: 3rem;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.bar {
  border-bottom: 0.33rem solid white;
  position: absolute;
  display: block;
  width: 100%;
  &:first-of-type {
    top: 0;
  }
  &:nth-of-type(2) {
    top: 1rem;
  }
  &:nth-of-type(3) {
    top: 2rem;
  }
}

We'll implement the interaction by toggling a CSS class, here's a short JS that will handle that:

const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', function(){
  hamburger.classList.toggle('opened');
});

Now that the base is ready, let's get straight to the animation, it consists of 2 parts: stacking and rotation. We'll avoid using keyframes and set transition property to trigger at various timings instead, you can pass comma-separated values as type-of-transition duration delay. We'll add this into .opened .bar like so:

transition:
  top 100ms,
  transform 100ms 230ms,
  opacity 100ms;

Time to apply styles to the .opened class, we're going to fade out the middle bar and move and rotate the top and bottom ones to shape a line first, and the X next. We're also going to apply a reverse transition timing for when the X shifts back into a stacked icon.

.opened {
  .bar {
    transition:
      top 100ms,
      transform 100ms 230ms,
      opacity 100ms;
    &:first-of-type {
      top: 1em;
      transform: rotate(45deg);
    }
    &:nth-of-type(2) {
      opacity: 0;
    }
    &:nth-of-type(3) {
      top: 1em;
      transform: rotate(-45deg);
    }
  }
}

To spice it up a little let’s also give our animation that little snap effect by adding transition-timing-function to both .hamburger .bar and .opened .bar

transition-timing-function: cubic-bezier(1, 0.05, 0.62, 1.78);

End result:

Slide and rotate

This interaction is similar to that above, except one might call it more primitive (or efficient!), all animations can be done in 1 step. But let’s see what we should do overall.

Slide out the middle bar and decrease its opacity
Rotate the other 2 bars to shape an X

We’ll start with the base from our previous example and go straight to adding effects to bar elements.

The initial position of our bars is the same, what’s different is this time we will add transition: all to simplify our code since there’s no need for multi-step animation, like so

.hamburger {
  height: 2.3rem;
  width: 3rem;
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
  position: relative;

  .bar {
    border-bottom: 0.33rem solid white;
    position: absolute;
    display: block;
    width: 100%;
    transition: all 350ms;
    transition-timing-function: cubic-bezier(1, 0.05, 0.62, 1.78);
    &:first-of-type {
      top: 0;
    }
    &:nth-of-type(2) {
      top: 1rem;
    }
    &:nth-of-type(3) {
      top: 2rem;
    }
  }
}

We will also tweak our opened class, especially the second element which now needs to slide out to the left and to become transparent:

.opened {
  .bar {
    &:first-of-type {
      top: 1em;
      transform: rotate(45deg);
    }
    &:nth-of-type(2) {
      opacity: 0;
      transform: translateX(-30px);
    }
    &:nth-of-type(3) {
      top: 1em;
      transform: rotate(-45deg);
    }
  }
}

End result:

Flip

A great way to use pre-made custom icons, a flip hamburger button is another thing I see quite frequently. The mechanics are simple, one side had a hamburger icon and another side has a close icon, it flips on click (or on some action).

To make it happen, we first need to adjust our HTML (Slim)

body
  .hamburger
    .hamburger-button
      .icon-opened
        .bar
        .bar
        .bar
    .hamburger-button.hamburger-button-back
      .icon-closed
        .bar
        .bar

This should create two elements, one we’ll style to look like a bar icon, another one will be shaped like an x, with .hamburger-button working as a wrap for the background and inner icon- elements containing our bars. And yes, that is quite a bit of code, but only because we’re creating our icons in CSS, if you use an SVG icon, this should look much simpler!

Now, let’s add our CSS for the outer elements

.hamburger {
  margin: 0 auto;

  &-button {
    border-radius: 100px;
    display: inline-block;
    cursor: pointer;
    background: linear-gradient(to right, #485563, #29323c);
    // the padding along with the inner wrap adds up to 6rem*6rem circle
    padding: 1.85rem 1.5rem;
  }
}

Let's now add our icons. Some things can be combined into a more concise code, but we won't do that here as I want to keep things as easy to understand and follow as possible.

  .icon-opened {
    height: 2.3rem;
    width: 3rem;
    position: relative;
    .bar {
      border-bottom: 0.33rem solid white;
      position: absolute;
      display: block;
      width: 100%;
      &:first-of-type {
        top: 0;
      }
      &:nth-of-type(2) {
        top: 1rem;
      }
      &:nth-of-type(3) {
        top: 2rem;
      }
    }
  }
  .icon-closed {
    height: 2.3rem;
    width: 3rem;
    position: relative;
    .bar {
      border-bottom: 0.33rem solid white;
      position: absolute;
      display: block;
      width: 100%;
      &:first-of-type {
        top: 1em;
        transform: rotate(45deg);
      }
      &:nth-of-type(2) {
        top: 1em;
        transform: rotate(-45deg);
      } 
    }
  }

At this point, you should have two icons sitting next to each other, like this.

Once we got here, we can now start working on animation, the JavaScript code is the same as we used before, simply toggling a class on our outer .hamburger element. We will make use of CSS 3D transform properties and positioning.

First, we need to flip the X icon and place it on the backside of the button. To do so we will absolute position the .hamburger-button elements, and add a transform property to our -back element. We will also add backface-visibility: hidden;, the property name should sound pretty self-explanatory, but it hides the backside of an element, it is normally applied to ‘flippable’ elements to prevent flickering caused by z-indexing and layer glitches.

 &-button {
    border-radius: 100px;
    display: inline-block;
    cursor: pointer;
    background: linear-gradient(to right, #485563, #29323c);
    // the padding along with the inner wrap adds up to 6rem*6rem circle
    padding: 1.85rem 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    &-back {
      transform: rotateY(180deg);
    }
  }

We will also add pre-defined dimensions and transition properties to our main .hamburger element, as well as transform-style: preserve-3d to make sure that the nested elements are also rendered in 3d space.

.hamburger {
  margin: 0 auto;
  width: 6rem;
  height: 6rem;
  transition: all 300ms ease-in;
  transform-style: preserve-3d;
}

The only thing left to do now is flip the entire .hamburger element when the opened class gets added!

End result:

These 3 micro-interactions can be done fully in CSS without SVG or any JS libraries, and although pretty simple, they can be adjusted to look more smooth or complex with some extra-rotation, transition timing, and other properties. If you look around the web you will notice that most hamburger icons will use one of the above as a basis for their interaction, and rightfully so! The above eliminates any need to use keyframes or fancy libraries while providing a simple solution. Are you aware of any other easy-to-replicate hamburger icon interactions? If so, would love to hear about those too!