UiChemy

Har du svårt att omvandla dina vackra Figma-design till en fungerande WordPress-webbplats?

Vi fattar – att förverkliga Figma-design kan vara en riktig huvudvärk. Faktum är att våra läsare ofta ber om råd om hur man kan övervinna detta hinder (till den punkt där vi nyligen lanserade våra egna WordPress-designtjänster).

Det är därför vi är så glada över att titta på UiChemy. Detta plugin lovar att konvertera dina Figma-design till WordPress-layouter. Du kan sedan redigera dessa layouter och publicera dem, precis som alla vanliga sidor som skapats i WordPress blockredigerare.

Föredrar du att använda en sidbyggare istället? UiChemy kan också konvertera dina Figma-design till Elementor- eller Bricks Builder-mallar med bara några få klick.

Kan UiChemy vara det tidsbesparande verktyget du har letat efter? Låt oss ta reda på det, i denna detaljerade UiChemy-recension.

UiChemy granskning: Varför använda det i WordPress?

UiChemy lovar att spara tid och effektivisera webbdesignprocessen genom att konvertera dina Figma-design till levande WordPress-webbplatser.

Till skillnad från vissa andra plugins är detta inte en Figma-till-HTML-kodkonverterare, så det lägger inte till HTML-kod i dina mönster.

Istället integreras den direkt med Figma, blockredigeraren eller den sidbyggare du föredrar. När du har gjort det kan du skicka Figma-filen direkt till din WordPress-webbplats. Slutligen kan du finjustera designen med hjälp av Elementor, Bricks Builder eller den inbyggda WordPress-blockredigeraren.

Som du kan se fungerar UiChemy sömlöst med alla dessa plattformar, så du behöver inte skriva någon kod eller anlita en WordPress-utvecklare för att konvertera dina mönster.

Om du precis har kommit igång eller har en begränsad budget kan du exportera upp till 10 Figma-design per månad med hjälp av det kostnadsfria UiChemy-pluginet.

Detta plugin kommer också med 10 Figma startmallar som är utformade för att fungera perfekt med WordPress. Det levereras också med några viktiga verktyg som hjälper dig att skapa mobilvänliga webbplatser, inklusive en lite version av UiChemys Responsive Manager.

Om du vill exportera mer än 10 mönster per månad måste du uppgradera. UiChemys premiumplaner kommer också med ytterligare mallar, avancerad taggning och en mer avancerad version av Responsive Manager.

UiChemy recension: Rätt Figma till WordPress-omvandlare för dig?

Föreställ dig det här: du har tillbringat otaliga timmar med att skapa en fantastisk design i Figma. Du är nöjd med varje detalj, men nu är det dags att översätta den visionen till en fungerande WordPress-blogg.

UiChemy syftar till att överbrygga detta gap mellan design och utveckling. Det lovar att spara tid, samtidigt som det ser till att den färdiga webbplatsen perfekt återspeglar din ursprungliga design.

Levererar UiChemy på dessa påståenden? Låt oss ta reda på det.

1. Lätt att använda

UiChemy är utformat med användarvänlighet i åtanke. Till att börja med kan du installera och aktivera det precis som alla andra WordPress-plugin, och sedan följa instruktionerna på skärmen för att ansluta WordPress till ditt Figma-konto.

När detta är gjort fungerar UiChemy som en kontakt som hämtar dina mönster från Figma. Faktum är att du kan lägga in dina Figma-design direkt i WordPress med hjälp av UiChemy-pluginet.

Alternativt kan UiChemy manuellt exportera dina mallar som en JSON-fil, så att du kan importera dem till WordPress vid ett senare tillfälle. Om du har skapat flera layouter kan UiChemy också bekvämt ladda ner dem alla tillsammans i en ZIP-fil för enkel organisation.

2. Konvertera mönster med 95% noggrannhet

Att manuellt återskapa en design i WordPress kan vara en utmaning. Alltför ofta finns det skillnader mellan den ursprungliga designen och den färdiga produkten.

