1

So, i got a Figma resouce and task for move it to website. I stucked with a trouble: My figma got very complex background. Different lines, shapes e.t.c. are included in background. So which is the best way to deal with? Should i just group all of these elements into single one and insert it as a single background image?Fragment of figma

I need to move this background with different lines, which defined as separate elements in figma to website.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
ITS Razex
  • 37
  • 3
  • IMO, you could group the number with each box (number position will be absolute to corresponding box), the boxes will be absolute to the parent that has that circular thingy background. The top boxes should be placed on the middle and moved to top, while the bottom boxes should be places on the middle and moved to bottom (basically translate from middle origin) – Damzaky Nov 16 '22 at 02:40
  • @Damzaky, i think i formulate my question not so good. I mean how to deal with background lines (Circles on left side of image and blue spheres with high opacity on corners of image). Should i just group all these items into a single background image and fit all UI elements in it, or not =) But thans for answer! – ITS Razex Nov 16 '22 at 03:35

1 Answers1

1

Breaking down a design concept / mockup into layers of images and HTML and CSS is a nuanced process, especially if the design is very rich.

I recommend studying these tutorials so that you can figure out the best strategy for converting your mockup into a professional and optimized HTML5 web page:

Now, with that said, here's how I would approach it:

  1. The general gradient background should be rendered using CSS.

  2. The circles, dot, and horizontal line coming from the circle, should be exported to SVG -or- transparent PNG. Position that PNG image over the CSS background. For that, I recommend checking this Stack Overflow question.

  3. The numbers, being text with flat colors, should be implemented with floating divs, CSS, and WOFF fonts. I wouldn't export each number as separate images, because that's a very 90's old way of doing it, when HTML5 and CSS features were primitive. But this is up to you.

  4. Rounded rectangles with transparent background that blurs anything behind them can be rendered with DIVS and CSS. The Cyrillic text is inside the DIVS. Check this Stack Overflow question for that.

I hope this helps!