Figma: Design, prototype og samarbejde på tværs af virksomheder

Figma

De sidste par måneder har jeg været med til at udvikle og integrere en meget tilpasset WordPress-instans til en klient. Det er en balance mellem styling, at udvide WordPress gennem brugerdefinerede felter, brugerdefinerede posttyper, en designramme, et underordnet tema og brugerdefinerede plugins.

Den vanskelige del er, at jeg gør det fra enkle mockups fra en proprietær prototypeplatform. Selvom det er en solid platform til visualisering og design, oversættes det ikke let til HTML5 og CSS3. Tilføj alle de andre iterationer, og mine dage bliver ret frustrerende med, at fremskridt er ekstremt langsomt.

Et stykke af puslespillet er, at designbureauet simpelthen overleverede prototyperne uden at give nogen form for master-stilark ... så vi arbejder på at opnå det ved at eksportere prototyperne til luftskibog derefter oversætte CSS til WordPress. Antallet af nødvendige trin og hullerne mellem platforme gør det til en vanskelig proces. For ikke at nævne forsøg på at forenkle kompleksiteten med hensyn til hastighed og skalerbarhed

Figma

Figma centraliserer meget af dette arbejde med en platform, der muliggør design, feedback og samarbejde i hvert medlem af dit team, herunder:

  • Designere - Samarbejd i sammenhæng og i realtid. Du skal aldrig bekymre dig om, at dine filer er forældede eller overskriver hinandens arbejde.
  • Interessenter - Send et link for at indsamle feedback, få anmodninger om ændringer og tillade interessenter at foretage kopiopdateringer i dine designs.
  • Udviklere - Ingeniører har altid adgang til den aktuelle sandhedskilde og kan inspicere elementer, eksportere aktiver og kopiere kode.

Figma har nogle unikke funktioner:

  • Boolske operationer - Med fire formler: union, subtraherer, skærer hinanden og udelukker, kan du kombinere ethvert sæt formlag med præcision.
  • komponenter - Byg hurtigere og mere konsekvent med genanvendelige og skalerbare elementer på tværs af dine filer. Få adgang til lag i hvert tilfælde, så du intuitivt kan redigere og tilsidesætte tekst og billeder inline.
  • Begrænsninger - Skaler dit design, så det passer til enhver skærmstørrelse ved at fastgøre objekter til en overordnet ramme, snappe objekt til et gitter eller endda ved at oprette komponenter, der skaleres.
  • Enhedsrammer - Præsenter dine designs i de rigtige miljøer. Du kan endda vælge mellem stående og liggende tilstand.
  • Interaktioner - Få dine prototyper til live ved at definere interaktioner ved klik, mens du svæver, mens du trykker på og meget mere.
  • Overlays - Med relativ og manuel positionering har du fuld kontrol over, hvor og hvordan overlays vises.
  • Pixel-perfektion - Interaktiv redigering på 60 fps bringer dig ultra skarpe, pixel-perfekte previews og eksport.
  • Prototyping - Opret hurtigt strømme ved at forbinde skærme og tilføje elementer som interaktioner, overgange, overlays og mere. I stedet for at synkronisere med andre værktøjer skal du blot dele en URL for at modtage feedback.
  • Responsive Design - Stræk dine layout og se, hvordan de reagerer på ændringer i skærmstørrelse.

Responsiv prototyping

  • rulning - Aktiver vandret, lodret eller hvilken som helst retning, der ruller inden for individuelle former eller hele forælderammen.
  • Styles - Synkroniser farver, tekst, gitre og effekter på tværs af alle dine projekter. Vedligehold færre tekstformater, og juster dine designs på tværs af forskellige enheder med Figmas unikke gitterformater.
  • Teambiblioteker - Del komponenter og stilarter i Figma - intet behov for delte drev eller yderligere værktøjer. Du og dit team styrer, hvordan og hvornår ændringer udrulles med enkle publiceringsarbejdsprocesser.
  • Vector netværk - Figma skabte penneværktøjet til at være mere intuitivt, hvilket giver mulighed for direkte manipulation og samtidig bevare bagudkompatibilitet med stier.

Til virksomhed klienter, Figma kan skabe konsistens, effektivitet og sikkerhed i skala. Platformen gør det muligt for virksomhedskunder nemt at administrere designsystemer med teambiblioteker og muligheden for at uploade og dele tilpassede skrifttyper på tværs af din organisation. Single Sign-On, adgangskontrol og aktivitetslogfiler er inkluderet.

Kom godt i gang med Figma

Figma har et stort udvalg af tutorials, som de vedligeholder på deres Youtube kanal, her er en Kom godt i gang-video:

Figma giver udviklere mulighed for at inspicere, kopiere, eksportere aktiver og kopiere CSS direkte fra designfilen. Du kan også aktivere dine eksisterende arbejdsgange med integrationer, herunder luftskib, Avokode, Jira, Dropbox, ProtoPieog Princip til Mac. De har også en robust API.

Prøv Figma gratis

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.