UiChemy lovar däremot att konvertera dina designer med en noggrannhet på 90-95 %. Var bara medveten om att du måste följa vissa bästa designmetoder för att få bästa resultat, till exempel att skapa en flexibel, mobilvänlig design.

3. Flexibla import- och visningsinställningar

Du kan styra exakt hur UiChemy importerar design till din webbplats.

Beroende på vilka WordPress-plugins och tillägg du har installerat kan du antingen importera din design som en ny WordPress-sida, en ny Elementor-mall eller en ny NexterWP-mall.

Alternativt kan du ersätta eller uppdatera en befintlig mall eller sida med den importerade designen. Slutligen kan du lägga till Figma-designen på en befintlig sida eller mall.

På så sätt kan du styra exakt hur designen ska användas på din webbplats, blogg eller webbutik.

4. Integreras med Elementor

UiChemy integreras med både gratis- och pro-versionerna av Elementor. Men om din design använder pro Elementor-widgetar som kontaktformuläret måste du köpa en premiumplan för UiChemy.

Som redan nämnts är UiChemy inte en Figma-till-HTML-kodkonverterare. Istället för att lägga till HTML-kod konverterar den dina Figma-design med hjälp av Elementors widgetuppsättning.

UiChemy stöder över 30 Elementor-widgetar, plus 30+ widgetar som tillhandahålls av Plus Addons for Elementor. Med detta sagt bör du inte ha några problem med att konvertera din Figma-design till en Elementor-kompatibel mall.

5. Taggning av Elementor Widget

När du exporterar en design till Elementor konverterar UiChemy dessa designelement till vanliga widgetar som rubriker, bilder och ikoner.

UiChemy stöder dock ett bredare utbud av Elementor-widgetar som du kanske vill använda istället. Med detta i åtanke kan du manuellt tilldela ett specifikt Figma-designelement till en specifik Elementor-widget. Denna process är känd som manuell taggning.

På så sätt kan du styra exakt hur UiChemy konverterar dina mönster till Elementor-widgets och layouter.

6. Mobilanpassad design

När det gäller att skapa en responsiv webbplats i Figma är det viktigt att använda Auto Layout snarare än Absolute position.

För att hjälpa dig har UiChemy ett ramoptimeringsverktyg som upptäcker alla ramar som inte använder Auto Layout. Du kan sedan tillämpa Auto Layout med bara några få klick.

7. Responsiv manager och kalkylator

När du exporterar dina mönster kan UiChemys Responsive Manager optimera din layout för mobila enheter. Här kan du skriva in de värden som du vill använda på surfplattor och smartphones.

För att få bästa resultat måste du ange varje mobilvärde som en procentandel av det totala desktopvärdet. Detta kan bli förvirrande, så du kommer att bli glad över att veta att UiChemy också tillhandahåller en responsiv kalkylator.

Skriv bara in det värde du vill använda på mobila enheter, t.ex. 10 pixlar. UiChemy kommer sedan att beräkna detta som en procentsats.

När du har gjort det lägger du helt enkelt till procentsatsen i Responsive Manager. På så sätt kan du vara säker på att din layout kommer att visas korrekt på smartphones och surfplattor, utan att du behöver göra beräkningarna själv.

8. Stöder absolut layout

Även om UiChemy rekommenderar att du använder Auto Layout, stöder det också Absolute layout.

När du exporterar en layout som innehåller absoluta objekt kommer UiChemy att använda CSS absolut position för att säkerställa att dessa objekt förblir i exakt samma position i den importerade layouten.

9. Import i realtid

Du kan exportera dina Figma-designer som en förhandsgranskning i realtid. Detta kan spara massor av tid och ansträngning jämfört med att manuellt ladda ner och ladda upp dina designfiler. Detta gäller särskilt om du vill prova många olika mönster.

Du kan till och med lägga till flera layouter i samma fil, t.ex. layouter för olika sidor på din WordPress-webbplats. När detta är gjort kan UiChemy skapa en enda förhandsgranskning med alla dessa layouter och du kan växla mellan dem med ett enda klick.

