Hallo Leute! Today we will do some interesting stuff with ThreeJS and typography — we will make Kinetic Typography.

There are plenty of cool shots over the internet tagged as #kinetictypography. Here are some of them ↘

I’m writing a new article and actually this is a part of it. I’ll describe a method that I used to generate textures in Three.js.

But I decided to describe some methods as separate articles to be more flexible and don’t worry about the amount of text and structuring.

What we will do

We will make text → repeat it on canvas → convert it to image → add the image as a background.

I will do it with React, but it doesn't matter because we will write a function that you can use with plain JS as well.

Here are two methods:

1. Generate text and adjust canvas size to the text width

2. And the second method adjust the text to the canvas width

a week ago I saw a new IPad Pointer presentation and was very excited about what they did. It was very interesting to see how they design different pointer modes and attention to details. Here is the presentation:

Some of their approaches were very interesting, and I immediately start to think if I can recreate the same cursor effects on the web.

Today, the article will be written as a diary — separated into days, it will be easier to track the progress and fallow the story.

Hello there! Today I want to share the experience of using a system approach in Alteos design — we will talk about design systems, how they help, how we build and maintain ours, plus a little about code.

My name is Pavel Laptev, I’m a lead designer at Alteos. As a modern insurance startup, we provide a fully digital approach to our clients and for all our products. We work in a B2B2C business model and develop many products.

That’s why for me, as a designer, it was very important to keep everything in order from the very beginning; to…

Not so while ago, I wrote a plugin that can parse a JSON file and populate Figma layers.

I wrote the first 1.0 version of the plugin as MVP. That’s why the plugin was written in vanilla JS and plain HTML and it was pretty hard to refactor it. When I started to write it, I’ve encountered some structuring difficulties — everything was in one file, the inability to use external libraries, and other horrible things that we forgot in modern development.

I decided that if I want to maintain it and evolve the plugin I need a better way…

Sup, dudes! This is your boy Mr.Smarty Pants! Today I want to break down the process of writing a Figma Plugin. In our case, it will be a plugin that can parse a JSON file and populate text layers by its values.

For the introduction — here is a plugin’s website:

and the plugin's community page:

If you don’t have a test JSON file you can download it here:

The Idea

I decided to create a plugin when I was working on the new “Team” page for the website and I wanted to use real names and positions of my co-workers but…

Lately, I pretty often use React for rapid prototyping and developers' handoff, but I faced the problem when you need to change the state of the one component from another —in my case, it was a “Toast” component. Today let’s consider a few examples on this task.

Task ⤵

We have a CTA button in the parent component when we click on it we show a child component . Child component has a “close” button, when we click on it we hide the child component.

The main thing here is that we need to change the children’s state from the…

Hello, today I want to share my experience on how to theme a website with CSS variables.

There was a use case — to build a scalable design system with an easy customize method for the Whitelabel option when a client wants to have their own colors and typography, styles.

• The easiest way is to use CSS variables — manage hundreds of places where you implemented different styles much better with a small list of variables.
• And much more comfortable is just add one new CSS file instead of menage variables with preprocessors or JS. Also, because initial design-tokens in…