Figma

Figma is a collaborative web application for interface design and prototyping.

Docs

• Figma Documentation
• Figma Community

Tutorials

• Figma 101: Getting Started
• Figma for Beginners

UI Kits

• Vuetify UI Kit for Figma
• Ultimate Figma UiKit For Vuetify

Tools

• figma-linux: Unofficial Electron wrapper for Linux (Fedora, Ubuntu, etc.). Available via Snap, Flatpak, RPM, or AppImage. Requires Figma account. Provides desktop app experience but is a wrapper around the web version, not a native app. Mixed reviews on performance.
• Figma API: REST API for programmatically exporting frames as PNG/SVG, accessing file data, and automating workflows. Requires personal access token.
• Figma Make: Create with AI-Powered Design Tools
• Export Plugins: Community plugins for batch exporting (PNG/SVG) and automation
• Conversion Tools:
  • Built-in export panel in Figma (PNG/SVG/PDF)
  • ImageMagick for command-line conversion
  • Online converters (CloudConvert, Convertio) for batch processing

Blog Posts

• Evan Wallace (Figma co-founder, former CTO)
  • Figma
  • WebAssembly cut Figma’s load time by 3x (2017)
  • Building a professional design tool on the web
  • Created kiwi library for binary serialization (used in .fig format)
  • Also created esbuild (fast JavaScript bundler), Skew (programming language), and many WebGL/graphics projects
• Easy Logic: Figma Inside — .fig file analysis
• Claude Code + Figma MCP Server
• Using Claude Code to create designs from screenshots in Figma
• Vibe Coding with Claude Code: Can integrate with Figma via MCP server to convert designs to code (React, HTML/CSS, Tailwind). Share Figma URL or screenshot, describe adjustments, and generate production-ready code

Integration with Static Sites (Jekyll/GitHub Pages)

• Export diagrams as PNG (for complex visuals) or SVG (for scalable diagrams)
• Place exports in assets/images/ directory
• Embed in Markdown using standard image syntax or HTML with Tailwind classes
• No external dependencies required for static integration
• For interactive prototypes, can use iframes (adds external dependencies)

Data Formats

• .fig: Proprietary binary format (undocumented, internal use only). Reverse-engineered by community using kiwi library
• Export Formats: PNG (raster, supports transparency), SVG (vector, scalable), PDF (multi-page), JSON (via API)
• Reverse Engineering:
  • kiwi library by Evan Wallace (Figma’s former CTO) - binary serialization library
  • fig-file-parser - Public parser for .fig files
  • figma-fig-tools - Tools to unpack .fig files
  • Format is a ZIP archive with compressed binary chunks (schema + data) using DEFLATE or ZSTD

Comparison with Excalidraw

• Figma: Full-featured design platform, polished UI/UX, better for professional designs and collaboration. More complex, requires export steps for static sites
• Excalidraw: Lightweight, hand-drawn style, faster for quick sketches. Simpler integration, smaller file sizes. Better for rapid ideation
• Both work well for static site integration (export SVG/PNG and embed)

Features

• Collaborative design in real-time
• Vector graphics editing
• Prototyping and animations
• Component libraries
• Design systems
• Developer handoff tools
• WebAssembly-powered rendering engine (3x faster load times)

Other

• Artificial Intelligence
• AI Agents
• Cognitive Science
• Computation Theory
• Language Models
• Meta Learning
• Probabilities and Statistics
• Robotics
• Self Driving Cars
• Computational Topology
• Webdev
  • Dash
  • Excalidraw
  • Figma
  • Gradio
  • LabelStudio
  • Next.js
  • Remix
  • Streamlit
  • SVG
  • Tailwind
  • Vercel
  • Vue