10. Optimeringskompanjon

UiChemy levereras med en inbyggd Optimization Companion som kan hjälpa till att förbättra noggrannheten och kvaliteten på din importerade design.

Detta verktyg kommer automatiskt att upptäcka eventuella problem med din design.

Det kommer sedan att gruppera dessa problem i 4 flikar: Mediaoptimering, Frame Optimization Phase, Text Optimization och Main Frame Optimization. Om du till exempel har skapat en vektorbild med flera element kommer UiChemy att flagga detta som ett potentiellt problem och föreslå att du låser gruppen så att den exporteras som en enda bild.

Ofta kan du ta itu med dessa problem genom att klicka på UiChemys knappar ”Fix” eller ”Fix All”. UiChemy kommer då att lösa problemet åt dig.

11. Optimering av huvudram

UiChemy kan skanna din designs huvudram för egenskaper som vanligtvis ignoreras i den exporterade mallen. Detta inkluderar gap, horisontell utfyllnad, vertikal utfyllnad och justering.

Även om dessa egenskaper vanligtvis ignoreras, kan det ibland ge oförutsägbara resultat att inkludera dem i den exporterade filen. Med detta sagt kan UiChemys optimeringsverktyg för huvudramen identifiera och ta bort dessa egenskaper med bara några få klick.

12. Automatisk detektering och kombination av SVG:er

Som standard delar Figma upp SVG-bilder och ikoner i separata avsnitt. Detta kan dock orsaka problem när det är dags att importera designen till WordPress.

För att lösa detta problem kan UiChemy automatiskt upptäcka SVG:er och deras element och sedan exportera dem som en enda SVG-fil.

Alternativt kan du tagga elementet till en widget eller använda UiChemys låsfunktion för att kombinera flera element till en enda bild. Detta ger dig mer kontroll över hur UiChemy hanterar SVG-filerna i din design.

13. Låsning av objekt

Som standard kommer UiChemy att exportera varje designelement som ett enskilt element. Ibland kan du dock skapa ett enda objekt med hjälp av flera element. Du kan till exempel skapa en header med hjälp av en bannerbild, en call to action-knapp och text.

I så fall kan UiChemy låsa ihop dessa element och exportera dem som en enda bild. Ofta kommer detta att minska storleken på den exporterade filen, eftersom du exporterar färre enskilda element. Din webbplats, blogg eller onlinemarknadsplats bör bli enklare att underhålla som ett resultat.

14. Snabba upp din import

Som standard importerar UiChemy bilder direkt från din Figma-design. Detta kan sakta ner importen om din design har många bilder, eller om du inte har optimerat grafiken. Med det sagt är det viktigt att optimera dina bilder innan du lägger till dem i Figma.

Om du inte lyckas med det kan UiChemy importera din Figma-layout utan några bilder. Detta kan vara ett bra alternativ om den ursprungliga designern inte följde bästa praxis. Det är också ett bra alternativ om din Figma-design innehåller platshållarbilder som du planerar att ersätta ändå.

Ett annat alternativ är att exportera designen med skalade bilder. Skriv bara in det skalvärde du vill använda, så exporterar UiChemy layouten med storleksanpassad grafik.

15. Inbyggt mallbibliotek

För att hjälpa dig att skapa vackra layouter, snabbt, kommer UiChemcy med en fördesignad samling Figma-mallar.

Dessa mallar är alla optimerade för WordPress så att du enkelt kan importera den färdiga designen till blockredigeraren, Elementor eller Bricks Builder. Till exempel är alla komponenter i UiChemys mallar förmärkta till relevanta widgets, så du behöver inte märka dem manuellt.

UiChemy levereras med 3 malltyper: Sida, Avsnitt och Komponent. Till att börja med skapar sidmallar en ny sida på toppnivå som följer alla UiChemys designriktlinjer.

