Figma: Design, Prototype och Collaborate Across Enterprise

figma

De senaste månaderna har jag hjälpt till att utveckla och integrera en mycket anpassad WordPress -instans för en klient. Det är ganska balans mellan styling, att utvidga WordPress genom anpassade fält, anpassade inläggstyper, ett designramverk, ett barns tema och anpassade plugins.

Den svåra delen är att jag gör det från enkla mockups från en proprietär prototypplattform. Även om det är en solid plattform för visualisering och design, översätts det inte lätt till HTML5 och CSS3. Lägg till alla andra iterationer, så blir mina dagar ganska frustrerande med att framstegen är extremt långsamma.

En pusselbit är att designbyrån helt enkelt överlämnade prototyperna, utan att tillhandahålla någon typ av huvudmallblad ... så vi arbetar för att åstadkomma det genom att exportera prototyperna till luftskeppoch sedan översätta CSS till WordPress. Antalet nödvändiga steg och luckorna mellan plattformarna gör det till en svår process. För att inte tala om att försöka förenkla komplexiteten för snabbhet och skalbarhet

figma

figma centraliserar mycket av detta arbete med en plattform som möjliggör design, feedback och samarbete i alla medlemmar i ditt team, inklusive:

  • Designers - Samarbeta i sammanhang och i realtid. Oroa dig aldrig för att dina filer är föråldrade eller skriver över varandras arbete.
  • Intressenter - Skicka en länk för att samla in feedback, få ändringsförfrågningar och låta intressenter göra kopiauppdateringar i dina mönster.
  • Utvecklare - Ingenjörer har alltid tillgång till den aktuella sanningskällan och kan inspektera element, exportera tillgångar och kopiera kod.

Figma har några unika funktioner:

  • Boolesk verksamhet - Med fyra formler: union, subtrahera, korsa och exkludera, kan du kombinera valfri uppsättning formlager med precision.
  • Komponenter - Bygg snabbare och mer konsekvent med återanvändbara och skalbara element över dina filer. Få åtkomst till lager i varje fall så att du intuitivt kan redigera och åsidosätta text och bilder inline.
  • begränsningar - Skala din design så att den passar vilken skärmstorlek som helst genom att fästa objekt i en överordnad ram, knäppa objekt i ett rutnät eller till och med skapa komponenter som skalas.
  • Enhetsramar - Presentera dina mönster i rätt miljöer. Du kan till och med välja mellan stående och liggande läge.
  • Interaktioner - Få dina prototyper till liv genom att definiera interaktioner vid klick, medan du svävar, trycker och mer.
  • Överlägg - Med relativ och manuell positionering har du full kontroll över var och hur överlägg visas.
  • Pixel-perfektion - 60 fps interaktiv redigering ger dig extremt skarpa, pixel-perfekta förhandsgranskningar och export.
  • Prototyping - Bygg snabbt flöden genom att ansluta skärmar och lägga till element som interaktioner, övergångar, överlägg och mer. Istället för att synkronisera med andra verktyg, dela bara en URL för att få feedback.
  • Responsiv Design - Sträck dina layouter och se hur de kommer att svara på förändringar i skärmstorlek.

Responsiv prototyping

  • Rulla - Aktivera horisontell, vertikal eller valfri riktning inom enskilda former eller hela föräldraramen.
  • Stilar - Synkronisera färger, text, rutnät och effekter i alla dina projekt. Behåll färre textstilar och anpassa dina mönster på olika enheter med Figmas unika rutnätstilar.
  • Teambibliotek - Dela komponenter och stilar i Figma - inget behov av delade enheter eller ytterligare verktyg. Du och ditt team kontrollerar hur och när ändringar rullas ut med enkla publiceringsarbetsflöden.
  • Vektornätverk - Figma skapade pennverktyget för att vara mer intuitivt, vilket möjliggjorde direkt manipulation samtidigt som man behåller bakåtkompatibilitet med banor.

För företaget kunder kan Figma driva konsistens, effektivitet och säkerhet i stor skala. Plattformen gör det möjligt för företagskunder att enkelt hantera designsystem med teambibliotek och möjligheten att ladda upp och dela anpassade teckensnitt över hela din organisation. Enkel inloggning, åtkomstkontroller och aktivitetsloggar ingår.

Kom igång med Figma

Figma har ett stort urval av handledningar som de håller på Youtube-kanal, här är en Komma igång -video:

figma ger utvecklare möjlighet att inspektera, kopiera, exportera tillgångar och kopiera CSS direkt från designfilen. Du kan också aktivera dina befintliga arbetsflöden med integrationer, inklusive luftskepp, Avokod, Jira, dropbox, ProtoPieoch Princip för Mac. De har också ett robust API.

Prova Figma gratis

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.