designmodo's video: How to Export Figma Designs to Websites No Code - Siter io

Figma plugin → https://www.figma.com/community/plugin/1014191120140241695/Siter.io---Export-Figma-Designs-to-Websites Siter.io is a website builder that lets you create and publish entire sites without any coding at all. It works by directly exporting Figma design files without converting the designs into codes like HTML and CSS. You can make changes and adjustments directly on Siter.io, and easily import responsive versions of your designs. Suggestions? → https://siter.io/ _____________ In this video, we’re going to show you how to export designs from Figma to Siter.io! Here on screen, you can see Siter.io - I will create a new website to show you the entire process of moving the Figma designs to Siter.io. I’m just going to click New Site here, give it a name, and press the "Continue" button. Next, you’ll see on screen the Figma app - which I’ve used to design the website. All we need to do here is select the full page you’d like to export to Siter.io like this, right-click - go to Plugins and you’ll see the ‘Siter.io’ plugin as an option in the menu. Once clicked we do a quick login - or pairing of the 2 tools - by pressing the green button. Now that it’s paired, I choose my new website from the dropdown menu, choose the page that I’d like to export - and simply press export to Siter.io. Wait for a few seconds and ready, now you can customize your design on Siter.io and publish it online. By clicking ‘Open Siter editor’ button you can see what the design looks like on the Siter.io - and there it is! Looking as slick and tidy as it did in Figma. Here we have a lot of flexibility - as everything can be quickly customized and changed using the online editor. If, for example, some elements of the design were not exported properly they can be quickly fixed. And here you can see how easy it is to insert a link on a button, for example, and also how to change the color of an element like this same button using the HEX color selector. It’s just as easy to change everything else too - fonts, texts, images, videos, adding contact forms - it really is as simple as point and click, drag and drop - and it works in exactly the same intuitive way as other online design software you may have used before. Lastly, I’ll make a quick edit here to the background color of my site design - because we have a few white sections - we need some gray color in the background. Now, press the Publish button and wait a few seconds. Open the website into a new tab and as you can see, a beautifully designed website is here - exactly like what we had in Figma and Siter.io - without any coding skills required whatsoever. If you like the result, go to the Figma community and install the plugin into your Figma app and start to export your designs to live websites in a few clicks! With that we’ve come to the end of this tutorial - I’ve been Jack from Designmodo, until next time! Over and out.