Det finns också Section-mallar, som du kan använda i alla Page-mallar. Slutligen tillhandahåller UiChemys Component-mallar enskilda element, så de är perfekta för att lägga till i det aktuella redigeringslagret.

16. Stöd från samhället och professionella

UiChemy lovar att spara dig massor av tid och ansträngning genom att automatiskt konvertera dina Figma-design till live WordPress-förhandsvisningar, sidor och webbplatser. Men på vägen kan du behöva extra hjälp för att skapa högkonverterande sidor och fantastiska webbplatser.

Till att börja med har UiChemy online-dokumentation som du kan komma åt 24/7. Här hittar du steg-för-steg-guider om hur du ställer in och använder pluginet, tillsammans med en användbar felsökningsguide.

Utöver det har UiChemy-teamet skapat videohandledning, webbseminarier och en Educational Community File som du kan importera till ditt Figma-konto. Den här filen innehåller designriktlinjer, mallar och exempel på hur du använder manuell taggning i dina Figma-design.

Föredrar du support på tu man hand? Då kan du uppgradera till premiumplanen och få hjälp via livechatt eller helpdesk. Enligt UiChemys webbplats kan du vanligtvis förvänta dig ett svar inom 24 timmar, exklusive helger.

Om du använder det kostnadsfria tillägget kan du skriva ett inlägg i UiChemy-forumet på WordPress.org och få svar på grundläggande frågor.

När du skickar inlägg till offentliga supportforum är det alltid en bra idé att inkludera så mycket information som möjligt, så att experterna kan förstå ditt problem fullt ut och skicka ett användbart svar. För mer information om detta ämne, se vår guide om hur du ber om WordPress-support på rätt sätt.

UiChemy granskning: Prissättning och planer

Om du precis har kommit igång eller har en begränsad budget kan du ladda ner lite-versionen av UiChemy från WordPress.org.

Med detta kostnadsfria plugin kan du exportera 10 Figma-design per månad. Var bara medveten om att varje sida räknas mot den kvoten. Den kostnadsfria planen kommer också med 10 startmallar och grundläggande support.

Om du vill exportera mer än 10 sidor per månad eller använda avancerade funktioner måste du uppgradera.

Det finns 2 planer att välja mellan:

• Pro. För $ 19 per månad kan du exportera upp till 100 mönster. Du får också 50+ professionella mallar som du kan använda i dina mönster.
• All åtkomst. När du har investerat i All Access-planen (prissatt till $ 49) kan du exportera upp till 500 mönster per månad. Du kan också dela UiChemy med upp till 5 andra Figma-användare. Med detta sagt är den här planen perfekt för team eller WordPress-utvecklingsbyråer som behöver skapa massor av mönster och få tillgång till mer avancerade funktioner.

Oavsett vilken plan du köper kommer dina exporterade mönster att förbli intakta även om din UiChemy-licens löper ut.

UiChemy recension: Rätt Figma till WordPress-omvandlare för dig?

För att sammanfatta denna UiChemy-recension är vi övertygade om att det är ett bra plugin för att effektivisera ditt Figma-till-WordPress-arbetsflöde.

UiChemy är en enkel lösning för designers eller webbplatsägare som vill översätta sina mönster till fungerande WordPress-layouter. Det är kompatibelt med blockredigeraren, men det integreras också sömlöst med Elementor och Bricks Builder. Detta innebär att du kan redigera och hantera de importerade designerna med din föredragna WordPress-sidbyggare.

Om du bara vill exportera ett litet antal Figma-design är gratisplanen ett bra ställe att börja på. Men du behöver vanligtvis premiumplanen om du vill designa en hel webbplats eller köra flera olika webbplatser.

Vi hoppas att denna UiChemy-recension hjälpte dig att avgöra om det är rätt Figma-till-WordPress-konverterare för dig. Därefter kanske du vill se vår guide om hur du ökar din WordPress hastighet och prestanda, eller kolla in vårt expertval av de bästa kontaktformulärpluginsen.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.