{"id":5436,"date":"2023-03-24T13:58:10","date_gmt":"2023-03-24T12:58:10","guid":{"rendered":"https:\/\/www.swash-formation.fr\/?p=5436"},"modified":"2023-03-24T14:14:53","modified_gmt":"2023-03-24T13:14:53","slug":"frontender-un-nouveau-plugin-pour-exporter-ses-projets-figma-en-html-css","status":"publish","type":"post","link":"https:\/\/www.swash-formation.fr\/ressources\/frontender-un-nouveau-plugin-pour-exporter-ses-projets-figma-en-html-css\/","title":{"rendered":"FrontEnder, un nouveau plugin pour exporter ses projets Figma en HTML \/ CSS"},"content":{"rendered":"<p>Le plugin en question s&rsquo;appelle <a href=\"https:\/\/www.frontender.io\/\" target=\"_blank\" rel=\"noopener\">Frontender.io<\/a> et se pr\u00e9sente comme un <em>D\u00e9veloppeur Junior Personnel<\/em>. Il a \u00e9t\u00e9 lanc\u00e9 r\u00e9cemment et est disponible sur <a href=\"https:\/\/www.figma.com\/community\/plugin\/1194222042313126344\/Frontender-Beta\" target=\"_blank\" rel=\"noopener\">le store Figma<\/a> depuis le 7 mars. Con\u00e7u par le n\u00e9erlandais Jeroen Riemens, fondateur de The Prototype Factory, Frontender.io permet de convertir n&rsquo;importe quel calque Figma en code front-end : HTML et CSS, CSS seul ou encore dans la taxonomie du framework CSS Tailwind.<\/p>\n<div class=\"x-video player\" data-x-element-mejs><div class=\"x-video-inner\"><video class=\"x-mejs x-wp-video-shortcode advanced-controls\" id=\"video-5436-1\" width=\"1066\" height=\"774\" loop autoplay preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.swash-formation.fr\/wp-content\/uploads\/2023\/03\/Frontender-figma-formation-swash.mp4?_=1\" \/><\/video><\/div><\/div>\n<p>L&rsquo;une des principales caract\u00e9ristiques de Frontender.io est sa capacit\u00e9 \u00e0 trouver la hi\u00e9rarchie et la signification des fichiers, m\u00eame pour les fichiers d\u00e9sorganis\u00e9s. Cela signifie qu&rsquo;il n&rsquo;est pas n\u00e9cessaire d&rsquo;organiser vos fichiers avant de les exporter, ce qui est une v\u00e9ritable aubaine pour les designers qui manquent de temps ou de comp\u00e9tences en mati\u00e8re de structuration de fichiers.<\/p>\n<h2>Une personnalisation avanc\u00e9e annonc\u00e9e pour bient\u00f4t.<\/h2>\n<p>Mais Frontender.io ne s&rsquo;arr\u00eate pas l\u00e0. Le plugin promet \u00e9galement une personnalisation pouss\u00e9e de l&rsquo;exportation. Les utilisateurs pourront bient\u00f4t personnaliser les unit\u00e9s, les variables CSS ou la configuration Tailwind pour encore plus d&rsquo;automatisation. Cela permettra aux utilisateurs avanc\u00e9s de personnaliser leur exportation pour r\u00e9pondre \u00e0 des besoins sp\u00e9cifiques.<\/p>\n<p>Le plugin propose un compte gratuit limit\u00e9 \u00e0 15 conversions par mois, ce qui permet de tester l&rsquo;outil avant de passer \u00e0 un plan payant. Pour les utilisateurs qui souhaitent des conversions illimit\u00e9es et instantan\u00e9es, ainsi que la personnalisation des variables CSS, un plan professionnel est disponible pour 10\u20ac par mois (pour un an).<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"fr\" data-theme=\"dark\">\n<p dir=\"ltr\" lang=\"en\">Working on Frontender 1.1, releasing later this week<\/p>\n<p>It will be *much* faster, almost without delay \u2728 <a href=\"https:\/\/t.co\/PwUB9p2rqt\">pic.twitter.com\/PwUB9p2rqt<\/a><\/p>\n<p>\u2014 Jeroen (@jeroenmakes) <a href=\"https:\/\/twitter.com\/jeroenmakes\/status\/1638207648062492673?ref_src=twsrc%5Etfw\">21 mars 2023<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/script><\/p>\n<p>Ce plugin est une v\u00e9ritable aubaine pour les graphistes qui ne sont pas tr\u00e8s \u00e0 l&rsquo;aise avec les langages HTML\/CSS. Il leur permet de convertir facilement leurs designs Figma en code front-end, sans avoir \u00e0 s&#8217;emb\u00eater avec le code. Les designers peuvent ainsi se concentrer sur la cr\u00e9ation de designs incroyables, tout en sachant que Frontender.io s&rsquo;occupe de la conversion en code.<\/p>\n<p>Frontender.io semble \u00eatre un plugin Figma prometteur pour les designers qui cherchent \u00e0 exporter leurs designs en HTML\/CSS. Avec sa capacit\u00e9 \u00e0 trouver la hi\u00e9rarchie et la signification des fichiers, ainsi que sa personnalisation pouss\u00e9e, il pourrait bien devenir le nouvel outil indispensable des designers et des d\u00e9veloppeurs front-end.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le plugin en question s&rsquo;appelle Frontender.io et se pr\u00e9sente comme un D\u00e9veloppeur Junior Personnel. Il a \u00e9t\u00e9 lanc\u00e9 r\u00e9cemment et est disponible sur le store Figma depuis le 7 mars. Con\u00e7u par le n\u00e9erlandais Jeroen Riemens, fondateur de The Prototype Factory, Frontender.io permet de convertir n&rsquo;importe quel calque Figma en code front-end : HTML et CSS, CSS seul ou encore &#8230;<\/p>\n","protected":false},"author":1,"featured_media":5438,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[226],"tags":[],"class_list":["post-5436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/posts\/5436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/comments?post=5436"}],"version-history":[{"count":8,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/posts\/5436\/revisions"}],"predecessor-version":[{"id":5447,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/posts\/5436\/revisions\/5447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/media\/5438"}],"wp:attachment":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/media?parent=5436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/categories?post=5436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/tags?post=5436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}