#How to recreate a website 1-1 in Figma?

115 messages · Page 1 of 1 (latest)

still carbon
#

I have been given a rather daunting task by my brother. I need to recreate this website 1-1 in Figma, but I have no experience in doing it and honestly? I'm a bit scared because I can't find a way. Can someone help me out? I just need to know where to start and how to go on. I appreciate your help, let that be known right away.

https://www.14islands.com/

No animations, just the homepage - in Desktop, Tablet and Mobile.

While I just want instructions, any further help i'm going to cherish. My experience in Figma is decent at best, i know the controls and sooome advanced stuff and I can handle what i don't know. It's just that i'm overwhelmed all of a sudden. This is just one part of the task - as i am supposed to build it out in Webflow too, but that doesn't matter here - the 1-1 issue is my biggest challenge right now.

heavy pier
#

Free or How much expensive your project?

still carbon
#

Or better put

It's nothing commercial, it's technically practice.

still carbon
#

Anyone?.

heavy pier
#

Do you have another project?

still carbon
remote flicker
#

Other method would be to screenshot the image then manually do it. The site's pretty simple

still carbon
#

Well, okay i managed to get a screenshot at least, now i'm just stuck on this.. @remote flicker

#

I'm trying to fiddle around with the line spacing

#

but it's either too drastic

#

or

#

too

#

hm

#

The fonts are the same. I don't see the issue.

image.png
#

right, i should use inspect element

#

Actually that aint helpful at all xD

remote flicker
#

Also sometimes the webpage and your frame might not be same size

still carbon
#

I am actually tracing

#

As you can see

#

by the uh

#

thing

remote flicker
#

You can turn off the snap to grid , and snap to pixel for finer controls

still carbon
#

hm.

#

Where's that option

remote flicker
still carbon
#

Thanks man

remote flicker
#

With rulers you can make things aligned,

#

Shift+R

still carbon
#

Alright, i'll give it a go. Thanks.

still carbon
#

No, i don't see the difference. Gah, the letter spacing is just being stupid

remote flicker
#

Can you share a picture?

still carbon
#

Sure i could

#

Sorry this is just stressing me out. I can barely make any progress on this thing

#

Like

#

It's been 3 days

#

Again it's the same thing i showed before. I'm trying to align it with arrows and increase and decrease the line spacing in order to fit it

image.png
#

I'm starting to think i'm not as decent with figma as i thought

#

And it's just

#

It's stressful because my brother has expectations of me

#

I really wish it was a simple thing for me.

remote flicker
#

Okay now, can you state your issue? You want the letters closer/further?

still carbon
#

I want the letters/word to match the screenshot. The screenshot itself is 1440x900 resolution

Look at how the "Design" fits perfectly, but for some reason, "Technology" doesn't.

image.png
remote flicker
#

Okay I understand

#

Ill guide you

#

2 steps

  1. you can remove Y from the rest of the text since it's not aligning,
  2. create another Text box only with Y in it then align accordingly.
#

Also , the plugin html.to.design can do all this in 1 click

still carbon
#

.. Did you do that just now?

remote flicker
#

Yes

#

Heres the link for the file

#

Select the entire page , then copy to another new project

still carbon
#

mm Okay

#

Sorry i'm just in thought

#

because

#

i tried the plugin before

#

and while it works for the most part

#

It just seems so complicated

#

For me

#

Okay, i copy that entire thing

#

but i feel so slow

remote flicker
#

Figma is pretty user friendly

still carbon
#

It's funny because i used to do a lot of courses on figma so i'm not too alien with the controls

#

I know what most things on the surface

#

All i can say is

#

Thank you for being here for me.

remote flicker
#

I was too stuck on a project for quite some time, so I joined his server.

#

And found out many here were facing abunch of problems that I'd faced before

#

Pretty cool website ngl

still carbon
#

I might need a lot of help on this until I can get past the technical issues but i think i'll be okay after the fact

It's just, my brother put this challenge/project on me so suddenly that it's not even funny. I was actually studying webflow, at my own pace. Before studying webflow, i pretty much learned HTML, CSS and JavaScript

I ENJOYED that so much. Switching to webflow was a bit slow and boring but I was getting up to speed, then 3 days ago this happened.

I am supposed to have a complete figma file, and a built out webflow website (no animations and just the homepage), by monday 10 am local time.

still carbon
#

The font

#

I got it

remote flicker
still carbon
#

Yeah, i just wanted to explain my situation a bit indepth for you.

remote flicker
#

Appreciate it bro

#

Thanks for sharing ❤️

still carbon
#

Hm.. So what am i supposed to do with it?

It's font is Aften Screen, but on the design, it's Inter.

#

the html.to.figma thinkg

remote flicker
#

Yeah so, the plugin just replaces the font you have on your machine. Since you didnt have the font installed so it behaved like that

#

you can click the text and change the font

#

If you look closely, the plugin also has a "bug" that it places all the text on a diffrent layer youll have to fix that

still carbon
#

Yeah but.. nodews, i'm still on the exact same issue.

It just feels like it won't click

Should i just give up on it and try to make an excuse?

image.png
#

I would love to use the design as given by html.to.design

#

But

#

The design has to be 1-1

#

That's how i was told

#

I wouldn't care this much

#

If it wasn't for that

#

At this point i'll just stop caring and when he asks me why it doesn't look right

#

I'll just ask him to show me how to do it right then

#

I just feel like i'm back on square one right now.

remote flicker
#

Can you send me your project link?

still carbon
#

Sure man

#

im watching

remote flicker
#

Thats cuz both pages width are diffrent

still carbon
#

Yeah the screenshot is how the page is supposed to be

#

with proper margin

#

n stuff

#

at least that's what i think

#

I'm trying to match the elements to the screenshot

#

So okay just

#

What do i do

#

That's my question

#

I don't have a clear sense of direction right now

#

huh