How do I move my Figma design file to my website

Hey there, moved this to a new topic.
Can you provide some more information? Are you wanting to host the figma file on your site or are you wanting to build a site based on the design in the file?

Are you wanting to host the figma file on your site or are you wanting to build a site based on the design in the file?

Dear Josh,

New Topic! February 6, 2021

Are you wanting to host the figma file on your site?

I am not sure what you are asking me?

When you say Host, Would this be the same as the design?

Or are you wanting to build a site based on the design in the file?

Or do I need to build the site www.fitnessmegawarehouse.com base on the design

Please advise me on what would be the best way to have this design for

www.fitnessmegawarehouse.com website

Looking forward to your prompt response in this matter

Your truly

Gregory F. De Graf

Coo

Fitness Warehouse Inc.

Figma is not a website constructor, it’s a design app. After your website is designed in Figma, you need to hire developers who will turn your design in Figma into code that can be hosted on the website. Figma mockups are just pictures and can’t be used as a website. Websites are built with code. Alternatively, you can use website constructors such as Tilda, Wix, Webflow etc. to “design” your website directly into code, skipping Figma altogether or using Figma designs as a reference.

Readymag is also a powerful option. 🖖

Also try Webflow for this

Hi Kolyba, Thank you for your prompt response in this matter, I will look in to this, Regarsd Greg

Thank you all for the suggestions, I really apperceive this, Do you know of someone that can build this site for us so that we can upload this life on our website www.fitnessmegawarehouse.com, We are willing to pay for the service, please advise? Regards Greg

Figma is a vector pix editor and prototyping device that’s in the main web-based, with extra offline functions enabled with the aid of using computing device programs for macOS and Windows. The Figma cell app for Android and iOS permits viewing and interacting with Figma prototypes in real-time on cell devices.

Step 1: Create your Webflow task The first step in developing a domain in Webflow is to create a brand new task . This works similar to developing a Figma document , so not anything too complicated here. Just click on the blue button withinside the pinnacle proper corner, and begin from scratch.

Step 2: Create your worldwide patterns/fashion guide The first element I do on a brand new web website online is outline my worldwide patterns. Global patterns are all the default matters that each internet site needs, like paragraph fashion , headings, and hyperlink appearance. The Hopper Figma document has a whole fashion guide, however in case your task doesn’t, you would possibly need to make one so that every one your base patterns are appropriate to move .

Step 3: Export your property Now which you’ve been given your worldwide patterns defined, it’s time to export all the property out of your Figma document. If you’ve been diligent approximately marking images, icons, and different properties for export as you have been working, surely hit Command/Control + Shift + E with not anything decided on to deliver up the export dialogue. Hit the export button, and after it’s done, Figma will ask in which to keep all the amazing property. If you need to limition what you’re exporting, like best the property on a selected figure body, choose that body and use the identical shortcut.

Step 4: Div- body your web website online Next, I love to do something I name div-framing. To do this, I study all the larger groups/frames of my Figma document, and attempt to reflect them with divs in Webflow. You can bypass this step if it’s now no longer helpful, however, it maintains me prepared withinside the lengthy run. For the Hopper web website online, I additionally delivered boxes to every div phase that isn’t full-width, as that’s how the maximum of the unique document becomes defined. Once you’ve got got the ones divs for your canvas, supply every a completely unique elegance name. There’s no want to outline those training yet, however you’ll need to visit the settings tab and supply every ID. This is available in on hand later if you’re going to feature anchor hyperlinks in your web website online.

Step 5: Style your content Styling your training is each the perfect and maximum hard a part of Webflow. It’s first-rate clean to start, however, it is able to be hard to maintain matters smooth in large sites. I wrote plenty extra approximately this in my collection displaying a way to construct a corporation internet site, which is probably helpful. Be positive to maintain your training generically named, smooth, and as minimum as possible. For example, rather than naming something “Black Hero Text,” strive to develop a combination elegance of “All H1 Headings” + “Black Text” instead. This will permit your heading 1 elegance to address size, weight, and positioning, no matter color. Then you could upload a secondary elegance to extrude color (or different properties) in your unique use case.

Step 6: Interactions Your web website online can also additionally have a few complicated interactions, however, gear like Figma will best assist you out a lot with that, as maximum the whole lot can be flat. And except you’ve got any other prototyping device, you can don’t have anything however Webflow for interplay layout and implementation. The appropriate news: Webflow is virtually one of the exceptional interactions layout gear out there. If you’re the fashion dressmaker for your task, there’s no want to make your interactions in Principle, Atomic, InVision Studio, etc. You can simply do it properly in Webflow.

Step 7: Work your manner to cell Webflow isn’t always cell -first, and despite the fact that you might imagine that manner together along with your projects, don’t — I repeat, don’t — layout the cell breakpoints earlier than you visit computing device. You see, the “ computing device ” model of your web website online is much less a selected viewport than its miles a loss of a viewport definition. All the paddings, colors, fonts, flex properties, etc., which you outline in this viewport will float downwards, however, can by no means move upwards. (And that’s actually as you step down the smaller breakpoints as well.)

For More Information visit: [redacted]

Great Thanks it very helpful.

Thanks it very helpful