Fantastiske Figma

Eksempel fra designværktøjet Figma

Figma er et gratis designværktøj for alle, også hvis du ikke er designer. Jeg bliver mere og mere glad for det efterhånden, som jeg lærer det at kende. Det er så nemt at gå til, at jeg også er begyndt at bruge Figma, når jeg bare lige skal tilpasse størrelsen på et billede.

Her er et eksempel, hvor jeg har downloadet et foto fra Unsplash for at lave et blikfang til et opslag på sociale medier. Fra download-bjælken nederst i browseren (Chrome) kan jeg trække billedet direkte ind i Figma.

Figma er et designværktøj for alle

Trinvis beskrivelse af videoen

  1. Skab først en ramme (frame i menuen øverst til højre). Brug evt. en af de foruddefinerede størrelser, som jeg gør her.
  2. Træk et billede ind i rammen.
  3. Formindsk billedet i rammen.
  4. Indsæt en tekst.
  5. Markér rammen med alt indhold.
  6. Download i det ønskede format ved at klikke på “Eksporter”.

Figma er gratis til og med tre projekter. I hvert projekt kan du have mange pages, så der går et stykke tid, før du får brug for mere end tre projekter. Det er i hvert fald rigeligt til hobbybrug.

Så er det også webbaseret, så du behøver ikke installere noget. Du kan bare gå i gang: https://figma.com

Figma som arbejdsredskab

Figma anvendes som arbejdsredskab for mange designere efterhånden. Der findes derfor også tonsvis af open source plugins, som er lavet af andre firmaer og designere. Når du har fundet et sejt plugin, så trykker du bare på knappen “Installer” og vupti, så er det tilføjet og brugbart. Jeg har indtil videre installeret plugins til Icons8, Material Design Icons og Unsplash, så jeg kan bruge ikoner og fotos direkte fra Figma.

Et andet sejt plugin er Color Blind, som kan lave en version af dit design, så du kan se, hvordan det ser ud med forskellige slags farveblindhed. Herunder har jeg tegnet de første to kasser med farverne rød og grøn. Derefter har Color Blind genereret de øvrige udgaver ud fra forskellige typer af farveblindhed.

color blindness

Figma er også et prototypeværktøj, så du kan kæde dine sider sammen som en prototype, som du kan dele med andre. Der findes også en Figma Mirror app, som gør det nemt at teste din prototype på telefonen.

Der er forskellige muligheder til at simulere animation og microinteractions i Figma, så din prototype bliver realistisk.

Derudover er Figma også beregnet til tæt samarbejde mellem designere og udviklere, så man kan tilgå de samme filer og bruge det som designsystem.

Der er cookies i værktøjskassen, så jeg kan se, hvilke indlæg der bliver læst mest. Når du klikker videre, tæller jeg også dine klik med, men jeg kan ikke se, hvem du er.