Kuwait Data

Category: phone number library

  • My transition from Photoshop to Figma

    Hi, Today I want to tell you why I switched from Photoshop to Figma.
    I wasn’t going to write about this… Firstly, it didn’t seem very important to me what the web designer used to draw the website layouts, the main thing was that it wasn’t in CorelDraw ))
    Programs are just a tool, and everyone uses what is most convenient for them.
    Secondly, many web designers have now switched to Figma, and they have already described all the pros and cons of this program. There are significantly more pros. And I don’t think that my opinion will differ much from the general one.
    But it turned out that over the last couple of months, I received 3 letters from my readers with similar questions.

    Here is an example of one of these letters

    Question about Figma
    I immediately responded in a return letter and promised that I would publish a more detailed article in my next free time.
    But as usual, I’m short on free time, and I’ve also started redesigning my website. So I only found time to write the article now.
    I hope these questions are still relevant to you. So let’s go…
    Why Web Designers Chose Photoshop
    The main purpose of Photoshop is to work with raster objects. It is an ideal tool for processing photos, creating complex collages, restoring images, drawing, etc.
    Yes, you can work with vectors, lay out a brochure, and even make interesting animation. But for layout of printed materials, it is more logical estonia phone number library to use Adobe InDesign. Adobe Illustrator is more suitable for developing logos and vector drawings. And for creating animation, Adobe After Effects.
    It turns out that Photoshop is a super combine for photo processing, but with the most advanced functions. Can you process a photo for a website? Yes, you can. Draw forms and buttons – please. Work with typography – no problem.
    I think that’s why web designers chose Photoshop as their main tool for creating website designs. It had everything we needed.
    Of course, many desired options were missing, some functions were not as convenient as we would like… But, until recently, there were simply no other offers on the market. And since there are no alternatives, we choose the best of what is offered.

    phone number library

    Figma for layout designer

    Figma is a vector editor created specifically for web and mobile app development.
    It is convenient not only for designers. Figma layouts are also much more pleasant to lay out than from psd files.
    And here is a list of some of the benefits:
    In it you can immediately top 6 free vps trials for 2024 view and copy the CSS style of any object.
    The Figma model clearly shows all sizes and distances to objects.
    Easily export design elements, icons, etc. in a convenient format.
    My layout designer easily laid out the first job data layout, although he was not familiar with Figma before)) I explained to him only the key points, and then he got the hang of it himself.

  • How to create a glass effect in Figma

    Since I’ve switched to Figma in my work, I’ll occasionally publish short tutorials on it here on the blog. I think many will find it interesting. No fluff, simple, clear guides. And I’ll start with a simple tutorial on how to easily create a glass effect in Figma.
    Glass effect in Figma
    First, let’s create a frame, say 800×500 pixels, and fill it with some color. For example, green.
    Glass lesson in Figma
    Now, inside the frame, we will create a rectangle or square. From it we will make our transparent glass.
    I will create a 300x300px square of white color.

    Figma glass creation

    Let’s add a Backgound Blur effect to this layer.
    Figma Tutorials – Blur
    Then, by clicking on the “sun”, set the blur strength to 15
    Glass in Figma
    Almost done. For clarity, let’s add some picture or text to the background to make the effect more noticeable.
    I’ll add a guy under a tree at sunset. The sunset is not visible yet )) But that’s for now…
    Figma lessons effects
    And now the most interesting part. To create the effect of matte or translucent glass, in Figma it is enough to change the transparency of the layer color fill.
    Select our square and reduce Fill from 100% to 10 %
    Figma glass effect
    The main thing is not to confuse the fill with the layer transparency. If you reduce the percentage in the Layer field , you will not get this effect.
    Now you can play with the el salvador phone number library parameters to make the glass more matte or vice versa…
    Frosted glass in Figma
    Additional improvements
    We can also add a bit of realism and volume. Let’s round the corners of our square. I’ll set the radius to 9.
    Then we’ll use the Isometric plugin . I’m sure you know how to search for and install plugins, so I won’t explain this part.
    We launch the plugin, select our square and click any of the buttons in the plugin window.

    phone number library

    Plugin isometry in Figma

    There is isometry. Now let’s make our glass a little thicker. To do this, select the group in which our isometric square is located and add a couple of effects to this group.
    The first effect is with these parameters. The glass will gain volume.
    Figma effects
    Again, in the effects, click the plus sign the best shopify themes of 2024 and the most commonly and add a drop shadow effect. Here, select the color of the shadow and its blur at your discretion. Everything depends on your background and idea.
    This time, without any particular idea, I got this:
    glass effect in figma. Tutorial
    The main thing is that you understand how job data it works. If you liked the lesson, let me know in the comments. In the near future, I want to tell you how to create isometry in Figma yourself without plugins.